Czwartek 21 września 2006 | Napisał: Peter-Paul Koch

Myśl elastycznie

Czasy zmieniły się na lepsze od kiedy nadeszła era standardów sieciowych. Teraz można napisać skrypt albo deklarację CSS i być pewnym, że Mozilla, Explorer i Opera zinterpretują go z grubsza w podobny sposób. Pewność ta jest niewymownym luksusem, jeśli porównać do sytuacji, którą musieliśmy znosić kilka lat temu.

Co prawda, nie wszystkie niekompatybilności pomiędzy przeglądarkami zniknęły, powinniśmy też zwracać uwagę na kilka przestarzałych przeglądarek. Co więc powinniśmy robić? Stosować hacki do problemów, które niedługo przestaną istnieć? Stosować detekcję niepożądanego oprogramowania oraz ignorować jego użytkowników?

... a może zapewniać obejścia problemów dla mniej popularnych przeglądarek?

Trudna decyzja.

Rok temu pisałem kod strony, która wyglądała znacznie gorzej w Netscape 4 niż w nowszych narzędziach. Robiłem to celowo. Chciałem korzystać z nowoczesnego CSSa nie martwiąc się o bardziewne przeglądarki.

Niemniej jednak, była to trudna decyzja. Zostałem nauczony tego, aby każdy layout wyglądał tak samo, co do piksela, w każdej ważniejszej przeglądarce, i tego, że lekceważenie Netscape’a 4 jest nie do zaakceptowania.

Oglądałem się nerwowo, spodziewając się nieprzyjemnych uwag, że źle wdrożyłem taki czy inny layout, i że w gruncie rzeczy nie wiem co robię. Szczęśliwie nikt się nie spostrzegł, bo nikt nie testował w Netscape 4.

Później zrozumiałem, że nawet jeśli ktokolwiek zweryfikowałby kompatybilność nie przejąłbym się szczególnie. Sumiennie pracowałem nad wszystkimi problemami, do czego przecież zostałem wynajęty: strona była czytelna i nawigowalna. Ładnie się degradowała.

Łagodna degradacja.

Pomijając fakt, że jest to najśliczniejszy termin w deweloperskim słowniku, “łagodna degradacja”, jest ona także prostą ale potężną techniką. Pierwszym krokiem do skutecznego stosowania tej techniki jest elastyczne myślenie. Oznacza ono akceptację nieprzewidywalnych zasad rządzących narzędziami, które stosuje użytkownik do przeglądania sieci.

Łagodna degradacja oznacza, że Twoja strona działa jeśli jest przeglądana w narzędziach gorzej niż akceptowalnych, w których zaawansowane efekty nie działają (brak CSS w Netscape, brak obrazków w przegądarkach głosowych). Zasada jest prosta. Dodaj do strony wszystkie efekty, które pragniesz dodać ale upewnij się, że bez nich strona dobrze funkcjonuje.

Łagodna degradacja opiera się na dwóch elementarnych zasadach:

  1. Każda przeglądarka musi być zdolna do zinterpretowania treści strony.
  2. Każda przeglądarka musi pozwolić na skuteczną nawigację na stronie.

Zobacz jak wygląda Twój HTML bez CSS i JavaScript. Czy cały tekst jest czytelny? Czy kolejność elementów jest logiczna? Czy wszystkie link działają w odpowiedniej kolejności? Jeśli tak jest, zbudowałeś elastyczną, prostą podwalinę dla Twojej strony.

Teraz możesz dodać kolejne warstwy z bajerami, pamiętając o elastyczności. Jak strona będzie wyglądać w innych rozdzielczościach niż najpopularniejsze? Czy strona będzie dostępna bez nawigacji DHTML? A co z niepewnymi atrybutami CSS? Co będzie gdy niektóre efekty nie będą działać? A co jeśli wszystkie cudeńka zawiodą? Na całej linii?

Nie martw się o odpowiedzi, stawianie pytań jest ważniejsze. Dorzuć jeden dzień do procesu tworzenia następnej strony, pół dnia do kolejnej. Rozważaj cały czas te pytania. Zanim zajmiejsz się trzecią stroną odpowiedzi pojawią się same.

Ucieczka ze sztywnych ram

Myślenie elastyczne pomoże Ci przejść obronną ręką przez rozliczne bagna pomniejszych błędów. Jako przykład weźmy problem box model, zapewne jeden z nabardziej skomplikowanych poroblemów kompatybilności w layoutach opartych na CSS.

Mozilla i Opera trzymają się standardu W3C ale Explorer korzysta z modelu Microsoftu, przez co my, biedni twórcy stron mamy o jedną zgryzotę więcej.

Możliwe jest przełączenie Explorera 6 w tryb standardu W3C przez sprytne użycie deklaracji doctype i na odwrót można przełączyć Mozillę w tryb Microsoftu. Dostępny jest także odpowiedni hack CSS.

Mamy zatem mnóstwo sposobów na złożone wyminięcie problemu ... ale czy utrzymujemy zgodność z zasadą prostoty?

Najprostszym sposobem na uniknięcie problemu box model jest takie projektowanie, że nie przeszkadza on bardzo. Jeśli Twój blok ma stałą szerokość, padding na 5px a border na 1px, Explorer pokaże ten blok o 12px mniejszy niż inne przeglądarki. Jeśli layout jest wystarczająco elastyczny, żeby poradzić sobie z tą różnicą – nie musisz się martwić.

Niekiedy nie ma wiele miejsca na tego rodzaju elastyczność. Możesz sobie wówczas zadać pytanie, czy layout nie jest zbyt skomplikowany? Początkujący twórcy stron mają skłonność do zbyt dużej sztywności myślenia i zakładają, że strona będzie wyglądać identycznie z tym jak ją zaprojektowali. W takich przypadkach szybka lekcja elastycznego projektownia jest wystarczającym remedium.

Wnioski

W moim mniemaniu łagodna degradacja i elastyczny design są podzbiorem elastycznego myślenia. Pierwsze pomaga rozwiązać problemy z różnicami w przeglądarkach, drugie pomaga odpuścić sobie precyzję co do piksela w trakcie wdrażania projektu graficznego.

Myśl elastycznie. Strona internetowa nie jest sztywnym medium. Jest nieprzewidywalna. Z Twoją stroną mogą się stać rzeczy, których nie przewidzisz i najlepsze co możesz zrobić jest popłynąć z prądem.

Projektuj wg zasady prostoty. Elastyczność stron nie jest problemem, jest rozwiązaniem. Jeśli jesteś w stanie zaakceptować, że twoja strona nigdy nie będzie widziana dokładnie jak chcesz, zrozumiesz ducha sieci i jej standardy.

Atrykuł publikuję za zgodą Petera-Paula. Ukazał się w magazynie Digital Web 2 października 2002 roku. URL: http://www.digital-web.com/articles/fluid_thinking/

Siłą rzeczy część komentarzy odnoszących się do przeglądarek jest nieco zdezaktualizowana ale najważniejszy - i wciąż aktualny - jest kluczowy przekaz.

Artykuły

Teksty własne lub tłumaczenia z angielskiego, francuskiego i niemieckiego.