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

Spoiler signifie css

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

L'idée de cet article, n'attendant pas l'avènement de html5, pour faire un spoiler "par clic" via CSS et HTML.

Plus tôt dans Internet, des tentatives ont été faites pour implémenter ceci à travers des pseudo-classes, principalement à travers: focus, ce qui a conduit à l'auto-masquage du container, avec perte de focus.

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

L'idée est minimaliste comme ceci:

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

Le texte du message dans le spoiler.

Comme vous pouvez le voir, il s'est avéré être un code croisé, en commençant par IE9, où il y a déjà une pseudo-classe ": checked" et se terminant par les versions actuelles des autres navigateurs. Selon le plan, il s'agit d'une implémentation html-css "pure".

Lorsque vous essayez d'étendre l'action sur IE6-8, (ici, comme d'habitude pour ue, la "pureté" de l'implémentation est perdue), et nous connectons la bibliothèque de pseudo-classe de Google pour IE:




Le code pour "danser avec compatibilité cross-browser" * a été testé sous XP, Win7-8 *




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

Inconvénients: dans IE6-7 - le panneau chekit "vintage" est poussé à gauche du spoiler; (Mais nous ne nous sommes pas assignés la tâche de supporter les données de Ie dans les plans originaux.

PS: Le code vous permet d'afficher le contenu du spoiler lorsque Java-Script est désactivé, - ce qui est revendiqué lors de la navigation à partir de vieux téléphones mobiles, anonymiseurs ou de pare-feu câblés.

DEMO