Das Problem: Ein CMS kann einem das Leben erleichtern. Will man jedoch sein eigenes Design muss man sich oft mit generiertem Code herumplagen. So auch schonmal mit Styles…
Die Lösung: !important…
In der Kaskadierung unterscheidet man spätestens seit CSS2 zwischen dem Benutzer-Stylesheet (persönliche Browsereinstellung des Users), Autoren-Stylesheet (das Stylesheet der besuchten Seite) und dem Browser-Stylesheet (die Default-Einstellung des Browsers). Der Benutzer, bzw. seine persönlichen Einstellungen, sollen vom Autor unangetastet bleiben. Deswegen sind seine Styles mit !important deklariert.
Die Hierarchie sieht folgendermaßen aus:
1. Benutzer-Stylesheet !important
2. Autoren-Stylesheet !important
3. Autoren-Stylesheet
4. Benutzer-Stylesheet
5. Browser-Stylesheet
Das sind die Basics.
Will man die Styles von importierten oder generierten Seiten manipulieren steht nun nach obiger Erklärung ein Autoren-Stylesheet gegen ein Autoren-Stylesheet. Das bedeutet, dass wir die Gewichtung mittels !important zu unseren Gunsten verschieben können. Das besondere dabei ist, dass das Prinzip auch bei Inline-Styles – d.h. Styles, die in der HTML-Datei mittels “style” deklariert wurden – greift.
Das Attribut !important wird folgendermaßen an den Style gehangen:
.beispiel {
color: #000 !important;
}
Fazit:
Viele Formatierungen, für die man einen Quellcode in z.B. PHP oder JavaScript nicht anpacken will (kann), können bequem über das externe Stylesheet aufgehoben der angepasst werden. !important sollte aber trotzdem nur eingesetzt werden, wenn es unbedingt notwendig ist…
