Zacznijmy od pewnego przykładu. Załóżmy, że dostajemy od kogoś do wstawienia na naszą stronę kod js, który generuje odpowiednie elementy i ostylowuje je inline (tzn. wewnątrz atrybutu style w kodzie html). Zwykłe style w arkuszu CSS się przez to nie przebiją. Za to style oznaczone dyrektywą !important już tak :) I to cały sekret ładnie sformatowanych widgetów AdTaily, Twitter itp. :)

Jak korzystać z dyrektywy !important?

Załózmy, że chcemy, aby wybrana przez nas czcionka "przebijała się" bez względu na wszystko do tagów <p> w bloku div o id="main". Normalnie stworzylibyśmy taki styl:

div#main p {
    font: bold 13px tahoma, verdana, sans;
}

Wystarczy, że nasz akapit będzie wyglądał tak:

<p style="font: italic 12px serif;">treść</p>

a nasz styl za nic nie zmieni czcionki np. na pogrubioną tahomę o rozmiarze 13px. Dostaniemy czcionkę szeryfową domyślną dla przeglądarki w rozmiarze 12px i to jeszcze z kursywą.

Możemy jednak przechytrzyć twórcę kodu html i dodać do naszego kodu dyrektywę !important, a w prargrafie tekstu zostanie użyty nasz styl :) Będzie to wyglądało tak:

div#main p {
    font: bold 13px tahoma, verdana, sans !important;
}

Jak widzimy na powyższym przykładzie, !important, dodajemy na samym końcu linii właściwości danej cechy. Robimy to jednak przed znakiem średnika!

Praktyczne zastosowanie

W ten sposób możemy stworzyć np. bardzo ładny widget AdTaily. Przykład będzie można zobaczyć w ciągu kilku dni na guitarway.pl :) Ja na swojej stronie w ten sposób oczyściłem ze zbędnych elementów widget mojego profilu w serwisie Twitter.

Zachęcam do samodzielnego eksperymentowania i chwalenia się efektami :)

Kacper Kołodziej

http://kacperkolodziej.com/