Browserunterstützung
- CSS3 - Selektoren
- Formatierungen für Formulare
- Browserunterstützung
Browserunterstützung Mit der Browserunterstützung der neuen CSS3-Selektoren sieht es an sich gut aus: Alle aktuellen Browser unterstützen die hier vorgestellten Selektoren schon heute. Und Sie müssen auch keinen browserspezifischen Sondercode mit speziellen Präfixen schreiben, wie das bei vie...
Browserunterstützung
Mit der Browserunterstützung der neuen CSS3-Selektoren sieht es an sich gut aus: Alle aktuellen Browser unterstützen die hier vorgestellten Selektoren schon heute. Und Sie müssen auch keinen browserspezifischen Sondercode mit speziellen Präfixen schreiben, wie das bei vielen neuen CSS3-Eigenschaften der Fall ist. Natürlich gibt es kleinere Unterschiede; so werden beispielsweise im Firefox die neuen CSS3-Pseudoklassen für Formulare nicht in Kombination mit erzeugten Inhalten unterstützt.Die neue Version des Internet Explorer in Version 9 ist in puncto CSS3-Selektoren ebenfalls ein Musterschüler und besteht alle Tests wunderbar. Ansonsten werden die Attributselektoren aus CSS3 bereits vom Internet Explorer 7 unterstützt - bei den anderen neuen Selektoren müssen Sie im Bedarfsfall für die älteren IEs nachbessern.
Abwärtskompatible Zebratabelle dank jQuery
Bei manchen Punkten kann man natürlich recht gut auf ein Nachbessern verzichten. Beispielsweise ist es aus unserer Sicht voll akzeptabel, wenn die bei :target definierte Hervorhebung nicht in älteren Internet Explorern funktioniert: So kommen bei der Wikipedia nur Benutzer von alternativen Browsern in den Genuss der Hervorhebung der angesprungenen Fußnoten.
Nützliche Links
CSS3-Selector-Modul www.w3.org/TR/css3-selectors
CSS-Selektoren zur Auswahl von Elementen in jQuery api.jquery.com/category/selectors/
de.wikipedia.org/wiki/Hilfe:SonderzeichenreferenzAndere Dinge können hingegen zu wichtig sein, als dass man darauf verzichten möchte. Hier kann man schließlich über JavaScript nachhelfen. Sehr komfortabel geht das beispielsweise über die JavaScript- Bibliothek jQuery. jQuery setzt zum Auswählen von Elementen auf die CSS-Selektoren und unterstützt damit auch alle gängigen CSS3-Selektoren.Prinzipiell haben Sie beim Einsatz von jQuery zwei Möglichkeiten: Zum einen können Sie die Formatierungen direkt innerhalb des JavaScript-Codes zuweisen. Die zweite Möglichkeit besteht darin, mit JavaScript nur die Klasse zuzuweisen und die Klasse dann im Stylesheet mit den gewünschten Formatierungen auszustatten.Die zweite Möglichkeit ist sauberer: Falls Sie die Formatierungen ändern wollen, müssen Sie nicht den JavaScript-Code ändern, sondern nur die CSS-Definitionen.Nehmen wir als Beispiel einmal eine HTML-Tabelle, bei der Sie einerseits jede zweite Zeile anders einfärben und außerdem leere Zellen besonders markieren wollen.Der Ausschnitt aus dem HTML-Code zeigt wenig Überraschendes:
<table cellspacing="0"><thead><tr><th>Uebersicht</th><th>Spalte 1</th><th>Spalte 2</th></tr></thead><tbody><tr><th>Zeile 1</th><td>Erste Zelle</td><td>Zweite Zelle</td></tr><tr><th>Zeile 2</th><td>Dritte
Zelle</td><td></td></tr><!-- Weitere Zeilen ausgelassen --></tbody></table>Damit auch der Internet Explorer die gleich folgenden Formatierungen wie gewünscht darstellt, müssen Sie jQuery einbinden:
<script src="https://code.jquery.com/
jquery-latest.min.js" type="text/
javascript"></script>Falls Sie jQuery auf der Webseite sonst nicht benötigen, sollten Sie die Einbindung in konditionale Kommentare schreiben. Auf jeden Fall in konditionale Kommentare gehört der folgende Code, den Sie am besten vor das schließende </body> einfügen:
<!--[if lt IE 9]><script type="text/javascript">
$('tr:nth-child(2n)').addClass
('gerade');
$('td:empty').addClass('leer');</script><![endif]-->Die Zeile $('tr:nth-child(2n)').addClass ('gerade'); wählt das gerade tr-Element aus und weist ihm die Klasse gerade zu. Demselben Prinzip folgt die zweite Zeile. $('td:empty').addClass('leer'); wählt alle Zellen aus und ergänzt die Klasse leer.
Die richtige Position
Wichtig ist beim vorherigen Beispiel, dass dieser Code am Ende des Dokuments steht. Das erhöht einerseits die Performance der Webseite, andererseits wird sichergestellt, dass der Code erst ausgeführt wird, nachdem die Webseite geladen ist und damit auch der HTML-Code geladen ist. Wenn Sie diesen JavaScript-Teil hingegen im Kopf des Dokuments unterbringen wollen, schreiben Sie den JavaScript-Code innerhalb von $(function(){ und }); Damit ist alles bereit für die Formatierungen über Nichts zu meckern: IE9 besteht alle CSS3-Selektortests mustergültig. CSS: In unserem Beispiel müssen Sie zum einen die CSS3-Selektoren und zum anderen die Klassen einsetzen.
tr:nth-child(2n) {
background-color: #E6DFCF;
color: #647D8F;
}
tr.gerade {
background-color: #E6DFCF;
color: #647D8F;
}
td:empty {
background-color: #CFDCE6;
}
td.leer {
background-color: #CFDCE6;
}Aber Achtung, diese Deklarationen lassen sich nicht zusammenfassen: Das heißt, Sie können nicht die Selektoren durch Komma getrennt hintereinanderschreiben.
tr:nth-child(2n), tr.gerade {
/* funktioniert nicht!
wird nicht vom IE gelesen! */
}Woran das liegt? Der Internet Explorer sieht :nth-child(2n) als ungültigen Selektor an, damit wird für ihn der vollständige Selektorausdruck ungültig und er interpretiert ihn nicht.Neben der Möglichkeit, mit jQuery nachzubessern, können Sie übrigens auch eine Bibliothek einsetzen, die auf die CSS3- Selektoren spezialisiert ist wie die, die Sie auf selectivizr.com finden.
Verwendung
Im Artikel haben Sie die wichtigsten CSS3- Selektoren gesehen, für die es schöne Anwendungsbeispiele gibt - daneben gibt es aber weitere Selektoren wie :root zur Auswahl des Wurzelements oder :not(), um einen Selektorausdruck umzukehren. Unklar ist allerdings, welchen Nutzen :root hat, da bei (X)HTML das Wurzelelement ja immer bekannt ist und einfach über html angesprochen werden kann. Sicher aber werden sich auch viele neue zusätzliche Verwendungen finden, wenn diese neuen Selektoren noch breiter angewendet werden.
