path: root/files/fr/mdn/guidelines/css_style_guide/index.html

---
title: Guide relatif aux classes et styles utilisés dans le contenu de MDN
slug: MDN/Guidelines/CSS_style_guide
tags:
  - Classes
  - Guide
  - Guidelines
  - MDN
  - MDN Meta
  - Styles
translation_of: MDN/Guidelines/Conventions_definitions
---
<p>{{MDNSidebar}}</p>

<p class="summary"><span class="seoSummary">MDN dispose de nombreux styles prédéfinis qui peuvent être utilisés dans les articles. Cette page recense les différentes classes disponibles et comment les utiliser.</span></p>

<p>On gardera à l'esprit que ces styles ont été développés afin d'aborder la plupart des situations pour la mise en forme du contenu d'un article. Autant que possible, on devra utiliser ces classes disponibles pour éviter de créer une hétérogénéité de styles. Si vous pensez qu'une page nécessite une mise en forme spécifique, commencez <a href="/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help">par en discuter</a>.</p>

<h2 id="Inline_styles">Styles en incise (inline)</h2>

<p>Cette section référence les différents styles en incise qui sont disponibles pour les blocs de contenu sur MDN.</p>

<h3 id=".button"><code>.button</code></h3>

<p>Met en forme comme un bouton. Généralement utilisé pour mettre en forme des liens (les éléments <a href="/fr/docs/Web/HTML/Element/button"><code>&lt;button&gt;</code></a> sont supprimés des sources des articles pour des raisons de sécurité).</p>

<p><a class="button" href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip">Télécharger le code source</a></p>

<h4 id="Example_syntax">Exemple de syntaxe</h4>

<pre class="brush: html">&lt;a href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip" class="button"&gt;Télécharger le code source&lt;/a&gt;</pre>

<h3 id=".hidden"><code>.hidden</code></h3>

<p>Permet de masquer le contenu dans la vue affichée au lecteur. Elle est généralement utilisée afin de fournir des blocs de code HTML, CSS et JavaScript complémentaires pour les exemples interactifs pour n'afficher que le contenu pertinent pour la page courante.</p>

<h4 id="Example_syntax_3">Exemple de syntaxe</h4>

<pre class="brush: html">&lt;h4 id="Hidden_Code_Sample"&gt;Exemple de code masqué&lt;/h4&gt;

&lt;div class="hidden"&gt;
&lt;h5 id="HTML"&gt;HTML&lt;/h5&gt;

&lt;pre class="brush: html;"&gt;
&amp;lt;button id="test"&amp;gt; Cliquez ici&amp;lt;/button&amp;gt;

&lt;h5 id="CSS"&gt;CSS&lt;/h5&gt;

&lt;pre class="brush: css;"&gt;
button {
  background-color: #a00;
  color:#fff;
  font-size: 20px;
}
&lt;/pre&gt;
&lt;/div&gt;

&lt;h5 id="JavaScript_Content"&gt;JavaScript&lt;/h5&gt;

&lt;pre class="brush: js;"&gt;
document.getElementById("test").addEventListener("click", works);
function works() {
  console.log("vous avez cliqué !");
}
&lt;/pre&gt;

&lt;p&gt;\{{EmbedLiveSample("Hidden_Code_Sample")}}&lt;/p&gt;
</pre>

<h4 id="Hidden_code_sample">Exemple de code masqué</h4>

<div class="hidden">
<h5 id="HTML">HTML</h5>

<pre class="brush: html">&lt;button id="test"&gt;Cliquez ici&lt;/button&gt;
</pre>

<h5 id="CSS">CSS</h5>

<pre class="brush: css">button{
  background-color: #a00;
  color:#fff;
  font-size: 20px;
}
</pre>
</div>

<h5 id="JavaScript">JavaScript</h5>

<pre class="brush: js">document.getElementById("test").addEventListener("click", works);
function works(){
  console.log("vous avez cliqué !");
}
</pre>

<p>{{EmbedLiveSample("Hidden_code_sample", "100%", 150)}}</p>

<h3 id=".seoSummary"><code>.seoSummary</code></h3>

<p>Il s'agit d'une classe sans effet visible sur le contenu de la page. Toutefois, si la classe est appliquée à un élément (généralement un <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>), KumaScript utilisera le contenu de l'élément afin de créer une <code>description</code> via une balise <a href="/fr/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a>. Celle-ci sera utilisée pour fournir une courte description dans les moteurs de recherche et sur les tuiles générées dans les messages sur les réseaux sociaux comme Facebook et Twitter.</p>

<div class="notecard note">
  <h4>Note</h4>
  <p>Si <code>.seoSummary</code> n'est pas explicitement utilisée sur une page, le premier paragraphe sera automatiquement utilisé comme telle description.</p>
</div>

<h4 id="Example_syntax_4">Exemple de syntaxe</h4>

<pre class="brush: html">&lt;span class="seoSummary"&gt;
  Les extensions permettent aux développeuses et développeurs d'étendre les fonctionnalités d'un navigateur.
&lt;/span&gt;</pre>

<h4 id="Example_of_the_generated_HTMLElementmeta_elements">Exemple de <a href="/fr/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a> généré</h4>

<pre class="brush: html;">&lt;meta name="description"
    content="Les extensions permettent aux développeuses et développeurs d'étendre les fonctionnalités d'un navigateur."&gt;</pre>

<h2 id="Block_level_styles">Styles pour les éléments de bloc</h2>

<p>Cette section énumère les différents styles permettant de mettre en forme les éléments de bloc sur MDN.</p>

<h3 id="Code_syntax_highlighting">Coloration syntaxique du code</h3>

<p>Pour créer un exemple de bloc de code sur MDN, on utilisera un élément <code>&lt;pre&gt;</code> :</p>

<pre>
&lt;pre&gt;p {
  color: red;
  /* Voici mon exemple de code */
}&lt;/pre&gt;
</pre>

Cela fournira le résultat suivant :

<pre>p {
  color: red;
  /* Voici mon exemple de code */
}</pre>

<p>Si vous souhaitez indiquer une coloration syntaxique dans l'exemple de code, il faudra inclure un attribut <code>class</code> avec une valeur <code>brush: <em>type-de-langage</em></code> où <code><em>type-de-langage</em></code> pourra être une valeur parmi :</p>

<ul>
  <li><code>bash</code></li>
  <li><code>cpp</code> (pour C/C++)</li>
  <li><code>css</code></li>
  <li><code>html</code></li>
  <li><code>java</code></li>
  <li><code>js</code> (pour JavaScript)</li>
  <li><code>json</code></li>
  <li><code>php</code></li>
  <li><code>python</code></li>
  <li><code>sql</code></li>
  <li><code>xml</code></li>
  <li><code>wasm</code> (pour le format texte WebAssembly)</li>
</ul>

<p>Par exemple, pour utiliser une coloration syntaxique pour CSS, on pourra écrire :</p>

<pre>
&lt;pre class="brush: css"&gt;p {
  color: red;
  /* Voici mon exemple de code */
}&lt;/pre&gt;
</pre>

Ce qui fournira le résultat suivant :

<pre class="brush: css">p {
  color: red;
  /* Voici mon exemple de code */
}</pre>

<p>Si aucun langage pertinent n'est disponible, on pourra n'utiliser aucune valeur ou <code>brush: plain</code> afin d'avoir du code sans coloration syntaxique.</p>

<h3 id="details"><code>details</code></h3>

<p>Un élément <code>&lt;details&gt;</code> peut être utilisé autour d'un bloc de contenu afin de masquer ce contenu et d'afficher un lien "▶︎ Détails" qui, lorsqu'on cliquera dessus, dévoilera son contenu.</p>

<details open>
  <summary>
<h4 id="Example_syntax_9">Exemple de syntaxe</h4>
  </summary>
<p>Voici un exemple de syntaxe pour l'élément <a href="/fr/docs/Web/HTML/Element/details"><code>&lt;details&gt;</code></a> qui a été masqué avec <a href="/fr/docs/Web/HTML/Element/details"><code>&lt;details&gt;</code></a>.</p>

<pre class="brush: html;">&lt;details&gt;
  &lt;summary&gt;
&lt;h4&gt;Exemple de syntaxe&lt;/h4&gt;
  &lt;/summary&gt;
&lt;p&gt;Voici un exemple de syntaxe pour l'élément &lt;code&gt;.detail&lt;/code&gt; qui a été masqué avec &lt;code&gt;.detail&lt;/code&gt;.&lt;/p&gt;
&lt;/details&gt;</pre>
</details>

<div class="notecard note">
  <h4>Note</h4>
  <p>On peut inclure un attribut <code>open</code> sur l'élément <code>&lt;details&gt;</code> afin que celui-ci soit ouvert par défaut.</p>
</div>

<h3 id=".example-bad_and_.example-good"><code style="white-space: nowrap;">.example-bad</code> et <code style="white-space: nowrap;">.example-good</code></h3>

<p>Les exemples de bonnes et de mauvaises pratiques peuvent être signalés respectivement par les classes <code>.example-good</code> et <code>.example-bad</code>. Elles sont généralement utilisées pour les blocs <code>&lt;pre&gt;</code> indiquant des fragments de code à éviter. On peut cependant les utiliser sur d'autres blocs.</p>

<h5 id="Good_code_example">Exemple de code correct</h5>

<pre class="brush: html example-good">&lt;label for="test"&gt;Libellé de formulaire:&lt;/label&gt;
&lt;input type="text" id="test"&gt;
</pre>

<h5 id="Bad_code_example">Exemple de code incorrect</h5>

<pre class="brush: html example-bad">&lt;input type="text"&gt;
</pre>

<p><strong>Il est nécessaire d'utiliser des titres pour ces classes (voir ci-après).</strong> En effet, CSS ne permet pas d'ajouter le message localisé qui indique si l'exemple est correct ou incorrect et qui permet de comprendre pour les personnes utilisant un lecteur d'écran ou celles pour qui rouge et vert ne signifient pas nécessairement mauvais/bon.</p>

<h4 id="Example_syntax_10">Exemple de syntaxe</h4>

<pre class="brush: html">&lt;h5 id="Good_code_example"&gt;Exemple de code correct&lt;/h5&gt;

&lt;pre class="brush: html example-good"&gt;
  &amp;lt;label for="test"&amp;gt;Libellé de formulaire:&amp;lt;/label&amp;gt;
  &amp;lt;input type="text" id="test"&amp;gt;
&lt;/pre&gt;

&lt;h5 id="Bad_code_example"&gt;Exemple de code incorrect&lt;/h5&gt;

&lt;pre class="brush: html example-bad"&gt;
  &amp;lt;input type="text"&amp;gt;
&lt;/pre&gt;</pre>

<h3 id=".note.notecard"><code>.note.notecard</code></h3>

<p>Affiche le contenu d'une section dans une boîte signalant une note. Cette classe s'avère utile lorsqu'on souhaite indiquer quelque chose de relatif au contenu principal sans que cette information s'intègre directement dans le flux de l'article.</p>

<div class="notecard note">
<h4>Note</h4>
<p>Voici comment une note est généralement affichée sur MDN.</p>
</div>

<p>Nous avons ici utilisé un titre <code>&lt;h4&gt;</code> pour cet exemple mais il conviendra de choisir le niveau de titre qui correspond à la hiérarchie des titres du document courant.</p>

<h4 id="Example_syntax_12">Exemple de syntaxe</h4>

<pre class="brush: html">&lt;div class="notecard note"&gt;
  &lt;h4&gt;Note&lt;/h4&gt;
  &lt;p&gt;Voici comment une note est généralement affichée sur MDN.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id=".notecard.warning"><code>.notecard.warning</code></h3>

<p>Affiche le contenu d'une section dans une boîte signalant un avertissement. Cela permet d'indiquer une information à laquelle la lectrice ou le lecteur doit faire particulièrement attention (par exemple lorsqu'il est nécessaire de faire quelque chose ou d'éviter quelque chose).</p>

<div class="notecard warning">
  <h4>Attention !</h4>
  <p>La balise &lt;blink&gt; est obsolète !</p>
</div>

<p>Nous avons ici utilisé un titre <code>&lt;h4&gt;</code> pour cet exemple mais il conviendra de choisir le niveau de titre qui correspond à la hiérarchie des titres du document courant.</p>

<h4 id="Example_syntax_17">Exemple de syntaxe</h4>

<pre class="brush: html">&lt;div class="notecard warning"&gt;
  &lt;h4&gt;Attention !&lt;/h4&gt;
  &lt;p&gt;La balise &amp;lt;blink&amp;gt; est obsolète !&lt;/p&gt;
&lt;/div&gt;</pre>

<h2 id="Table_styles">Styles pour les tableaux</h2>

<p>MDN fournit quelques styles pour la mise en forme des éléments <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a>.</p>

<p>Sans classe ajoutée :</p>

<table>
 <caption>Thés préférés, décembre 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variété</th>
   <th scope="col">Caféine</th>
   <th scope="col">Durée d'infusion</th>
   <th scope="col">Température de l'eau</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Noir</th>
   <td>Élevée</td>
   <td>2-3 minutes</td>
   <td>99°C</td>
  </tr>
  <tr>
   <th scope="row">Vert</th>
   <td>Faible à moyen</td>
   <td>1-2 minutes</td>
   <td>75 à 80°C</td>
  </tr>
  <tr>
   <th colspan="4">Caféine free</th>
  </tr>
  <tr>
   <th scope="row">Tisane</th>
   <td>Aucune</td>
   <td>3-6 minutes</td>
   <td>99°C</td>
  </tr>
 </tbody>
</table>

<h3 id=".standard-table"><code style="white-space: nowrap;">.standard-table</code></h3>

<table class="standard-table">
 <caption>Thés préférés, décembre 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variété</th>
   <th scope="col">Caféine</th>
   <th scope="col">Durée d'infusion</th>
   <th scope="col">Température de l'eau</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Noir</th>
   <td>Élevée</td>
   <td>2-3 minutes</td>
   <td>99°C</td>
  </tr>
  <tr>
   <th scope="row">Vert</th>
   <td>Faible à moyen</td>
   <td>1-2 minutes</td>
   <td>75 à 80°C</td>
  </tr>
  <tr>
   <th colspan="4">Caféine free</th>
  </tr>
  <tr>
   <th scope="row">Tisane</th>
   <td>Aucune</td>
   <td>3-6 minutes</td>
   <td>99°C</td>
  </tr>
 </tbody>
</table>

<h4 id="Style_notes">Notes</h4>

<ul>
 <li>On notera les différents styles appliqués aux en-têtes (<a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>) et les attributs <a href="/fr/docs/Web/HTML/Element/th#attr-scope"><code>scope</code></a> utilisés pour l'accessibilité.</li>
</ul>

<h4 id="Example_syntax_18">Exemple de syntaxe</h4>

<pre class="brush: html">&lt;table class="standard-table"&gt;
 &lt;caption&gt;Thés préférés, décembre 2015&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th scope="row"&gt;Variété&lt;/th&gt;
   &lt;th scope="col"&gt;Caféine&lt;/th&gt;
   &lt;th scope="col"&gt;Durée d'infusion&lt;/th&gt;
   &lt;th scope="col"&gt;Température de l'eau&lt;/th&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th scope="row"&gt;Noir&lt;/th&gt;
   &lt;td&gt;Élevée&lt;/td&gt;
   &lt;td&gt;2-3 minutes&lt;/td&gt;
   &lt;td&gt;99&amp;nbsp;°C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;th scope="row"&gt;Vert&lt;/th&gt;
   &lt;td&gt;Faible à moyen&lt;/td&gt;
   &lt;td&gt;1-2 minutes&lt;/td&gt;
   &lt;td&gt;75 à 80&amp;nbsp;°C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;th scope="row"&gt;Infusion&lt;/th&gt;
   &lt;td&gt;Aucune&lt;/td&gt;
   &lt;td&gt;3-6 minutes&lt;/td&gt;
   &lt;td&gt;99&amp;nbsp;°C&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;</pre>