Manchmal möchte man bestimmte Formatierungen vor älteren Internet Explorern verstecken. Im Beitrag zeige ich zwei Möglichkeiten, wie man Selektoren formuliert, dass sie vom IE8 ignoriert werden.
Eine Lösung besteht darin, den Selektor um Bestandteile zu ergänzen, die die älteren IEs (d.h. IE < 9) nicht verstehen – etwa durch :root.
:root input[type=checkbox] {
/* original check box are push outside the viexport */
position: absolute;
left: -1000em;
}
Dieser Code stammt aus einem Beispiel zur Erstellung angepasster Checkboxen (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms).
Vor dem Selektor, der vom IE8 ignoriert werden soll, wird :root ergänzt.
:root zur Auswahl des Wurzelelements
:root ist eine in CSS3 eingeführte Pseudoklasse, die das Wurzelelement des Dokuments auswählt. Mit :root input[type=checkbox] wählt man alle Checkboxen aus, die Nachfahren des Wurzelelements sind. Da ja alle Elemente Nachfahren des Wurzelelements sind, ist das keine Einschränkung – ausgewählt werden alle Checkboxen. Da jedoch der IE8 :root nicht versteht, kann er diesen Ausdruck nicht interpretieren.
Das heißt, bei allen Angaben, die nicht vom IE8 gelesen werden sollen, ergänzt man :root vor dem Selektor.
Problem Spezifität
Etwas unpraktisch an dieser Lösung ist, dass für Browser, die :root interpretieren, es einen Unterschied zwischen den beiden Selektoren gibt:
input[type=checkbox]
und
:root input[type=checkbox]
Das Letztere hat eine höhere Spezifität. Und das kann eine Rolle spielen, wenn man im Weiteren einen solchen Ausdruck überschreiben möchte.
Besser: Selektorgruppe
Die zweite Lösung, bei der wir die Spezifität nicht ändern, besteht darin, mit einer Selektorgruppe zu arbeiten, eine Selektorgruppe ist eine durch Komma getrennte Liste von Selektoren. Denn in CSS gilt: Wenn ein Selektor einer Selektorgruppe formal ungültig ist, wird der ganze Ausdruck ignoriert. In der W3C-Spezifikation heißt es: „If just one of these selectors were invalid, the entire group of selectors would be invalid.“ (http://www.w3.org/TR/css3-selectors/)
Das heißt, wir müssen nur am Anfang einen Selektor ergänzen, der für moderne Browser formal korrekt ist, aber kein Element auswählt, und der für ältere IEs formal nicht korrekt ist. Da wäre beispielsweise
* :root
Das wählt das Wurzelelement aus, das innerhalb eines beliebigen Elements steht, d.h. konkret kein Element. Aber der Trick: der Selektor ist formal korrekt, d.h. die danach hinter einem Komma angeführten weiteren Selektoren werden normal interpretiert – von modernen Browsern, aber nicht vom IE8.
Wenn ich ein Element mit der Klasse zwei nur in modernen Browsern formatieren möchte, muss ich also schreiben:
* :root, .zwei { }
Vom IE8 ignorierte Selektorenausdrücke
Sehen wir uns das konkret an einem kleinen Beispiel mit zwei Elementen an:
<div class="eins"></div>
<div class="zwei"></div>
Gehen wir davon aus, dass beide Elemente Hintergrundfarben erhalten sollen, aber nur in modernen Browsern und nicht im IE8. Einmal verwenden wir den Kombinator, der eben eine höhere Spezifität hat:
:root .eins {
background: green;
}
Und jetzt nehmen wir den Selektor-Gruppierungstrick:
* :root, .zwei {
background: blue;
}
In beiden Fällen klappt es: Moderne Browser weisen die Hintergrundfarbe zu, der IE8 nicht.
Der Vorteil in der zweiten Methode liegt aber darin, dass ich den eigentlichen Selektor nicht verändert habe.
Selektor-Gruppierungstrick bei jsFiddle ausprobieren
Das war nur ein Beispiel, Angaben zu verstecken. Es gibt – je nach den Erfordernissen der Situation – natürlich passendere/elegantere Methoden: So kann man Modernizr zur Feature-Detection verwenden oder man kann mit konditionalen Kommentaren um das HTML-Element arbeiten, die einem passende Klassen für die IEs zuweisen. Aber manchmal braucht man eben auch die schnelle Möglichkeit, das rein über Selektoren zu erledigen … und dann kann das Gezeigte praktisch sein.