Wie erstellt man interaktive Elemente ohne JS?
Wir werden einige neue CSS-Selektoren verwenden, die mittlerweile von den meisten Browsern unterstützt werden. Durch eine kreative Nutzung dieser Selektoren lassen sich viele interaktive Elemente wie Modals, Dropdowns, Popups, Sidebar-Navigationen und mehr realisieren.
has() – Dieser Selektor ermöglicht es, den Zustand von Kindelementen zu überprüfen und darauf basierend entweder das übergeordnete oder das Kindelement zu stylen.
[&] – Der Parent-Selektor erlaubt es, ein Element oder dessen Zustand (basierend auf Klassen, IDs, Datenattributen etc.) auszuwählen und entsprechend sowohl das Element selbst als auch seine Kinderelemente zu gestalten.
Syntax:
Benachrichtigungs-Komponente
Hier folgt eine einfache Logik: Wir prüfen beim Elternelement, ob es ein Input-Element mit aktiviertem (checked) Zustand enthält, und verstecken dann das gesamte Element. Wenn man auf das "X" klickt, wird das Input aktiviert und das Element wird wie bei einer Benachrichtigung ausgeblendet.
Dropdown-Komponente
Bei der Dropdown-Komponente erhält das Elternelement zunächst eine festgelegte Höhe, die lediglich die Überschrift des Dropdowns anzeigt. Wird das Input aktiviert, erhöht sich die Höhe des Elternelements, sodass der Dropdown-Inhalt sichtbar wird. Ein erneuter Klick deaktiviert das Input und blendet den Inhalt wieder aus.
Modal-Komponente
Dieser Fall ist etwas komplexer: Hier kombinieren wir den Parent-Selektor mit dem has()-Selektor. Das Elternelement wird überprüft, ob es ein Input-Element mit der Klassennamen "modal-btn" enthält, das aktiviert ist. Ist dies der Fall, wird der Inhalt mit der Klasse "modal-content" eingeblendet.
Innerhalb des Modal-Inhalts befindet sich ein weiteres Input-Checkbox-Element mit demselben Klassennamen – ein Klick darauf deaktiviert das Input und schließt das Modal.
Zudem gibt es ein Hintergrund-Element (Backdrop), das den gesamten Bildschirm abdeckt, solange das Modal sichtbar ist – auch dieses wird auf ähnliche Weise gesteuert.
Aufschlüsselung des Klassennamens:
[&:has(.modal-btn:checked)_.modal-content]
-
[&:has(.modal-btn:checked)] – Dieser Teil prüft, ob das Elternelement ein Input-Element mit der Klasse "modal-btn" besitzt, das aktiviert ist.
-
_.modal-content – Das Unterstrich-Symbol (_) dient hier dazu, ein verschachteltes Element auf einer tieferen Ebene zu selektieren, konkret das Element mit der Klasse "modal-content" (mithilfe der Punktnotation ".modal-content").