This page has been robot translated, sorry for typos if any. Original content here.

Css-Spoiler

Cпойлер средствами css

Die Idee dieses Artikels, der das Aufkommen von html5 nicht erwartet, macht einen Spoiler "on click" durch CSS und HTML.

Früher im Internet wurde versucht, dies durch Pseudoklassen zu implementieren, hauptsächlich durch: focus, was zur Selbstabdeckung des Containers führte, wobei der Fokus verloren ging.

Die Basis dieses Entwurfs - Pseudoklasse : geprüft

Minimalistische Idee sieht so aus:

  / * CSS * /
 .spoiler> input + .box {
  Anzeige: keine;
 }
 .spoiler> input: angehakt + .box {
  Anzeige: Block;
 }

Der Text der Nachricht im Spoiler.

Wie Sie sehen, wurde der browserübergreifende Code ab IE9 abgerufen. Dort gibt es bereits eine Pseudoklasse ": checked" und endet mit aktuellen Versionen anderer Browser. Gemäß dem Plan handelt es sich hierbei um eine "reine" HTML-CSS-Implementierung.

Wenn Sie versuchen, den Effekt auf IE6-8 zu erweitern (hier, wie bei IE üblich, geht die "Reinheit" der Implementierung verloren), und wir schließen die Google-Bibliothek mit Pseudoklassen für IE ein:




Der Code von "Cross-Browser-Dance" * wurde in ХP, Win7-8 * getestet.




Show ausblenden
Lorem Ipsum ist einfach Scheintext.

Minuspunkte: In IE6-7 ist das Kontrollkästchen "Vintage" links vom Spoiler verlängert. (Wir haben uns jedoch nicht die Aufgabe gestellt, die Daten von Yeh in den ursprünglichen Entwürfen zu unterstützen.

PS: Mit diesem Code können Sie den Inhalt des Spoilers anzeigen, wenn das Java-Skript deaktiviert ist. Dies ist erforderlich, wenn Sie von alten Mobiltelefonen, Anonymisierern oder von hart eingestellten Firewalls aus surfen.

Demo