Introduction▲
Dans cet article, je vais vous montrer comment créer une page de type FAQ qui soit jolie, pratique et faite uniquement en CSS3 (pas de JavaScript).
L'idée▲
Lorsque j'ai visité la page d'aide de Facebook (leur FAQ), j'ai remarqué un effet sympathique pour la prévisualisation des réponses. Ils montrent les premières lignes de chaque réponse légèrement transparentes, puis lorsqu'on clique sur la question, la réponse complète apparait.
Bien sûr, en voyant cela, je me suis tout de suite demandé « comment créer quelque chose de similaire uniquement en CSS3 ». C'est ce que je vais vous montrer !
Le HTML▲
Comme d'habitude, nous commençons par la structure HTML.
<section class="faq-section">
<input type="checkbox" id="q1">
<label for="q1">Question ?</label>
<p>... Le début de la réponse ...</p>
<p>... Suite de la réponse et paragraphes optionnels ...</p>
</section>
- Sur l'image ci-dessus, la balise label correspond au titre de la question. Mais si vous souhaitez une sémantique plus conforme, vous devriez entourer label par une balise h1.
- En utilisant label::before, nous ajoutons le triangle à droite. Notez que la syntaxe pour désigner les pseudoéléments CSS3 est le double deux-points (::).
- Le premier paragraphe de chaque section est le texte d'introduction de la réponse. Dans cet exemple, j'ai utilisé les sélecteurs frères adjacents pour les cibler.
Comment ça marche ?▲
Il n'y a aucune magie noire ici. La technique que nous allons utiliser est appelée checkbox hack et consiste à pouvoir alterner l'état d'une balise <input type="checkbox" id="abc" /> en utilisant <label for="abc">. Dans le même temps, la balise input est cachée.
J'ai plusieurs fois utilisé cette technique, mais je ne l'avais jamais intégrée dans un exemple pratique. C'est maintenant chose faite !
Si vous voulez en apprendre plus sur cette technique, Chris Coyer a écrit un article à ce sujet dans lequel il montre certaines utilisations possibles.
Le CSS▲
Voici le code CSS associé, j'ai commenté certaines lignes pour mieux comprendre.
/* Espacement entre les questions */
.faq-section{
margin: 40px 0;
}
/* Masquer les checkbox et les paragraphes */
.faq-section input,
.faq-section p{
display: none;
}
/* Montrer uniquement les débuts de réponses */
.faq-section label+p{
display: block;
color: #999;
font-size: .85em;
transition: all .15s ease-out;
/* Couper le texte */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* Si le checkbox est coché, montrer tous les paragraphes */
.faq-section input[type=checkbox]:checked~p{
display: block;
color: #444;
font-size: 1em;
/* Restaurer le texte entier */
text-overflow: clip;
white-space: normal;
overflow: visible;
}
/* Style des label */
.faq-section label{
font-size: 1.2em;
cursor: pointer;
background: #eee;
display: block;
position: relative;
padding: 7px 10px;
font-weight: bold;
border: 1px solid #ddd;
border-left: 3px solid #888;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
transition: all .15s ease-out;
}
/* Éviter de sélectionner le texte en cliquant plusieurs fois */
.faq-section label::selection{
background: none;
}
.faq-section label:hover{
background: #f5f5f5;
}
/* Style du label si le checkbox est coché */
.faq-section input[type=checkbox]:checked~label{
border-color: #ff7f50;
background: #f5deb4;
background-image: linear-gradient(to bottom, #fff, #f5deb4);
box-shadow: 0 0 1px rgba(0,0,0,.4);
}
/* Flèche du label par défaut */
.faq-section label::before{
content: '';
position: absolute;
right: 4px;
top: 50%;
margin-top: -6px;
border: 6px solid transparent;
border-left-color: inherit;
}
/* Flèche du label sélectionné */
.faq-section input[type=checkbox]:checked~label::before{
border: 6px solid transparent;
border-top-color: inherit;
margin-top: -3px;
right: 10px;
}Support des navigateurs▲
Qu'en est-il des navigateurs anciens ? La question est pertinente et la réponse se résume à : dégradation élégante :
Avec le code ci-dessous, nous ciblons IE8 et inférieurs. Cela nous permet d'ajouter la prise en compte d'éléments comme section et d'ajouter quelques styles de façon à ce que l'ensemble du contenu de la FAQ reste lisible.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<style>
.faq-section label,
.faq-section label:hover{
cursor: default;
background: #eee;
}
body .faq-section p{ /* Augmente la spécificité */
display: block;
color: #444;
font-size: 1em;
text-overflow: clip;
white-space: normal;
overflow: visible;
}
</style>
<![endif]-->Conclusion et remerciements▲
C'est terminé. Si cet article vous a plu, n'hésitez pas à le commenter et à proposer vos idées d'améliorations. (NDT Y compris sur le site de l'article original.)
Cet article a été publié avec l'aimable autorisation de Catalin Rosu. L'article original peut être lu sur le site de Red Team Design : Fancy FAQ page using CSS3 only.
Nous tenons aussi à remercier ClaudeLELOUP pour sa relecture attentive de cet article.