DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Pseudo-Klasse :defined ist Teil der CSS Selectors Level 4 Spezifikation und ermöglicht es Ihnen, benutzerdefinierte Elemente, die mit der Web Components API erstellt und in JavaScript definiert wurden, anzusprechen. Außerdem passt dieser Selektor zu jedem Standardelement, das im Browser integriert ist.
/* Select a specific custom element */
my-element:defined {
visibility: visible;
}
/* Select any defined elenent, custonm or not */
:defined {
visibility: visible;
}
/* Select an undefined custom element */
my-element:not(:defined) {
visibility: hidden;
}Syntax
Die CSS Pseudo-Klasse :defined hat die folgende Syntax
<element-selector>:defined {}Der
/* Selects any defined element */
:defined {}
/* Selects a custom <spicy-sections> element */
spicy-sections:defined {}Ja, es gibt tatsächlich ein benutzerdefiniertes Element namens <spicy-sections>, das jemand veröffentlicht hat.
Was ist ein definiertes Element?
Definierte Elemente stehen im Zusammenhang mit Web Components, einem Web-Feature, das es uns ermöglicht, eigene benutzerdefinierte Elemente zu erstellen – wie <pizza-pie> – die alles bündeln, was dieses Element zum "Arbeiten" benötigt, wie z. B. sein HTML, CSS und JavaScript. Wir werden oft einfach von "Web Components" sprechen, wenn wir über benutzerdefinierte Elemente reden, daher werden die beiden Begriffe austauschbar verwendet.
Somit ist ein definiertes Element ein benutzerdefiniertes Element, das mit der Web Components API erstellt und mit der customElements.define() Methode in JavaScript registriert wurde.
Aber dieses benutzerdefinierte Element ist erst dann "definiert", wenn sein JavaScript geladen wurde. Bis dahin befindet sich das Element in einem undefinierten Zustand. Das unterscheidet sich von "eingebauten" Elementen, was ein schicker Begriff für jedes Standard-Web-Element ist, wie z. B. <h1>, <p>, <main>, <div>, <span> usw.
Es ist wichtig zu beachten, dass eingebaute Elemente im Gegensatz zu benutzerdefinierten Elementen *immer* als definiert gelten. Das steht im Gegensatz zu benutzerdefinierten Elementen, die undefiniert beginnen und erst definiert werden, wenn sie richtig registriert sind. Das bedeutet, dass die CSS Pseudo-Klasse :defined verwendet werden kann, um Stile selektiv auf benutzerdefinierte Elemente anzuwenden, die *definiert* und *im HTML vorhanden* sind.
Zum Beispiel passt h1:defined immer zu einem Standard-eingebauten <h1>-Element. Wenn unser <pizza-pie>-Element noch nicht im HTML vorhanden ist, weil es auf JavaScript wartet oder zu einem späteren Zeitpunkt per Design in das HTML eingefügt wird, dann wird es nicht ausgewählt – zumindest nicht, bis es schließlich geladen wird.
Wozu das alles gut ist, fragen Sie sich vielleicht. Auf diese Weise können wir benutzerdefinierte Elemente basierend auf ihrem definierten Status gestalten. Sehen wir uns ein Beispiel an, wie das funktioniert.
Beispiel
Um zu demonstrieren, wie der CSS-Selektor :defined verwendet wird, nehmen wir das Beispiel einer two-up Web Component. Diese Komponente vergleicht zwei DOM-Elemente, wie z. B. zwei Bilder. Nehmen wir jedoch an, ein Benutzer lädt die Seite mit einer langsamen Internetverbindung. In diesem Fall kann es eine Weile dauern, bis das JavaScript und CSS des benutzerdefinierten Elements geladen sind, was dazu führt, dass das Element auf der Seite kaputt aussieht, bis die Dinge geladen sind, z. B. die beiden Bilder übereinander gestapelt anstatt nebeneinander.
Niemand möchte eine solche ruckartige Erfahrung, und genau dafür ist :defined gedacht. Die Verwendung ermöglicht es uns, die benutzerdefinierte Komponente auszublenden, bis sie vollständig geladen ist, und so Ruckler zu vermeiden, die beim Laden des JavaScript der benutzerdefinierten Komponente auftreten können.
two-up:not(:defined) {
visibility: hidden
}
two-up:defined {
visibility: visible
}Im obigen Code verwenden wir den :defined-Selektor, um die Sichtbarkeit unseres benutzerdefinierten Elements auf sichtbar zu setzen, sobald es vollständig definiert ist. Beachten Sie, wie wir die visibility des Elements auf hidden setzen können, indem wir den Selektor mit der :not()-Funktion kombinieren. Indem wir dies tun, sagen wir: "Wenn die <two-up> Komponente *nicht* definiert ist, dann verstecke diesen Kerl."
Und wenn wir das tun, können selbst Benutzer mit langsameren Internetverbindungen ein reibungsloses, ruckelfreies Erlebnis genießen, während die Seite geladen wird. Diese Strategie kann Ihnen auch Leistungsvorteile bringen, da Cumulative Layout Shift (oder CLS) eine Metrik in Core Web Vitals ist, die Suchrankings beeinflusst. Je weniger die Seite beim Laden verrutscht, desto besser ist der CLS.
Sehen Sie sich das folgende Video an, um das Ergebnis zu sehen. Beachten Sie auch, wie der :defined-Selektor auf die two-up Web Component während ihrer definierten und undefinierten Zustände angewendet wird.
Browser-Unterstützung
Die Unterstützung ist durchweg hervorragend.