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

Spoiler bedeutet css

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

Die Idee zu diesem Artikel, nicht die Einführung von HTML5 erwartet, um einen Spoiler "per Klick" durch CSS und HTML zu machen.

Früher im Internet wurde versucht, dies durch Pseudo-Klassen zu implementieren, hauptsächlich durch: Fokus, der zum Selbst-Verbergen des Containers führte, mit Fokusverlust.

Die Basis dieser Konstruktion ist eine Pseudoklasse : geprüft

Die Idee ist minimalistisch wie folgt:

  / * CSS * /
 .spoiler> Eingabe + .box {
  Anzeige: keine;
 }
 .spoiler> Eingabe: geprüft + .box {
  Anzeige: Block;
 }

Der Text der Nachricht im Spoiler.

Wie Sie sehen können, war es ein Cross-Browser-Code, beginnend mit IE9, wo es bereits eine Pseudo-Klasse ": checked" gibt und mit den aktuellen Versionen anderer Browser endet. Nach dem Plan ist dies eine "saubere" HTML-CSS-Implementierung.

Beim Versuch, die Aktion auf IE6-8 zu erweitern, (hier, wie für ue üblich, geht die "Reinheit" der Implementierung verloren), und wir verbinden die Google-Pseudoklassenbibliothek für IE:




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




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

Nachteile: in IE6-7 - das chekit panel "vintage" wird nach links vom Spoiler geschoben; (Aber wir haben uns nicht die Aufgabe gestellt, die Daten von Ie in den ursprünglichen Plänen zu unterstützen.

PS: Mit dem Code können Sie den Inhalt des Spoilers anzeigen, wenn Java-Script deaktiviert ist, - das wird beim Surfen von alten Handys, Anonymisierern oder von festverdrahteten Firewalls behauptet.

DEMO