Smecherii de CSS !

Lumea in care traim inclina din ce in ce mai mult inspre
superficialitate si individualism. Pe de-o parte, vedem stratul
superficial al lumii la MTV si in sutele de top 10-uri care s-au facut
pana acum. Pe de alta parte, avem placerea sa remarcam individualismul
fiecaruia dintre noi in faptul ca fiecare are propriul lui set de top
10-uri, radical diferit de toate celelalte. Nu este un lucru rau: toti
suntem diferiti si e normal sa avem preferinte diferite, nu-i asa?

Acestea fiind spuse, vreau si eu propriul meu top 10 si il vreau legat
de CSS. M-am gandit sa pun la un loc metodele CSS pe care le folosesc
cel mai des si sa le impartasesc cu voi aici. Desigur, fiecare va putea
avea propriul lui top 10 in sectiunea de comentarii.




1. Opacitate
Nu neaaparat primul trick pe lista, insa primul de care imi aduc
aminte. De-a lungul timpului, a rezolvat o multime de probleme legate
de rollovere.



.opaque {
opacity: .5; /* Firefox et al */
filter: alpha(opacity=50); /* IE */
}


Este vorba de opacitatea unui obiect. Prin aceste doua reguli poti face
un element de DOM cat de opac vrei tu. IE 5/Win nu recunoaste aceste
reguli, dar este deja prea vechi ca sa ne mai intereseze. De asemenea,
pe orice IE, respectivul element trebuie sa aiba specificat una din
proprietatile de dimensiune, fie width, fie height. Aceasta este o
consecinta nefolositoare a modului in care IE implementeaza filtrele.


Daca folositi rgb pentru a scrie culori in css, puteti scrie si asa: color: rgba(0,0,255,0.25), unde a vine de la alpha channel.


Ce se poate face? Vedeti http://www.partidulconservator.ro pentru niste rollovere. ALA are un articol prin care putem implementa acelasi efect, in anumite cazuri, prin PNG.



2. Formulare
Stilul meu de a face formuri este inspirat dintr-un articol de pe ALA si este singurul mod pe care il voi folosi de acum incolo. El implica liste:

• 
  Name:
  
  

Nu-i asa ca e frumos? Fiecare element al formularului are labelul sau,
iar duetul acesta este plasat intr-un container li. Labelurile vor avea
mereu urmatoarele reguli:


text-align:right;
float: left;
clear: left;


iar containerul ol/ul va fi setat pe display:block.


Metoda este exemplificata de mine pe itzone. Daca doriti ceva mai in-depth, mergeti la articolul ALA.


Mentionez ca toate meniurile le fac asemanator. De fapt, exista si un articol pe aceasta tema, tot pe itzone.


3. Colour contrast analyzer

Este o extensie pentru Firefox
care analizeaza contrastul unei pagini aplicand o formula fiecarui set
de culori font/background setate din css. Daca nu doriti sa instalati
extensia, puteti analiza contrastul manual, folosind formula.

Extensia va va spune rata de contrast a fiecarei perechi de culori din
pagina voastra, fiind foarte folositoare pentru a realiza un stylesheet
cu contrast ridicat pentru cei ce nu vad bine sau au monitoare proaste
si intunecate. Chiar daca nu credeti, diferenta de luminozitate dintre
monitorul vostru si cel al userilor siteului vostru poate fi foarte
mare, mai ales in cazul LCD versus CRT mai vechi. In plus, unora nu le
place ca ecranul lor sa fie prea luminos. Pe LCD-ul meu super-luminos
am contrastul si brightnessul la zero 80% din timp.

Un alt exemplu: multe siteuri de content prefera fundale inchise. Caz
in care contrastul nu mai este atat de intuitiv. Exista riscul ca
textele sa nu poata fi citite. Am incercat o tema de forum in care
utilizam verde pe negru, nu o alegere tocmai fericita, insa verdele era
culoarea ce trebuia folosita din motive de brand. Pe LCDul meu se vedea
extraordinar. Pe CRTul amicului meu nu se putea citi nimic, iar
Contrast Analizerul m-a convis repede.


O ultima observatie: extensia nu este compatibila cu Firefox 2.0. Din fericire, exista o varianta online. Ea se numeste GrayBit si este un analyzer vizual: va converti orice pagina in grayscale, pentru ca noi sa putem analiza contrastul.




4. em
Da, em. Em-ul este unitatea de baza pentru a masura pe ecran in mod
relativ. Un Em reprezinta latimea standard a literei M pe care
browserul o afiseaza (teoretic) cu fontul standard, la marimea
standard. Astfel, Em-ul depinde atat de browser/OS cat si de
rezolutie/spatiu de randare. Apropo de spatiul de randare, exista un studiu extrem de folositor
care elucideaza misterul maximei latimi pe care trebuie sa o aiba
siteul nostru pentru a fi vazut corect (a se citi fara scrollbarul
orizontal) de 95% din populatie.


Daca folosim em-ul peste tot putem obtine efecte deosebit de interesante, oferind userilor posibilitatea de a mari textul dupa plac. Din nou, exista un studiu care exemplifica diferentele dintre px si em. Uneori sunt chiar mari, si pentru cineva chiar conteaza.





5. Text
Daca tot suntem la text, css poate face minuni in domeniul numit
typography. Va puteti alege fontul dupa plac, insa aveti in vedere ca,
pe ecran, sans-serif se citeste mai bine decat serif. Stim ca pe foaie
este exact invers. Apoi va puteti alege culoarea si dimensiunea (in em
Razz ). Insa mai sunt si alte lucruri.


De obicei imi includ tot contentul de tip text in tag-uri de paragraf (p) si le stilez astfel:

font: 1.2em/1.8em helvetica sans-serif


Este un shorthand. Prima valoare numerica o reprezinta valoarea
font-size, iar a doua line-height. Daca prima va e cunoscuta cu
siguranta, a doua s-ar putea sa puna ceva probleme. Ea se refera la
spatiul dintre randuri, foarte folositor pentru a spori lizibilitatea.

Inca un lucru pe care il folosesc des cand vine vorba de text este
text-transform. Acest atribut poate lua valorile: none,
capitalize,uppercase sau lowercase. Este bine sa precizezi aceste
lucruri in css mai degraba decat in html, pentru ca poti schimba mult
mai repede stilul.






6. Layouturi

O colectie de layouturi de baza a devenit necesara o data ce tabelele au murit definitiv. Din fericire, am dat peste un mic site care face exact acest lucru. Prefer sa las exemplele lui Owen Briggs sa vorbeasca, decat sa ofer o lista de linkuri catre diferite modele de layouting.

Multumesc foarte mult!