Features von übermorgen: CSS3 Selectors API Level 4
Während die CSS3 Selectors Level 3 schon seit geraumer Zeit eine W3C Recommendation ist, arbeitet man beim W3C derzeit noch an Level 4 der Selectors API. Der aktuelle Editor's Draft listet einige interessante neue Features, die Webentwicklern die Arbeit mit CSS erleichtern sollen.
- Philip Ackermann
Während die CSS3 Selectors Level 3 schon seit geraumer Zeit eine W3C Recommendation ist, arbeitet man beim W3C derzeit noch an Level 4 der Selectors API. Der aktuelle Editor's Draft listet einige interessante neue Features, die Webentwicklern die Arbeit mit CSS erleichtern sollen. Dieser Beitrag stellt einige davon vor.
Vorweg sei angemerkt, dass sich einige der nachfolgend beschriebenen Features noch grundlegend ändern oder komplett verworfen werden können, da es sich bei dem zugrunde liegenden Dokument wie erwähnt um einen Editor's Draft, sprich um "Work in Progress", handelt.
Komplexere Selektoren
Das wohl interessanteste neue Feature dürfte die Pseudoklasse :has sein, die sich am einfachsten an einem Beispiel erklären und nachvollziehen lässt: Angenommen, man möchte innerhalb eines HTML-Formulars bei fehlerhaften Eingaben nicht nur die entsprechenden Eingabefelder farblich hervorheben, sondern das gesamte Formular in irgendeiner Form kenntlich machen.
Mit bisherigen Selektoren ist das nicht möglich, da sich für zu selektierende Elemente nicht definieren lässt, wie der Teilbaum des DOMs unterhalb des Elements auszusehen hat. Mit anderen Worten und auf das Beispiel bezogen: Man kann keinen Selektor formulieren, der "alle Formularelemente mit fehlerhaften Eingabefeldern" selektiert. Lediglich letztere lassen sich selektieren:
form input:invalid {
border-color: red;
}
Mit Hilfe der neuen Pseudoklasse :has lässt sich diese Problemstellung jedoch lösen. Als Parameter erwartet :has einen oder mehrere Selektoren, über die der Teilbaum des DOMs beschrieben wird, der sich unterhalb des zu selektierenden Elements befinden muss. Um also alle Formularelemente zu selektieren, die ein Eingabefeld mit fehlerhaften Eingaben enthalten, reicht Folgendes:
form:has(input:invalid) {
border-color: red;
}
Einen kleinen Wermutstropfen gibt es derzeit noch: Bezüglich der Performance ist die :has-Pseudoklasse nämlich die einzige, die nicht in die Kategorie "fast" fällt. Dazu der entsprechende Kommentar aus dem Editor's Draft: "If some things currently not in the fast profile can reasonably be done in CSS Selectors, we should move them." Es bleibt also abzuwarten, ob die verschiedenen Browser dieses für den Entwickleralltag äußerst interessante Feature mit einer angemessenen Performance implementieren können und die Pseudoklasse in die finale Spezifikation übernommen wird. Wünschenswert wäre es.
Übersichtlichere Selektoren
Eine weitere Problemstellung, die man als Webentwickler kennt, adressiert die Pseudoklasse :matches. Häufig hat man ja den Fall, dass ein Deklarationsblock auf mehrere, in Teilen zwar unterschiedliche, aber prinzipiell ähnlich aufgebaute Selektoren zutreffen soll. Das entsprechende CSS ist in solchen Fällen oft unnötig aufgebläht:
#home h1,
#services h1,
#portfolio h1,
#contact h1, {
background-color: #CFCFCF;
}
Hier kommt :matches ins Spiel, denn darüber ist es möglich, ähnlich wie über die browserspezifischen Pseudoklassen :moz-any und :webkit-any verschiedene (Teil-)Selektoren zusammenzufassen, was einem als Entwickler nicht nur Tipparbeit abnimmt, sondern auch die Lesbarkeit erhöht:
:matches(#home, #services, #portfolio, #contact) h1 {
background-color: #CFCFCF;
}
Weitere neue Features
- Die bereits in der Selector API in Level 3 eingeführte Pseudoklasse :not für die Negation eines Selektors wird um die Möglichkeit erweitert, nicht nur einen Negationsselektor zu übergeben, sondern mehrere:
- Über die Pseudoklassen :in-range und :out-of-range lassen sich Elemente ansprechen, deren aktueller Wert innerhalb bzw. außerhalb eines jeweils definierten Wertebereichs befindet:
<input type="number" min="5" max="200">
input:out-of-range {
border: 5px solid red;
}
input:in-range {
border: 5px solid green;
}
- Mit :read-only und :read-write lassen sich Elemente ansprechen, die nur lesbar oder editierbar sind (d.h. für die das Attribut contenteditable auf true gesetzt ist):
input:read-write { background: #FFFFFF; }
- Zudem ist es möglich, bei Attributselektoren über den Identifier "i" vor dem schließenden "]" zu definieren, dass der Vergleich des entsprechend geprüften Attributwertes nicht "case-sensitive" durchgeführt werden soll.
Fazit
Die kommende Version der CSS3 Selectors API bietet eine Reihe nützlicher Erweiterungen gegenüber der aktuellen Version. Über die momentane Browserunterstützung gibt diese Webseite Auskunft, auf der man seinen aktuellen Browser bezüglich der Features testen kann. Allerdings muss man berücksichtigen, dass dort auch noch Features geprüft werden, die mittlerweile nicht mehr im Editor Draft enthalten sind. ()
