Mit ‘inline styles’ getaggte Artikel

10 Mai 2009

CSS Inline Styles überschreiben

Chris Coyier zeigt im CSS-Tricks Blog einen, wie ich finde manchmal recht nützlichen Trick.

Bekanntlich können mit Inline Styles, CSS-Anweisungen aus unseren CSS-Files überschrieben werden.
Nun, dies ist auch andersrum möglich – Inline Styles können im CSS-File überschrieben werden:

1
2
3
<div style="background: red;">
    Die Inline Styles für das div sollten es rot färben.
</div>

Dies kann im CSS folgendermaßen umgangen werden:

1
2
3
div[style] {
   background: yellow !important;
}

Nun, viele mögen sagen, durch das !important werden sowieso sämtliche anderen Anweisungen überschrieben, egal ob Inline oder im CSS-File. Richtig, aber durch das [style] wirkt es sich NUR auf Elemente mit Inline Styles aus. Alles andere bleibt völlig unberührt.

Einziger Haken bei dem Ganzen: es funktioniert nicht im IE6, dieser ignoriert den [style] Selektor komplett.

Nun, generell sollte man Inline Styles vermeiden, aber vieleicht findet sich doch die eine oder andere Anwendung zu dem kleinen Trick.

Meinungen? Anregungen? Ergänzungen?