Șmecherii de CSS + jQuery

Tabele ascultătoare:

Se poate întâmpla, și se întâmplă ca unele tabele să devină ”obraznice”! Adică iei un tabel de pe o pagină, îl muți pe altă pagină, și deși are aceleași stiluri și dimensiuni, nu le mai respectă și se dimensionează după bunul plac. Dacă ai o imagine în background, sau chenare în jurul celulelor tabelului, rezultatul este un tabel urât. Bine că asta poate fi rezolvată cu o singură linie de CSS:

Reguli de CSS3 cu măsură:

CSS3 devine din ce în ce mai popular. E foarte bine, numai că unii designeri le aplică fără să-și dea seama că au intrat pe teritoriul CSS3 și suportul din partea navigatoarelor este limitat sau chiar lipsește cu desăvârșire. Acum chiar dacă folosiți HTML5 Shiv sau Modernizr și poți aplica css3 în marea majoritate a browserelor s-ar putea să observi că unele stiluri sunt randate diferit. Un exemplu este text-shadow, astfel următorul stil va afișa textul diferit în webkit (Safari + Chrome), Firefox și Internet Explorer 9:

Problema nu ar trebui să fie că am 3 umbre, le-am pus pentru a obține un anumit efect. Și nu e. Problema e că specificațiile CSS3 nu sunt încă definitive, și fiecare grup de dezvoltatori le implementează independent. Asta nu e o surpriză, stați liniștiți, și cu CSS2 au făcut la fel, deși specificațiile erau oficiale – nu am uitat de buclucașul IE, și implementarea box-model în Opera. Dar cu toate astea siturile nu au încetat să fie mai atrăgătoare.
Dar să revin la problemă, cum am spus de regula de mai sus, în Chrome efectul se aplică aproape bine. În IE 9, umbrele abia se văd, dar textul e lizibil. Spre deosebire în Firefox ultima umbră se vede exagerat de mare și face textul aproape ilizibil, oricum prea încețoșat.
Deci am nevoie de un stil special care să se aplice pentru Firefox, pentru IE oricum aveam deja unul aplicat de comentarii condiționale .
Ca să rezolv problema am apelat la jQuery, mai exact la metoda jQuery.browser. Acestă metodă javascript e simplă dar îmi permite să aplic un set de reguli diferit în funcție de navigator. Deci am următorul cod:

Acesta mai adaugă o clasă în plus la elementul body, care indică navigatorul. După încărcarea paginii cu Firefox body-ul va arăta așa:

Și pot aplica un stil specific pentru Firefox, ca să fac textul lizibil și să păstrez efectul, astfel:

Folosind aceeași tehnică pot aplica stiluri specifice și pentru alte navigatoare. De asemenea codul poate fi extins să notifice și versiunea sau localizarea (limba) navigatorului.