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

Spoiler css

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

L’idée de cet article, sans attendre l’avènement de html5, est de créer un spoiler «click-through» utilisant css et HTML.

Plus tôt sur Internet, des tentatives avaient été faites pour mettre cela en œuvre au moyen de pseudo-classes, principalement via: focus, ce qui conduisait à l'auto-dissimulation du conteneur en cas de perte de concentration.

La base de cette construction est la pseudo-classe : cochée

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, nous avons un code inter-navigateurs, à commencer par IE9, où il existe déjà une pseudo-classe «: vérifié» et se terminant par les versions réelles des autres navigateurs. De par sa conception, il s’agit d’une implémentation «pure» html-css.

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




Le code pour "danser avec compatibilité entre navigateurs" * a été testé dans XP, Win7-8 *




Masquer Afficher
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition.

Inconvénients: dans IE6-7 - vérifie que le panneau "vintage" s’allonge à gauche du spoiler; (Mais nous ne nous sommes pas fixés pour tâche de prendre en charge les données d’IE dans les plans originaux.

PS: Le code vous permet de visualiser le contenu du spoiler lorsque le script java est désactivé, ce qui est demandé pour surfer sur d'anciens téléphones mobiles, des anonymiseurs ou des pare-feu rigoureusement réglés.

Démo