Status serwera wykorzystując CSS – podejście drugie

Tym razem będzie krótka notka. Dawniej pisałem o tym jak za pomocą CSS można wyświetlać status serwera (czyli to czy jest offline, czy też online). Niedawno przyszedł mi do głowy nieco inny sposób na wykorzystanie CSSa do tego celu.

Podstawowym problemem poprzedniego pomysłu był fakt ładowania się strony. Jeżeli serwer był offline to strona ładowała się niesamowicie długo z tego względu, że nie mogła załadować CSSa znajdującego się na tym serwerze (przypomnę, że ten arkusz zmieniał wyświetlanie dwóch elementów, przez co “zmieniał” się napis). To co mi niedawno zaświeciło w głowie to załadowanie obrazka jako background dla jakiegoś elementu. W praktyce to wyglądałoby tak:

W kodzie strony:

<div id=”status”>&nbsp;</div>

Natomiast w CSS:

#status { background-image: url(‘http://example.com/blah.jpg’); }

Oczywiście styl można dowolnie wzbogacić, tutaj został przedstawiony wyjątkowo uproszczony..

Jaka jest zaleta takiego rozwiązania? Z tego co zauważyłem strona ładuje się normalnie, a wszelkie obrazki (które są użyte jako tło) ładują się nie wpływając na resztę. Niejednokrotnie zauważyłem, że cała strona jest już załadowana, a tło dla jakiegoś elementu załadowało sie dopiero po jakimś czasie. Dlatego też takie rozwiązanie jest wygodne, ponieważ nie powinno za bardzo spowolnić ładowania strony.

Wadą tego jest to, że jeśli faktycznie serwer jest offline, to element blokowy nie pokaże żadnej informacji na ten temat. Ew. można zrobić tak, że do takiego elementu nada się jeszcze jakiś kolor tła, który będzie symbolizował to, że serwer jest offline.

5 Responses to “Status serwera wykorzystując CSS – podejście drugie”

  1. Jiobel June 7, 2007 at 10:43 am #

    Po pierwsze zastosowanie &nbsp; jest zupełnie bez sensu (wyobraź sobie sytuację, jak ktoś wchodzi z przeglądarki z wyłączonymi css`ami). W tym przypadku lepiej generować dynamiczny tekst (a jak to niemożliwe, to po prostu „status serwera”) i go ładnie przesuwać poza ekran w zamian, jak to sobie obmyśliłeś – dając obrazek w tle. :-)

  2. Zamber June 7, 2007 at 10:43 am #

    Jest na to sprytniejszy sposób: masz na tym 1szym serwie obrazek na ktorym pisze ze ten 2gi nie dziala (rownie dobrze moga to byc czerwone i zielone bullety). Ustawiamy jednego diva na drugim i w chwili gdy serwer 2gi nie dziala pokazuje nam sie obrazek z diva ktory jest pod nim ^^.

  3. Zamber June 7, 2007 at 10:43 am #

    Oczywiście Jiobel ma rację ;] trzeba myśleć też o ludziach którzy nie maja wsparcia css, wtedy skrypt wyjdzie najlepiej (wszak to tylko kilka linii kodu ;P, o ile się nie mylę).

  4. radmen June 7, 2007 at 10:43 am #

    Jiobel: teoretycznie &nbsp; być nie musi. Wiem z doświadczenia, że gdy nadawałem DIVom określoną wysokość i szerokość, a nic w nich nie było to jakoś nie każda przeglądarka wtedy się stosowała do tego stylu. Poza tym zastanawia mnie ile jeszcze osób w tych czasach przegląda strony bez CSSa….
    Oczywiście i w tym wypadku lepiej to traktować jako ciekawostkę ;-]

  5. wh1t3en June 7, 2007 at 10:43 am #

    Można to udoskonalić i np, wyświetlać dwa napisy jeden czerwony: ONLINE i ZIELONY OFFLINE. Mało to użyteczne ale równie ciekawe :) . Domyślnie dodajesz do status, background: red (wyświetla się zielony kolor z napisem offline). A obrazek jednopikselowy zielony i wtedy nie będzie widać tekstu offline zaś bedzie widać online :) . To takie udoskonalenie co do tekstu, ale raczej przy wyłączonym css, nikt nie będzie wiedział o co biega :) .