Cod semantic şi cod tableless

Chiar dacă a trecut mult timp de la buzz-ul cu renunţarea la tabele pentru designul unui site, am observat că încă sunt destui care nu înţeleg pe deplin acest … concept. Scriu acest post din două motive: am avut de curând un client (de fapt un intermediar) ce a cerut în mod express să NU folosesc tabele, chiar dacă datele erau tabulare şi, mai deunăzi, m-a întrebat cineva pe messenger ce tag-uri ar putea folosi în locul table.

Wtf?! Tabele pentru design???

Dacă eşti un pic mai vechi în domeniu sau ai avut tangenţe constante cu dezvoltarea web, probabil ai observat că în urmă cu aproximativ 5-6 ani a început un adevărat jihad împotriva tabelelor. De ce? Pentru că un site era „modelat” pe un tabel uriaş în care erau inserate alte tabele, în care erau inserate alte tabele şi tot aşa, nefiind decât o limită a bunului simţ în ceea ce priveşte nivelul tabelelor.

Avantajul major? 90% din browsere interpretau codul în mod identic (sau cu diferenţe foarte mici). Desigur, asta se întâmpla când CSS-ul era ceva proaspăt, iar suportul în browserele momentului (IE 5.0/IE5.5/IE5 pentru Mac şi Netscape 4) era la un nivel minim, făcând scrierea unui cod corect un adevărat chin.

Dezavantajele tabelelor se făceau simţite în diverse situaţii: persoanele cu probleme de vedere ce foloseau un screen reader aveau probleme în citirea paginii (un screen reader citeşte „cu voce tare” ce apare pe ecran), lăţime de bandă consumată inutil (dimensiunea unei pagini cu tabele fiind considerabil mai mare; se spune că traficul – în kb – microsoft.com s-a înjumătăţit după renunţarea la tabele pentru design ), întreţinere greoaie (din moment ce nu se folosea CSS, stilizarea se făcea inline; atribute precum bgcolor încă mai există ) şamd.

CSS ce?

CSS-ul are avantaje din toate punctele de vedere, mai ales acum, când toate browserele oferă un suport cel puţin decent (da, inclusiv IE6!):

• Trafic mai mic în kb (aşa cum am zis mai sus. De ce? Majoritatea fişierelor externe (css, js) sunt descărcate o singură dată. După aceea sunt citite din cache. Desigur, cu mici excepţii, în care utilizatorul/administratorul de reţea a setat browserul altfel. În plus, foloseşti mai puţin cod html.
• Poţi face rapid şi foarte uşor modificări în fişierul CSS pentru tot site-ul.
• Site-ul va fi mult mai accesibil persoanelor cu dizabilităţi.

Extrema!

Problema cea mai mare la css este următoarea: sunt mulţi coderi care au sărit un pas. Acela în care învăţau DE CE e bine să foloseşti css dar mai ales CUM. Prin urmare, au apărut tot felul de combinaţii: de la boldarea unui text folosind:

<div class="bold">text</div>

.bold {
display:inline;
font-weight:bold;
}

ajungând până la folosirea altor elemente pentru tabele decât… tabelele. E posibil să ţi se pară incredibil exemplul de mai sus, dar l-am întâlnit de curând într-un site. Amuzant sau nu, te las pe tine să decizi.

Dacă e valid….

Dacă ai un cod valid (conform w3c) nu înseamnă neapărat că totul e ok. Poţi face un site exclusiv cu span-uri ? Poţi (desigur, mai puţin pentru link-uri)! E corect?

Un cod semantic înseamnă să:
1) Foloseşti denumiri ce sugerează conţinutul unui element, nu aspectul. Ce înseamnă asta? div id="right" pentru un sidebar (de exemplu) este greşit. div id=sidebar" în schimb, este corect. De ce este greşit? În urmă cu câţiva ani, trendul general era să se poziţioneze sidebar-ul în partea stângă. De când au apărut blogurile, sidebar-ul s-a mutat în partea opusă. Imaginează-ţi că ai un div id="left" şi vrei să-l muţi în dreapta. Se poate, cu schimbări minime în css. Dar după aceea va mai avea sens?
2) Foloseşti tag-urile corecte. Aşa cum am zis mai sus, poţi face un site exclusiv folosind tag-ul span: la fiecare span îi dai o clasă, stilizezi fiecare clasă după necesităţi şi gata. Ce înseamnă să foloseşti tag-urile corespunzătoare? Pe lângă clasicile (deja) h1-h6 pentru titluri/subtitluri/sub-sub-….-titluri, p pentru paragrafe, span pentru evidenţierea/stilizarea separată a unei porţiuni dintr-un text (de exemplu), mai este încă un tag. Care, dacă faci parte din dezvoltatorii de care am pomenit mai sus, îţi va provoca un şoc:

FOLOSEŞTE TABLE!

Când foloseşti tabele? Răspunsul cel mai simplu, ce ţi-l poate da 95% din cei ce au văzut mai mult de 5 linii de cod este: „când ai de afişat date tabulare”. Dar ce înseamnă date tabulare? Cum le identifici?

De fiecare dată când sunt întrebat acest lucru (şi crede-mă, nu se întâmplă foarte rar!), răspund, invariabil în următorul fel:

Respectivele date pot fi inserate cu uşurinţă într-un document excel?

Dacă răspunsul este afirmativ, în 99% din cazuri vei avea nevoie de tag-ul table şi de tot ce ţine de tabele: tr, th, td etc. Etc? De ce etc? Pentru că astea nu sunt singurele tag-uri specifice tabelelor !

Cum verifici codul?

Cea mai mare problemă cu codul semantic este că… nu se poate verifica. Nu există (sau cel puţin nu din câte ştiu eu) un validator pentru semantică. Prin urmare, cea mai bună validare se face în următorul fel:

1. Instalezi web developer toolbar (presupun că foloseşti firefox);
2. După ce încarci pagina care vrei să o validezi apeşi Ctrl+Shift+S. Ca prin farmec, stilurile vor fi dispărute.

După ce ai procedat în acest fel, încearcă să utilizezi pagina respectivă. Dacă toate elementele spun ceea ce ar trebui să spună, felicitări! Ai un site semantic! (încearcă pe această pagină să dezactivezi stilurile)

Când încalci regulile?

Teoretic (şi recomandat), niciodată. Practic însă, eşti nevoit, în unele cazuri să calci şi strâmb. De exmplu, butoanele sliding doors. Da, merge, e ok. Dar span-ul din interiorul linkului nu „spune” nimic.

O soluţie pentru a evita astfel de probleme de semantică ar fi injectarea respectivelor tag-uri în DOM folosind js sau o librărie js (jQuery, prototype, moo etc). Mie mi se pare o măsură uşor extremă, dar… pentru unii poate părea o idee bună

O altă situaţie în care de voie, de nevoie, încalci regulile ar fi în cazul tag-ului hr şi a elementelor de formular. Acestea arată diferit pe fiecare browser (inclusiv pe versiuni diferite ale aceluiaşi browser!). Aici folosesc, aproape în toate cazurile, js fără să stau prea mult pe gânduri.

Linkuri utile/interesante

http://www.hotdesign.com/seybold/everything.html
http://www.csszengarden.com/

Exemplu. Negativ (editare ulterioară)

De cum m-am trezit, Andrei mi-a arătat un site: lucrurigratis.ro. Nu comentez despre utilitatea site-ului (pentru că unii îl pot considera folositor). Dar dacă te uiţi în cod, s-ar putea să ai un şoc. Este greşit din atâtea puncte de vedere încât mi-e şi frică să fac un review. Aşadar, te las să te delectezi cu un cod. Enjoy!

Btw, cred că este al ţâşpelea site care îmi confirmă că măcelarii programatorii ASP habar n-au html.