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

Spoiler css

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

L'idée de cet article, n'attendant pas l'avènement de html5, crée un spoiler "sur le clic" via css et HTML.

Auparavant, sur Internet, des tentatives avaient été faites pour mettre cela en œuvre au moyen de pseudo-classes, principalement via: focus, qui conduisait à une auto-couverture du conteneur, avec une perte de concentration.

La base de cette conception - pseudo-classe : vérifié

L'idée minimaliste ressemble à ceci:

  / * CSS * /
 .spoiler> input + .box {
  affichage: aucun;
 }
 .spoiler> entrée: vérifié + .box {
  affichage: bloc;
 }

Le texte du message dans le spoiler.

Comme vous pouvez le constater, le code inter-navigateurs a été obtenu, en commençant par IE9, où il existe déjà une pseudo-classe ": vérifié" et se terminant par les versions actuelles des autres navigateurs. Selon le plan, il s’agit d’une implémentation «pure» html-css.

Lorsque vous essayez d'étendre l'effet sur IE6-8 (ici, comme d'habitude pour IE, la «pureté» de l'implémentation est perdue), nous incluons la bibliothèque de pseudo-classes de Google pour IE:




Le code de «danse multi-navigateur» * a été testé dans P, Win7-8 *


 Spoiler css 

Masquer Afficher
Lorem Ipsum est tout simplement un texte factice.

Points faibles: dans IE6-7, le panneau de contrôle «vintage» est étendu à gauche du becquet; (Mais nous ne nous sommes pas fixé pour tâche de prendre en charge les données de Yeh dans les conceptions originales.

PS: Le code vous permet d’afficher le contenu du spoiler lorsque le script java est désactivé, ce qui est indispensable pour surfer depuis un ancien téléphone mobile, un anonymiseur ou un pare-feu entièrement paramétré.

Démo