Perfection or Vanity

Po wypuszczeniu Internet Explorera 7, zespół programistyczny Microsoftu ucichł na cały rok. Posty na blogu bywały sporadyczne, nikt nie informował – w odróżnieniu od raportów developerki IE7 – jakie cele zostały osiągnięte. Mam nadzieję, że zmieniło się to dzisiaj, kiedy to na IEBlog pojawiła się informacja o pozytywnym przejściu testu Acid2 przez, będącego ciągle na warsztacie, Internet Explorera 8.

Przygotowując kawałek kodu JavaScript zechciałem wyraźnie zaznaczyć, że pływająca warstwa znajduje się nad resztą strony. Oczywistym wyborem był cień – wyzwanie polegało na tym, że chciałem aby był prawdziwie półprzezroczysty oraz wyglądał inaczej (IMO: lepiej). Od zawsze podobał mi się efekt Outer Glow w Photoshopie, stąd i taki zamierzałem zrobić w CSS.

Czasami zdarza się tak, że oddając gotową stronę (zarządzaną zazwyczaj przez panel administracyjny) nie przewidzimy dokładnie ile danych klient będzie chciał w nią wstawić. Chyba najbardziej wrażliwą częścią strony jest nawigacja - złożona z listy nieuporządkowanej, i floatowanych pozycji.

Istnieją dwa podejścia do zaprojektowania takiego menu - pierwsze to określić na stałe szerokość elementu, a drugie to pozwolić aby szerokość była kształtowana przez długość tekstu. Oba mogą zawieść, jeśli potrzeba dłuższej etykietki niż tej w pliku PSD. Dlatego postanowiłem wykorzystać możliwości CSS2 i użyć min & max-width do osiągnięcia rozsądnego kompromisu.

W erze Ajaksa otwieranie nowych okien za pomocą window.open() jest passé. Całkiem słusznie - po co rozpraszać użytkownika (i kazać mu czekać aż przeglądarka przetrawi rozkaz otwarcia okna), skoro przy pomocy prostego układu divów można zasłonić to co widzi na stronie warstwą overlay i na niej umieścić kolejną warstwę - okienko?

Tak działa sławny Lightbox otwierający obrazki albo Thickbox otwierający prawie wszystko. Tylko jest jedna rzecz, która mi się w tym nowym trendzie projektowania nie podoba - nadmierne wykorzystanie JavaScriptu. Nadmierne ponieważ 95% interfejsu potrzebnego do naszego efektu da się zbudować przy pomocy CSS.

Roger Johansson powiedział kiedyś tak:

Web professionals who refuse to update their skills and insist on using outdated methods can no longer be called web professionals.

(Profesjonaliści, którzy odmawiają uczenia się nowych rzeczy i upierają się przy używaniu przestarzałych metod nie mogą być już dłużej nazywani profesjonalistami - tłum. wł.)

Kiedyś budowaliśmy strony za pomocą tabel, teraz nadszedł czas na podzielenie dokumentu na sekcje i stworzenie z nich layoutu za pomocą CSS. Rozszerzając wypowiedź Johannsona - wszyscy, którzy projektują dalej na zagnieżdżonych tabelach w niedługim czasie albo przestawią się na CSS albo wypadną z obiegu.

Tabelowy layout jest niedopuszczalny, ale prosty w użyciu i bardzo przewidywalny. Webdesignerzy zaczynający pisać w CSS mają całkiem poważne problemy, ponieważ nowoczesne projektowanie opiera się na pozycjonowaniu treści zawartej w blokach. Ich rozmiary nie są sztywne (i w większości sztywne być nie powinny), dlatego nie można uzyskać równych kolumn. Nie można? Zaraz się przekonamy…

Bardzo ładnym i subtelnym efektem używanym na stronach internetowych jest zaaplikowanie cienia tekstowi, w celu jego wyróżnienia bądź poprawienia kontrastu. Udało mi się przetestować kilka sposobów jego dodania. Każda metoda ma swoje plusy i minusy oraz różni się znacznie od pozostałych. Aby ujednolicić przykłady będziemy operować na zwyczajnym jednopikselowym cieniu rzucanym od góry z lewej.