!important;

Pentru cei care nu stiu inca, exista un mic “hack” CSS care, folosit corect, nu numai ca trece de validarile clasice, dar e si foarte util. E vorba de !important;.

Cum se foloseste: in loc de width: 300px; se poate scrie width: 300px !important;. De ce si la ce foloseste? Vedem mai jos…

Functia de baza a lui !important; este de a prioritiza/ierarhiza proprietatile CSS atasate unei pagini (fie ca sunt inline sau raspandite in fisiere css externe). Din perspectiva asta, el poate fi folosit in 2 scopuri principale:

1. Primul scop, mai cunoscut si raspandit, este de a diferentia anumite proprietati in FF fatza de IE. In cazul asta, hackul se bazeaza pe faptul ca, acolo unde gaseste aceeasi proprietate de 2 ori, IE tinde sa prefere/sa ia un calcul proprietatea care nu are !important; atasat la sfarsitul ei.

Exemplu:
Sa spunem ca vrem ca un element sa aiba in IE width: 100px; iar in FF 120px; Cum facem? Simplu: scriem aceeasi proprietate de 2 ori: width: 120px !important; width: 100px;. FF va intelege din asta 120px, iar IE va intelege 100px. Simplu, la obiect si foarte util in multe cazuri.

2. Al doilea, mai putin cunoscut dar la fel de important, este de a prioritiza o proprietate pe scara ierarhica. Ce inseamna asta?

A. Stim (sau aflam) ca in CSS se pot defini Clase sau Tag-uri. Clasele sunt cazuri particulare si se prefixeaza cu un punct, iar tag-urile sunt practic redefiniri globale ale modului de afisare a tagurilor HTML. body {} redefineste un TAG, iar .body {} este o CLASA.

Ce retinem de aici e ca proprietatile unul TAG sunt superioare ierarhic proprietatilor unei clase. Daca de pilda definesc p {color: #cccccc;} si apoi in cadrul unui P vreau sa folosesc clasa .green {color: #009900;}, .green va apare gri in loc de verde, pentru ca un tag e mai general/global decat o clasa, adica P este mai general/global decat .green.

B. Mai stim (sau aflam) ca in CSS putem defini clase complexe. De pilda, .green {} e una, .green .title {} inseamna “toate title-urile care se gasesc intr-un green“. Asta ne poate ajuta sa ierarhizam, sa detaliem si sa prioritizam foarte bine si ordonat o multitudine de clase si de cazuri particulare.

Ca sa revenim la oile noastre: concluzia din paragrafele A si B e ca in CSS ierarhia exista si e importanta.
Dar ce faci cand vrei sa faci override la ierarhie? Bagi un !important;.

Problema de mai devreme, cea cu p si .green, se rezolva asa: .green {color: #009900 !important;}. In felul asta, daca folosim un .green intr-un p, proprietatea color din .green va deveni mai importanta ierarhic si se va afisa ca atare.