Jeśli nie divy, to co?

18.04.2008, 0:30 - Internet, Techblog

Sprawa, o której zamierzam napisać zapewne nie należy do najnowszych, jednak dopiero teraz zebrałem się, żeby o niej napisać. Doświadczeni górale doskonale pamiętają, że jeszcze kilka lat temu designy oparte na tabelach były normalną praktyką większości webmasterów. Wejście języka XHTML przyniosło modę, a z czasem konieczność przestawienia się na tworzenie stron beztabelkowych, tj. opartych na zaniedbywanych jak dotychczas divach.

Wydawałoby się, że do czasu upowszechnienia HTML 5 tak zostanie, jednak znaleźli sie zapaleńcy, którzy stwierdzili, że skoro mają już strony bez tabel, to teraz czas na strony... bez divów.

Tak jak wtedy argumentowano, że tabelki służą do prezentacji danych tabelarycznych (masło maślane), tak w tym przypadku divy nie wnoszą nic do semantyki dokumentu, przez co nie są w stanie we właściwy oddać struktury strony. Alternatywą dla nich miałyby być listy numerowowane (bądź nie) oraz listy definicyjne, które po odpowiednim ostylowaniu zachowywałyby się w identyczny sposób jak divy.

W praktyce jest to możliwe. Udowadnił to chociażby P.J. Onori, tworząc dwie przykładowe witryny. Znacznie dalej posunął się Thierry Koblentz, który dodatkowo pozbawił swój kod elementów typu float, clear oraz hacków (choć nie obyło się bez komentarzy warunkowych i expressions). Poprawność semantyczna takich zastosowań list została pobłogosławiona przez W3C. Pomimo to na chwilę obecną listy (nie)uporządkowane stosuje się rzadko do czegoś więcej niż proste wyszczególnienia kilku elementów, nie wspominając już o listach definicyjnych, które bardziej kojarzą się ze słownikowym układem haseł, niż elementów layoutu.

Czy ta ciekawostka powinna kiedykolwiek zyskać na znaczeniu i zająć miejsce obok takich oczywistości jak umieszczanie elementów prezentacyjnych w arkuszach stylów? Z dwojga złego wolałbym zaczekać na gotowy draft HTML 5, który powinien zrobić porządek z tymi nieszczęsnymi dziesiątkami divów i zażegnać semantyczne obejścia, które opisałem powyżej. Pozostaje tylko kwestia powinowactwa z XML i konsekwencji tegoż, ale to już temat na na bardziej bezsenną noc.

Tagi Technorati:

Dodaj do zakładek · RSS dla komentarzy · Adres trackback

Komentarze do wpisu:

  1. puppy 18.04.2008, 1:11

    Wystarczy żeby wszystkie przeglądarki obsługiwały display: table-* w div a tworzenie layoutów to będzie przyjemność.
    A jak się uprzeć to można zrobić stronę składającą się wyłącznie z elementów a, ew. dodając elementy formularzy :)

  2. qvist 18.04.2008, 4:03

    jak design nie jest robiony przez niedoksztalconego web-grafika (a takich jest 98% w zawodzie) to mozna sobie caly lay trzaskac na dl i swietnie sie przy tym bawic…

    jednak w realnym swiecie takie podejscie nie ma szans na przetrwanie (mowie o pracy agencyjnej, a nie hobbistycznej). juz bez ograniczen w ilosci uzywanych divow czy spanow mozna nawnerwiac sie na grafikow, natrafiajac na irutujace komplikacje w designie, ktore ciezko przelozyc na dostepna i semantyczna strukture.

    no i pozagniezdzane dl czy ul nie wydaja mi sie lepsze od zagniezdzonych divow. pokusze sie nawet o stwierdzenie, ze bezsensowne zagniezdzanie tych pierwszych moze zaszkodzic (np. kuloodpornosci, dostepnosci, moze nawet SEO?).

    dlatego uznalbym takie praktyki bardziej jako koderski fetysz niz nowy trend na miare tableless layouts.

  3. Michał Górny 18.04.2008, 6:37

    Ja już dawno mówiłem, że divy złe, to wyśmiewali. A teraz? Niby popierają, ale znowu se znaleźli nowe elementy do nadużywania. Dobry design to taki, który zawiera minimum elementów, zachowując przy tym maksimum semantyki.

  4. stormfly 18.04.2008, 7:28

    To nie ma szans ;) Jeśli coś ma się zmienić to tak za 5 lat najwcześniej. Obecnie z samymi divami jest już problem pod różnymi przeglądarkami (np. zastosowanie width + padding jednocześnie), a co dopiero przy listach… gdzie pod IE np. trzeba wymuszać hasLayout bo inaczej wszystko się sypie ;)

    Ten przykład, który został pokazany ma się nijak do wyglądu normalnych stron.

    dla mnie listy są po to by używać ich do list… a nie by tworzyć układ kolumnowy, no sorry, ale dla mnie to już przegięcie ;)

  5. bounty_hunter 18.04.2008, 8:54

    Zgadzam się z opinią, że jeśli tabele są do tabel a divy do wydzielania jakichś sekcji dokumentu, to listy służą do tworzenia list. Period.

    Osobiście na razie pozostaję przy divach, ale ja tam się mogę deklarować, ja tylko hobbystą jestem.

    Posiedzą, pomyślą to może wymyślą coś nowego, bardziej semantycznego, w stylu <leftside>, <rightside> itd ;p

  6. BTM 18.04.2008, 9:10

    Pomijając błędne przykłady w CSS na podanej przez Ciebie stronie, nie widzę sensu w rozumowaniu autora.
    Najpierw pisze, że DIV’y nie mają znaczenia „layoutowego” dla starszych przeglądarek (a kogo to przepraszam obchodzi?) a potem pisze, że można używać do tego list definicji. No sorry, ale nie do tego zostały one stworzone.

    Na upartego można zrobić sobie stronę z samymi spanami i całą treść oraz prezentację zrobić w CSS w stylu:

    span span span span span span span span span span span span span span:before { content: „To jest mój tekst gdzieś w środku strony”
    }

  7. bounty_hunter 18.04.2008, 9:14

    @BTM: Muszę przyznać, że chciałbym coś takiego zobaczyć. Popatrzeć, podumać, zastanowić się nad zdrowiem psychicznym autora, itd.
    Na siłę wszystko można. Najrozsądniejszym podejściem, moim zdaniem, jest robienie wszystkiego tak, żeby „po prostu działało”, przez co rozumiem także zgodność ze standardami i czytelność tworu.

  8. Taeril 18.04.2008, 12:13

    „Wejście języka XHTML przyniosło modę, a z czasem konieczność przestawienia się na tworzenie stron beztabelkowych” – Nie ma przymusu ani w HTML, ani w XHTML do stosowania czy też niestosowania tabelek.
    Tak naprawdę jeżeli się nie wykorzystuje możliwości XHTML-a ponad to, co oferuje HTML, to te języki się nie różnią poza tym, że XHTML sprawia problemy w niektórych przeglądarkach albo jest błędnie traktowany jak HTML.

    „Poprawność semantyczna takich zastosowań list została pobłogosławiona przez W3C.” – toż to nieprawda. Semantyka to znaczenie i ten automat nie powie czy np. dla <X>ala ma kota</X> to <X> powinno być <p> bo to akapit, a może <h2> bo to nagłówek a może jest to <li> jako element listy? Jakie znaczenie ma „ala ma kota”?
    z http://kurs.browsehappy.pl/Kurs/Walidatory – „Automatycznie sprawdza większość reguł dotyczących poprawności składni i struktury XHTML. Nie sprawdza semantyki, stylów, ani skryptów.”

    Boom na XHTML przyniósł także modę na „strony na divach” ale ten termin dla niektórych określa semantyczny kod a inni traktując go literalnie wpadają w drugą skrajność.

  9. witek 18.04.2008, 12:17

    „divy nie wnoszą nic do semantyki dokumentu”

    To div nie oznacza przypadkiem jakiejś części strony tworzącej logiczną całość? Owszem, nie jest to wiele, ale zawsze coś.

    „Zgadzam się z opinią, że jeśli tabele są do tabel a divy do wydzielania jakichś sekcji dokumentu, to listy służą do tworzenia list. Period.”

    Tu się w pełni zgadzam, tyle że zazwyczaj patrzy się na te elementy zbyt prezentacyjnie. Lista to nie koniecznie kilka wypunktowanych elementów, są też listy komentarzy, listy artykułów (np. na stronie głównej bloga).

    Szkoda, że w IE nie da się sensownie stylować tabelek. IMO to dobrze było by zamykać w nich wszystkie listy, których elementy składają się zawsze z tych samych elementów, teraz niestety wiąże się to z wyświetleniem tego jako tabelka. A mogło by to być bardzo wygodne choćby dla osób niewidomych, np. wyczytywanie wszystkich autorów komentarzy+wyczytanie wybranych w całości.

    List definicji IMO lepiej nie nadużywać.

    „Posiedzą, pomyślą to może wymyślą coś nowego, bardziej semantycznego, w stylu <leftside>, <rightside> itd ;p”

    IMO to akurat były by elementy typowo prezentacyjne.

  10. BTM 18.04.2008, 12:19

    A przypadkiem w specyfikacji HTML 5 nie ma właśnie <sidebar /> ?

  11. witek 18.04.2008, 12:33

    @BTM
    A nie chodzi Ci o <aside /> [1], ew. jeszcze <nav /> [2]? One akurat określają co w nich jest, a nie że należy wyświetlić to z lewej części strony.

    Jest jeszcze <link type=„sidebar” /> [3]

    1. http://www.w3.org/html/wg/html5/#the-aside
    2. http://www.w3.org/html/wg/html5/#the-nav
    3. http://www.w3.org/html/wg/html5/#link-type15

  12. btm 18.04.2008, 12:34

    @Witek – tak, właśnie o to, wyleciało mi z pamięci ;-) Tymniemniej, aside / nav doskonale nadają się do kolumn a nawigacją.

  13. witek 18.04.2008, 12:51

    @BTM
    Przy okazji dając dużo wygody dla przeglądającego. Wyobraź sobie jeden skrót klawiaturowy powodujący przeskoczenie do menu nawigacyjnego na każdej stronie, wyświetlenie listy klikanych tagów w jednym miejscy przeglądarki na każdej stronie na której istnieją, czy klik i na ekranie jest tylko artykuł, a reszta strony ukryta.
    Przy okazji strony zaczną być przyjemniejsze dla niewidomych, botów, skrajnie małych wyświetlaczy, i wszystkiego co nie jest przeglądarką na monitorze.

  14. bobiko 18.04.2008, 15:51

    Jak dla mnie to znów niepotrzebne zamieszanie. Ledwo co weszlismy w standardy xhtml2.0 (przez co przeglądarki poprawnie działają w końcu), to juz pojawia się ktoś, kto ma własne widzimisie ;)

    Czyli html5 upodabnia się do xul w sensie kodu ? nonsens.

  15. Anonim 18.04.2008, 20:09

    „Ledwo co weszlismy w standardy xhtml2.0 (przez co przeglądarki poprawnie działają w końcu)”

    Możesz rozwinąć, bo chyba coś mnie ominęło. Mogę już pisać <h src=„xxx.png” href=”/”>Tytuł</h> i to będzie działać?

    „Czyli html5 upodabnia się do xul w sensie kodu ?”

    A co przez to rozumiesz, nie nam za bardzo XUL, ale podobieństwa nie widzę, nawet zastosowanie inne.

  16. btm 18.04.2008, 20:10

    @Anonim: możesz, ale musisz użyć transformacji XSLT w celu wygenerowania poprawnego dokumentu XHTML

  17. witek 18.04.2008, 20:19

    @btm
    Tak to mogę sobie nawet w języku trelemeledudki pisać, byle był na XMLu oparty. Widzisz może w tym jakiś sens, czy sztuka dla sztuki?

  18. witek 18.04.2008, 20:36

    Większość osób pewnie już się orientuje, ale dodam jeszcze, że w większości HTML5 działa już teraz chyba w każdej przeglądarce, wystarczy jedynie jakoś sensownie oscylować nowe elementy, a dla IE dodatkowo utworzyć skryptem niepodczepione nigdzie nowe (w HTML5) elementy, jeśli chcemy je stylować. Brakuje chyba tylko obsługi <audio /> i <video /> (co jest kwestią niedługiego czasu, choć tak swoją drogą, to nieszczęście, że coś takiego powstało), a reszta to udoskonalanie obsługi tego co już i tak jest użyteczne.

  19. witek 19.04.2008, 0:57

    „Semantyka to znaczenie i ten automat nie powie czy np. dla <X>ala ma kota</X> to <X> powinno być <p> bo to akapit, a może <h2> bo to nagłówek a może jest to <li> jako element listy? Jakie znaczenie ma „ala ma kota”?”

    Semantyczna ma być struktura, a nie treść strony. Automat ma wiedzieć, czym jest zdanie „Ala ma kota”, a nie rozumieć co ono znaczy.

  20. Taeril 19.04.2008, 1:14

    Jakie znaczenie ma względem całej strony a nie co oznacza samo w sobie. Jakoś tak chyba myślałem. Przyznaję, że nie najlepiej się wyraziłem ale tak to bywa jak się pisze w pośpiechu :)
    A właśnie o to chodziło co napisałeś i spytanie czym jest byłoby odpowiedniejsze.

  21. aasiek 19.04.2008, 21:29

    zamienił stryjek…
    najpierw mówili, że tabele nie są do robienia stron tylko do prezentowania danych w formie tabelarycznej, a teraz mówią, że listy się nadają? za jakiś czas stwierdzą, że listy są jedynie do wypunktowania :P
    ja zostaję przy divach, chociażby mieli tutaj zaraz z samych ‘&nbsp;’ korzystać! o.

  22. witek 20.04.2008, 0:18

    @aasiek
    I masz racje. Nadużywanie divów przez część webmasterów jest faktem, ale o ile ktoś nie robi czegoś w style <div class=” cytat różowy” /> to jest ok. Z kolei stworzenie listy której jednym elementem jest nagłówek, drugim treść, trzecim sidebar, a czwartym stopka chrzani semantykę nie gorzej niż tabelki, a w praktyce jest jeszcze gorsze, bo kod nie jest ani semantyczny, ani prezentacyjny.

  23. WZ 22.04.2008, 21:51

    @witek, nie zapędzasz się?

    Nie rozumiem ostatniego zdania co do tego, że kod prezentacyjny jest lepszy od tego, w którym strona jest oparta na listach. Wprawdzie sam też nie do końca się z tym zgadzam, ale argumenty obydwu stron są całkiem sensowne i np. tak jak wspomniałeś nagłówek, treść, stopka to też lista elementów/składników jednej strony. A więc oczywiście są powiązane znaczeniowo i pełnią wartość jako jedna całość. Czy nie to jest przeznaczeniem list?

    Pod względem semantyki dokumentu kod prezentacyjny i kod z pomieszanym znaczeniem jest równorzędnie zły, bo prezentacyjny tak samo miesza znaczenie np. przez duży text przez <hx>, entery przez <P> etc.

    „Nadużywanie divów” nigdy nie było, nie jest i nie będzie ok… Trzeba znaleźć kompromis.

Skomentuj wpis:

W komentarzach działa Textile (bez obrazków).

 Kod