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

Spoiler css

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

Die Idee dieses Artikels, ohne das Aufkommen von HTML5 zu erwarten, ist es, einen "Click-through" -Spoiler mit CSS und HTML zu erstellen.

Früher im Internet wurde versucht, dies durch Pseudoklassen zu implementieren, hauptsächlich durch: focus, was dazu führte, dass sich der Container im Falle eines Fokusverlusts selbst versteckte.

Die Basis dieser Konstruktion ist die Pseudoklasse : geprüft

Die minimalistische Idee sieht so aus:

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

Der Text der Nachricht im Spoiler.

Wie Sie sehen können, haben wir browserübergreifenden Code erhalten, beginnend mit IE9, wo es bereits eine Pseudoklasse ": geprüft" gibt und mit aktuellen Versionen anderer Browser endet. Dies ist von Natur aus eine „reine“ HTML-CSS-Implementierung.

Beim Versuch, den Umfang von IE6-8 zu erweitern (hier geht, wie für IE üblich, die „Reinheit“ der Implementierung verloren), verbinden wir die Google-Bibliothek mit Pseudoklassen für IE:




Der Code für "Tanzen mit Cross-Browser-Kompatibilität" * wurde in XP, Win7-8 * getestet


 Spoiler css 

Show ausblenden
Lorem Ipsum ist einfach Dummy-Text der Druck- und Satzindustrie.

Nachteile: in IE6-7 - prüft, ob das Panel "vintage" links vom Spoiler ausgefahren ist; (Wir haben uns jedoch nicht die Aufgabe gestellt, die Daten des IE in den ursprünglichen Plänen zu unterstützen.

PS: Mit dem Code können Sie Spoiler-Inhalte anzeigen, wenn das Java-Skript deaktiviert ist. Dies ist beim Surfen von alten Mobiltelefonen, Anonymisierern oder von fest abgestimmten Firewalls gefragt.

Demo