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?

Bleiben Sie auf dem Laufenden:

Abonnieren Sie den RSS Feed oder lassen Sie sich per E-Mail regelmäßig über neue Beiträge informieren!

2 Antworten:

  1. ff-webdesigner — 21. Mai 2009 @ 15:05

    herzlichen dank, genau sowas habe ich gesucht. bei mir gestaltet gerade ein nettes web20 script eine eigentlich rein statische navigation mittels inline-styles dynamisch um. bisher konnte ich nicht auf angeklickten unterseiten durch das script per inline auf hidden geschaltete unterpunkte wieder sichtbar machen. so geht das.


  2. kalesco — 25. Juni 2009 @ 13:06

    Vielen Dank, genau das brauche ich gerade!


Eine Antwort hinterlassen