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?




RSS Feed
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.
kalesco — 25. Juni 2009 @ 13:06
Vielen Dank, genau das brauche ich gerade!