Asa cum am aflat din articolul Dezvoltarea unui site: Compatibilitatea cu browserele, un element important in proiectarea unei interfete web este compatibilitatea cu browserele; una din primele probleme de care ne lovim, este faptul ca diversele taguri html, fara a folosi niciun fisier css, sunt redate diferit in fiecare browser. Probabil valorile care dau cele mai multe batai de cap designerilor, sunt valorile pentru margin si padding, care nu au aceleasi valori implicite pentru toate browserele, ci in general pentru fiecare browser, acestea au valori diferite. Cu toate ca poate acesta pare un fapt marunt, este foarte important ca atunci cand proiectam o interfata web, sa oferim utilizatorilor o interfata consistenta.
Pentru a rezolva aceasta problema (si nu numai), au aparut framework-urile CSS. Spuneam ca aceste framework-uri nu numai ca reseteaza valorile pentru margin si padding pentru a obtine o redare a elementelor consistenta in toate browserele; ei bine, acestea pot sa seteze familiile de fonturi folosite de elemente sau chiar si modul in care sunt redate formularele si elementele din formulare.
Exista un numar destul de mare de framework-uri CSS in acest moment (pe Wikipedia gasim o lista cu cele mai cunoscute framework-uri). Doua din framework-urile cele mai interesante din punctul meu de vedere, sunt YUI Base (impreuna cu Reset, Fonts si Grids) si Tripoli. Pentru site-ul interfete-web.ro, am folosit Tripoli.
Sa incepem cu o mica comparatie intre cele doua. In primul rand, o sa observati ca dimensiunea YUI Base (~2.5K) este mult mai mica decat cea a lui Tripoli (>6K). De unde aceasta diferenta atat de mare? In timp ce YUI reseteaza dimensiunile elementelor si seteaza fonturi pentru unele din elemente (si eventual, prin Grids, ofera posibilitatea crearii unui layout bazat pe grile), scopul declarat al lui Tripoli, este sa reseteze si sa reconstruiasca felul in care sunt redate toate elementele unei interfete. De aceea, creatorii sai nici nu-l numesc framework:
Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.
In plus, mie personal mi-a placut mai mult felul in care sunt redate elementele daca as include intr-un design doar Tripoli si niciun alt CSS, decat daca as include YUI CSS si nimic altceva. Mi s-a parut ca au facut o treaba grozava cu felul in care trateaza utilizabilitatea si design-ul formularelor (veti putea vedea un demo in momentul in care terminam pagina de contact).
Ca o demonstratie a ce poate sa faca Tripoli, iata cum ar arata site-ul nostru daca am folosi doar Tripoli:
si cum ar arata fara niciun CSS:
Link-uri utile:
- Take control of spacings in your stylesheets
- Debunking the myth of style defaults
- CSS Frameworks + CSS Reset: Design From Scratch
The Proiectarea unei interfete web: Framework-uri CSS by Interfeţe Web, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Share Alike 3.0 Romania License.
