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 "au clic" via css et HTML.

Auparavant, sur Internet, des tentatives avaient été faites pour mettre cela en œuvre à travers des 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, nous avons un code inter-navigateurs, 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 *




Masquer Afficher
Lorem Ipsum est simplement le texte factice.

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

PS: Le code vous permet de visualiser le contenu du spoiler lorsque le script java est désactivé - ce qui est requis lorsque vous surfez depuis de vieux téléphones portables, des anonymiseurs ou des pare-feu rigoureusement réglés.

Démo