Am vorbit in ultimele articole (link, link, link) despre faptul ca un element important pentru orice interfata web este consistenta acesteia in toate browserele (de fapt, toate browserele importante).
Exista insa cateva elemente de interfata, care in unele browsere pot fi obtinute cu usurinta, folosind doar css, pe cand pentru a obtine consistenta in toate browserele, trebuie sa apelam la tehnici de codare, care in final duc la mult cod in plus, si de cele mai multe ori efortul necesar pentru a obtine aceasta consistenta, nu merita. La sfarsitul acestui articol este un link catre un articol unde sunt prezentate cinci elemente care pot fi obtinute doar din CSS, dar nu in toate browserele, concluzia autorului fiind ca pana la urma diferenta intre browserele care suporta tehnicile respective si cele care nu le suporta, este prea mica pentru a nu folosi tehnicile respective.
Sa luam cazul colturilor rotunjite. Exista in acest moment doar doua motoare de redare (Gecko si WebKit), care suporta atributul CSS (atribut care va deveni standard in CSS 3, dar nu este inca, intrucat nu s-a stabilit inca sintaxa sa exacta) border-radius (prin -moz-border-radius si -webkit-border-radius) pentru a obtine colturi rotunjite de o anumita raza. Sintaxa este simpla:
(-moz-|-webkit-)border-radius: <numar>[unitate de masura]
De exemplu:
#element {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* pentru CSS3 */
}
va avea ca efect rotunjirea colturilor elementului cu id-ul element, cu o raza de 10px, in browserele bazate pe Gecko WebKit (in restul browserelor, elementul va avea colturi patrate).
Am putea apela la cateva trucuri pentru a obtine colturi rotunjite, dar efortul depus nu merita (probabil ca daca un utilizator foloseste un anume browser, nu il schimba de la o zi la alta; daca totusi il va schimba, diferenta este abia sesizabila). Printre acestea se numara cateva tehnici cu JavaScript (dar atunci, utilizatorii cu JavaScript dezactivat din nou nu vor avea colturi rotunjite), de exemplu injectarea unor div-uri care au marginile din ce in ce mai mici, la inceputul si la sfarsitul elementului, sau prin CSS. Daca alegem sa folosim CSS, putem sa folosim tehnica pe care o folosea si metoda JavaScript, sau putem folosi imagini, caz in care nu vom reusi niciodata sa obtinem colturile rotunjite generice – sa functioneze pentru orice culoare a border-ului si a elementului.
Deci, vedeti, efortul depus (de noi, sau de persoana care a scris codul JavaScript/CSS pe care il folosim) este destul de mare, pentru a obtine un efect relativ simplu.
Un dezavantaj al folosirii atributului border-radius, este ca nu va reusi validarea codului CSS – border-radius nu este un atribut valid in CSS 2, iar CSS 3 nu a fost nici macar finalizat.
Aveti mai jos, ca exemplu, pagina Wikipedia Romania (eu am observat destul de recent ca foloseau colturi rotunjite).
Inspirat de articolul Five CSS design browser differences I can live with
The Proiectarea unei interfete web: Colturi rotunjite by Interfeţe Web, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
