Poniżej przedstawiam część pierwszą dłuższego artykułu, który niebawem zostanie dołączony do kursu na browsehappy.

Artykuł na joggu, podobnie jak poprzednie, będzie wklejany w częściach

Powrót króla

Musisz żyć z dala od cywilizacji jeśli jeszcze nie wiesz, że używanie tabel do tworzenia layoutu stron WWW jest złe. HTML jest od treści, CSS do tworzenia wyglądu.

Zapewne żyjesz wśród magicznych grzybów jeśli wciąż nie zorientowałeś się, że CSS pozwala Ci zrobić wszystko czego potrzebujesz.

Widzisz, w idealnym świecie wszystko jest w porządku. Treść skrojona na miarę, ubrana przez profesjonalistów w poprawny, semantyczny kod pasuje idealnie do dopieszczonego do ostatniego piksela szablonu Twojej strony. Przeglądarki obsługują dokładnie te same standardy i wyświetlają kod w dokładnie ten sam sposób.

I w tym momencie pojawia się cegła, która budzi nas z tego snu. W państwie prezentacji w którym rządzi Car CSS 1.50304 “Irytujący” zdumiewająco trudno jest zbudować szablony, które nie są zbyt kruche. Nawet Heros we własnej osobie prowadzi nierówny bój z idiotyzmami dominującej przeglądarki. A przecież jest on jedyną osobą, która uzupełnia treść swojej strony!

A co gdyby treść pisał i dodawał ktoś inny? Ktoś kto albo się nie zna, albo po prostu nie dba o jakość tekstu i kodu?

Problem staje się palący gdy strona jest bardziej rozbudowana a w dodatku jej wymiary są “płynne” - nie znamy ich dokładnie. Robi się jeszcze gorzej, gdy “góra” domaga się czegoś więcej niż typowe “dwie kolumny”, “trzy kolumny” bądź “trzy kolumny z colą i frytkami na wynos”.

Test

Jeden z bohaterów serialu “Everybody Loves Raymond” był szczęśliwy gdy w końcu znalazł spodnie, które pasowałyby do jego, powiedzmy delikatnie, za dużej sylwetki. Mniejsza o to, że jego żona kupiła je w sklepie dla przyszłych matek - Frank kochał swoje spodnie, które doskonale dopasowywały się do jego ciągle powiększających się rozmiarów.

W podobny sposób jak te spodnie, Twoja strona musi dopasować się do sytuacji, w której treść z czasem się rozrasta i przybywa jej trochę cellulitu tu i tam. Mówiąc prościej, by zdać ten test, każda strona musi pod wpływem “złego” contentu:

• nie “rozjechać się”
• nie zmienić kolejności wyświetlanych elementów
• niedopuścić do nachodzenia na siebie elementów strony

Dodatkowo warunki te powinny być spełnione także gdy okno przeglądarki zmieni swoje wymiary.

A teraz idź się pobawić z CSS’em. Ściągnij sobie kilka przykładów stron, które są stworzone w czystym XHTML+CSS i potestuj. Obejrzyj te strony w IE, obejrzyj je w Gecko. Możesz nawet rzucić na nie okiem pod Operą.

Z pewnością zauważysz, że żaden z układów nie przechodzi tego testu. Jeśli znajdziesz taki, który go przechodzi - daj mi znać.

Sekret, który chcemy przed Tobą ukryć

Masz rację - tabele, jeśli poprawnie zaprojektowane, przechodzą ten test wzorowo. Prawdopodobnie kwestię tę najlepiej naświetlili Andy Budd i Dave Shea w swoim uderzeniu przeciw purystom: tabele są złe, ale w pewnych warunkach, w rzeczywistości, mogą być jedynym, sensownym, wyjściem.

Olav Junker podsumowuje to w jednym ze swoich komentarzy:

CSS is perfect for basically single-column layouts. Secondary blocks like sidebars can be placed outside the main column with float. This solves the layout requirements of many websites, but requires the designer to rethink the layout as column-based rather that grid-based. It’s not just a case of moving some attributes into a slightly different CSS syntax.

However, sometimes you really need blocks aligned in two dimensions. You can emulate it with positioning and fixed sizes, but this will not, like tables, adjust gracefully if content is changed.

So my point is, it’s not a case of CSS being harder to learn and tables beeing more familiar (the same could be said of font-tags then, but i dont think many uses them any more), its a case of CSS not supporting 2D grid-layouts.

Bolesne, ale należy przyznać, że wszystkie dominujące silniki przeglądarek dostępnych w tej chwili na rynku, nie wspierają w wystarczającym stopniu tworzenia układów opartych o najprostszą, dwuwymiarową siatkę. Możesz przesuwać i pozycjonować swoje divy i spany jak chcesz, ale jest to tylko symulacja tego, co zapewniają tabele.

Przebudujmy je! Mamy przecież odpowiednią technologię

Zatem, czy jest jakieś rozwiązanie, które da nam do dyspozycji podstawową, dwuwymiarową siatkę, idealnie dopasowującą się do tego co chcemy osiągnąć? Owszem, jest - uzupełnijmy silniki przeglądarek o brakujące możliwości.

Hę? Czyżbyśmy próbowali stworzyć nową przeglądarkę?

Nie, raczej nie - przynajmniej taką mamy nadzieję. Chcemy tylko odrobinę poprawić obecnie istniejące z pomocą Javascriptu. Czas wyciągnąć stare, zaufane i sprawdzone, ostrze Javascriptu, którym zaprowadzimy ład i porządek w sposobie prezentacji naszych stron.

Spokojnie. Nie będziemy tu używać ukrytych ramek, tony “onresize” i tym podobnego śmiecia. Tak naprawdę całość jest bardzo prosta.

Pomyślmy przez chwilę. Mamy przecież logikę, która robi DOKŁADNIE to co chcemy osiągnąć i jest wbudowana w każdą przeglądarkę na rynku.

Czy to nie były tabele? Zgadliście!