Accordéon, Details

Divulguer des informations

Grâce aux éléments <details>MDN Référence et <summary> nous pouvons cacher des informations ou créer un système d'accordéon basique. Ces tags sont utiles pour créer des FAQ sémantiquement parfaites pour le SEO.

Pour créer un contrôle déjà ouvert, et que les informations soient visibles par défaut, il suffit d'ajouter l'attribut open sur la balise <details>.

Pour donner l'allure d'un bouton au texte de description il suffit d'ajouter role="button" sur la balise <summary>.

Comment insérer un commentaire dans une feuille de style ?

Un commentaire dans une feuille de style débute par /* et se termine par */.

/* voici un exemple de
	  commentaires */

Note : Les commentaires ne peuvent pas être imbriqués.

Comment définir le chemin d'une image en CSS ?

Pour définir le chemin d'une image en CSS, vous devez utiliser la notation fonctionnelle url().

#mon-element {
  background-image: url("chemin-de-mon-image.gif");
}
Vous pouvez utiliser un chemin absolu ( http://... ) ou un chemin relatif. Si vous indiquez un chemin relatif, alors ce chemin sera relatif à l'emplacement de la feuille de style.

Note : Les guillemets autour du chemin sont optionnels.

Comment appliquer un style à plusieurs éléments/classes/identifiants ?

On définit un seul style pour plusieurs éléments en les séparant par une virgule dans la feuille de style CSS.

h1, .maclasse, #monparagraphe {
  color : red;
  font-weight : bold;
}

Ici, les éléments h1, les classes maclasse et l'identifiant monparagraphe seront affichés de la même manière (du même style). 

<details>
	<summary role="button">Comment insérer un commentaire dans une feuille de style ?</summary>
	<p>Un commentaire dans une feuille de style débute par <b>/*</b> et se termine par <b>*/.</b></p>
	<pre data-lang="css" class="language-css" data-prismjs-copy="Copier"><code>/* voici un exemple de
	  commentaires */</code></pre>
		<p>
			<b>Note : </b>Les commentaires ne peuvent pas être imbriqués.
		</p>
</details>

<details open>
	<summary>Comment définir le chemin d'une image en CSS ?</summary>
	<p>Pour définir le chemin d'une image en CSS, vous devez utilisez la notation fonctionnelle <b>url()</b>.</p>
	<pre data-lang="css" class="language-css" data-prismjs-copy="Copier"><code>#mon-element {
  background-image: url(&quot;chemin-de-mon-image.gif&quot;);
}</code></pre>
	<div class="panel ui--info-alt">
		Vous pouvez utilisez un chemin absolu ( http://... ) ou un chemin relatif.
		Si vous indiquez un chemin relatif, alors ce chemin sera relatif à l'emplacement de la feuille de style.
	</div>
	<p>
		<b>Note : </b>Les guillemets autour du chemin sont optionnels.
	</p>
</details>

<details>
	<summary>Comment appliquer un style à plusieurs éléments/classes/identifiants ?</summary>
	<p>On définit un seul style pour plusieurs éléments en les séparant par une virgule dans la feuille de style <b>CSS</b>.</p>
	<pre data-lang="css" class="language-css" data-prismjs-copy="Copier"><code>h1, .maclasse, #monparagraphe {
  color : red;
  font-weight : bold;
}</code></pre>
	<p>
		Ici, les éléments <b>h1</b>, les classes <b>maclasse</b> et l'identifiant <b>monparagraphe</b> seront affichés de la même manière (du même style).
	</p>
</details>