CSS3
Das sind die neuen CSS3 - Selektoren
CSS3 erweitert die Möglichkeiten, HTML-Elemente durch CSS anzusprechen. Wir zeigen, was sich mit den überarbeiteten CSS3-Selektoren ändert.
Ende 2011 hat das normgebende World Wide Web Consortium (W3C) die neue Version der CSS3-Selektoren-Spezifikation veröffentlicht. Das traditionell als Empfehlung bezeichnete Dokument steht damit kurz vor seiner Fertigstellung und wird nur noch kleine Änderungen erfahren.Schon heute unterstützen die aktuellen Versionen aller bedeutenden Browser weite Teile der neuen W3C-Empfehlung. Deshalb können Sie die CSS3-Selektoren sofort in der Praxis verwenden. Wie Sie dabei am besten vorgehen, darum geht es in diesem Beitrag.In der Tabelle sehen Sie alle CSS3-Selektoren im Überblick. Diese stellen wir Ihnen zunächst im Einzelnen vor.1.: Nachbarn selektieren
Schon seit CSS 2.1 selektiert man ein unmittelbar auf ein anderes folgendes HTML-Element, indem man beide mit einem Pluszeichen verknüpft: p + ul selektiert also eine ungeordnete Liste, die unmittelbar auf einen Absatz folgt.Mit CSS3 führt das World Wide Web Consortium die Tilde als neuen Selektor ein: p ~ ul selektiert eine ungeordnete Liste, die irgendwann auf einen Absatz folgt. Es muss lediglich gewährleistet sein, dass beide Elemente das Elternelement teilen.2. bis 5.: ZeichenkettenMit den Selektoren E[foo^="bar"], E[foo$="bar"] und E[foo*="bar"] weisen Sie den Browser an, das Attribut foo nach der Zeichenkette bar zu durchsuchen. Je nachdem, welches Steuerzeichen Sie hinter das foo schreiben, muss bar entweder am Anfang (^), am Ende ($) oder irgendwo (*) im Wert des Attributs stehen, damit der Selektor greift. Einen Sonderfall bildet E[foo|="bar"], das zum Beispiel mit
p[class|="second-"]
die Tags
<p class="second-paragraph">
und
<ul class="second-list">
selektiert. Ein Beispiel für die Anwendung dieser Selektoren ist das CSS-Framework InuitCSS von csswizardry.com. Im Kern besteht es aus einem flexiblen Grid-System, das den Aufbau mehrspaltiger Layouts erleichtert.Vergleichbar mit 960.gs und Blueprint führt das zu insgesamt zwölf Klassen (.grid-1, .grid-2 etc.), über die sich jede Reihe in unterschiedlich viele Spalten unterteilen lässt. Eigenschaften, die für alle Grid-Klassen gelten, weist InuitCSS diesen mit [class^="grid-"] zu, spart sich so die Aufzählung aller zwölf Klassen und damit einiges an Code.Sie können diese Selektoren aber auch verwenden, um ausgehende Links besonders zu kennzeichnen. Dazu geben Sie zunächst allen Links eine entsprechende Kennzeichnung und formatieren anschließend die internen Links um:
a { /* Formatierung fuer externe Links */ } a[href*="www.meinewebsite.de"] { /* Formatierung fuer interne Links */ }
Sie können auch Icons in Abhängigkeit vom verlinkten Dateityp per CSS organisieren, ohne ein Byte zusätzliches HTML:
a[href$="pdf"] { background-image: url("../i/pdf.gif"); }
6. bis 11.: CSS lernt rechnenDass CSS bislang eine Möglichkeit zum Abzählen von Elementen gefehlt hat, weiß jeder, der schon einmal versucht hat, nur mit CSS die Zeilen einer Tabelle abwechselnd in der einen und der anderen Farbe zu unterlegen.Dazu musste man die Zeilen entweder manuell oder mit Hilfe von Javascript mittels zweier Klassen markieren, wobei jede Methode ihre eigenen Nachteile hat. Künftig sprechen Sie die zweite, vierte, sechste - also die geraden - Zeilen so an:
tbody tr:nth-child(even)
Die ungeraden Zeilen beziehungsweise jedes erste, dritte, fünfte usw. Element erwischen Sie mit
tbody tr:nth-child(odd)
Bei den Stichworten even (gerade) und odd (ungerade) handelt es sich um Abkürzungen. Wer es mathematisch korrekt bevorzugt, der schreibt stattdessen:
tbody tr:nth-child(2n)
beziehungsweise
tbody tr:nth-child(2n+1)
In der Wahl des Multiplikators, den Sie vor das n setzen, sind Sie dabei frei. Sie können auch mit
tbody tr:nth-child(4n+4)
jedes vierte Element anpeilen. Schreiben Sie nur eine Zahl in die Klammer, zum Beispiel
tbody tr:nth-child(1)
dann wird nur das entsprechende Element, in diesem Fall die erste Zeile, vom Selektor erfasst. Noch etwas verfeinern können Sie die Auswahl mit dem Zusatz of-type:
p:nth-of-type(5)
oder
p:nth-of-type(5n+5)
Dadurch greift der Selektor nur noch beim n-ten Element einer bestimmten Art, also zum Beispiel beim fünften Absatz (5) oder bei jedem fünften Absatz (5n+5) - und zwar unabhängig davon, um das wievielte Kindelement es sich bei dem bzw. den Absätzen handelt.12. bis 15. EinzelgängerNicht unerwähnt bleiben dürfen die Selektoren E:only-child, E:only-of-type, E:last-child und E:empty. Gerade :lastchild ist eine willkommene Ergänzung des bereits mit CSS 2.1 eingeführten :first-child. Es erleichtert zum Beispiel die Gestaltung von Menüs, bei denen regelmäßig das erste oder das letzte Kindelement eine abweichende Formatierung benötigen.Sehr nett ist außerdem :empty, mit dem Sie leere HTML-Elemente selektieren können. Zum Beispiel ist es manchmal leichter, ein leeres Element mit einem
div:empty { display: none; visibility: hidden; }
zu verstecken, als einem Content-Management-System beizubringen, das leere div gar nicht erst auszugeben.16.: Ziel erreicht
Dass man über Links auch innerhalb desselben Dokuments springen kann, ist ein alter Hut. Neu ist, dass Sie dem Sprungziel mit CSS3 eine eigene Formatierung zukommen lassen können, sobald der Nutzer den Link anklickt.Ein Praxisbeispiel gibt Wikipedia, wo nach Anklicken einer Fußnote der entsprechende Link durch einen hellblauen Hintergrund hervorgehoben wird. Das ist nicht nur deshalb ein gutes Beispiel, weil hier der neue Selektor :target zum Einsatz kommt, sondern auch weil es zeigt, wie man Nutzern eines modernen Browsers einen Zusatznutzen bieten kann, ohne dass Besucher mit alten Browsern allzuviel verloren geht. Technisch ist :target simpel. Sie selektieren mit
li:target
das Sprungziel und geben ihm dann, wie gewohnt, eine Formatierung, die aber eben erst dann aktiv wird, wenn der Nutzer den Link anklickt.17.: Was anderesBeim neuen Selektor E:not(s) ersetzen Sie das s durch einen beliebigen, einfachen Selektor im Sinne der "Simple Selectors" aus der W3C-Spezifikation. Der gesamte Selektor erwischt dann alle Elemente, für die s nicht gilt. Weil das ziemlich abstrakt ist, hier ein Beispiel:
p:not(.second-paragraph)
selektiert alle Absätze außer dem zweiten. Alternativ können Sie auch schreiben:
p:not(:nth-of-type(2))
Beachten Sie, dass Sie alle einfachen Selektoren, aber keine Pseudo-Klassen als s verwenden können.18. bis 20.: FormulareDrei der neuen Selektoren sind insbesondere für die Gestaltung von Formularen interessant. Sie können mit :enabled und :disabled gezielt solche Formularelemente formatieren, die aktiv bzw. inaktiv sind.Außerdem gibt es mit :checked eine vergleichbare Möglichkeit zur Selektion von Checkboxen und Radio-Buttons, die der Nutzer markiert hat.
Workarounds
Wie Sie in der Tabelle sehen können, werden die neuen Selektoren von allen aktuellen Browsern unterstützt. Wieviel Aufmerksamkeit Sie Internet Explorer 6, 7 und 8 schenken, sollten Sie von Fall zu Fall entscheiden.Unser Tipp: Werfen Sie einen Blick in Ihre Zugriffsstatistik, um ein Gefühl dafür zu bekommen, wie wichtig die alten Browser für die Nutzer Ihrer Website konkret sind. Sie haben drei Möglichkeiten, um Browsern, die die neuen Selektoren nicht verstehen, zu helfen:1. Sie fügen Ihrem HTML von Hand Klassen hinzu, über die Sie die betroffenen Elemente selektieren. Geben Sie den Klassen eindeutige Prefixe wie in .oldie-first und .oldie-last. Im CSS verwenden Sie diese Klassen zusätzlich zu den neuen Selektoren. So können Sie beides leicht entfernen, wenn es auf Ihrer Website keine Nutzer alter Browser mehr gibt.2. Sie fügen Ihrem HTML die Klassen mit individuellem Javascript hinzu. So bleibt Ihr HTML sauber und neue Browser werden nicht durch die Abhilfe für die Erblasten behelligt. Binden Sie eine Javascript-Bibliothek wie jQuery ein, die Ihnen das Selektieren von HTML-Elementen erleichtert. Wie Sie mit jQuery HTML selektieren, erfahren Sie unter bit.ly/2ftFSk . Speichern Sie die Funktionen, die die zusätzlichen Klassen ins HTML schreiben, in der Javascript-Datei oldIE.js. Binden Sie diese unmittelbar vor dem schließenden body-Tag nach folgendem Muster ein:
<!-[if lt IE 9 ]><script src="oldIE. js"></script><link rel="stylesheet" href="oldIE. css"><noscript><link rel="stylesheet" href="oldIE-nojs.css"></noscript><![endif]->
Durch den Conditional Comment (if lt IE 9) ist sichergestellt, dass der Code nur in alten Internet Explorer vor Version 9 ausgewertet wird.In der Datei oldIE.css landet das CSS für alte Internet Explorern mit aktiviertem Javascript. Die Datei oldie-nojs.css wird nur von Internet Explorern mit deaktiviertem Javascript ausgeführt.3. Verwenden Sie die Javascript-Bibliothek von selectivizr.com . Sie rüstet viele, wenngleich nicht alle neuen Selektoren in Internet Explorer 6 bis 8 nach.
Es gibt noch eine weitere Lösungsmöglichkeit, die wir für elegant halten, bei der es sich aber um keinen echten Ersatz für die CSS3-Selektoren handelt.Nutzen Sie Conditional Comments, um dem body-Tag in alten Internet Explorern die Klasse oldie zuzuweisen. Dann können Sie im CSS bequem Ersatzlösungen für die Anzeige in alten Internet Explorern definieren. Ersetzen Sie das öffnende body-Tag durch
<!-[if lt IE 9 ]><body class= "oldie"><![endif]-><!-[if (gt IE 8)|!(IE)]><!-><body><!-<![endif]->
Fazit
Mit den neuen Selektoren von CSS3 verfügen Webdesigner über eine ganze Reihe neuer Möglichkeiten, die CSS-Code reduzieren und Javascript teilweise überflüssig machen.Solange alte Browser noch unterstützt werden müssen, bedeutet die Verwendung der CSS3-Selektoren aber gegebenenfalls einen gewissen Zusatzaufwand.
Neue Selektoren von CSS3
Die folgende Tabelle enthält eine Übersicht der neuen Selektoren von CSS3. Ausgelassen haben wir E:root, da dies bei HTML immer das Element html selektiert. Das Original dieser Tabelle, das auch die Browserkompatibilität zu den Selektoren von CSS1 und CSS2/2.1 zeigt, finden Sie unter kimblim.dk.
