initial commit

1 files changed, 268 insertions, 0 deletions

diff --git a/files/fr/web/css/content/index.html b/files/fr/web/css/content/index.html
new file mode 100644
index 0000000000..6734f52912
--- /dev/null
+++ b/files/fr/web/css/content/index.html
@@ -0,0 +1,268 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés anonymes</a>.</em></p>
+
+<pre class="brush: css no-line-numbers">/* Des mots-clés qui ne peuvent pas être mélangés
+  avec d'autres valeurs */
+content: normal;
+content: none;
+
+/* Valeurs pour une image */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* Une valeur &lt;string&gt;, les caractères non-latin */
+/* doivent être échappées par ex. \000A9 for &amp;copy; */
+content: 'prefix';
+
+/* Valeurs utilisant un compteur */
+content: counter(compteur_chapitre);
+content: counter(compteur_section, ".");
+
+/* attr() lie à la valeur de l'attribut HTML */
+content: attr(value string);
+
+/* Mots-clés dépendant de langue */
+/* ou de la position             */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* Sauf avec normal et none, on peut utiliser */
+/* plusieurs valeurs de façon simultanée */
+content: open-quote chapter_counter;
+
+/* Valeurs globales */
+content: inherit;
+content: initial;
+content: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le pseudo-élément n'est pas généré.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Résulte en <code>none</code> pour les pseudo-éléments <code>:before</code> et <code>:after</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (<code>\000A9</code> représentera par exemple le symbole ©).</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} ou une partie de la page web fournie par la fonction {{cssxref("element", "element()")}} et qui indique le contenu à afficher.</dd>
+ <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("&lt;counter&gt;")}})</dt>
+ <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("counter")}} or {{cssxref("counters")}}.</dd>
+ <dd>La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut).</dd>
+ <dd>La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/counter">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd>
+ <dt><code>attr(X)</code></dt>
+ <dd>Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.</dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Titres_et_citations">Titres et citations</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt; Commençons par une citation de Sir Tim Berners-Lee,
+    &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.&lt;/q&gt;  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt; Citons le manifeste Mozilla
+    &lt;q cite="http://www.mozilla.org/about/manifesto/"&gt;
+        Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+    color: #00008B;
+    font-style: italic;
+}
+
+q::before   { content: open-quote }
+q::after    { content: close-quote }
+
+h1::before  { content: "Chapitre "; }</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Titres_et_citations', 460, 100)}}</p>
+
+<h3 id="Ajouter_une_icône_avant_un_lien">Ajouter une icône avant un lien</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="http://www.mozilla.org/fr/"&gt;Accueil&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before{
+    content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: ";
+    font:    x-small Arial,freeSans,sans-serif;
+    color:   gray;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}</p>
+
+<h3 id="Utiliser_les_classes">Utiliser les classes</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Top des ventes&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Thriller politique&lt;/li&gt;
+    &lt;li class="nouveaute"&gt;Histoires effrayantes&lt;/li&gt;
+    &lt;li&gt;Ma biographie&lt;/li&gt;
+    &lt;li class="nouveaute"&gt;Bit-lit&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.nouveaute::after {
+    content: " Nouveau !";
+    color: red;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}</p>
+
+<h3 id="Utiliser_les_attributs_d’image_et_d’élément">Utiliser les attributs d’image et d’élément</h3>
+
+<p>Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a id="moz" href="https://www.mozilla.org/"&gt;Page d'accueil Mozilla&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
+}
+
+#mdn::before {
+  content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico");
+}
+
+li {
+  margin: 1em;
+}</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}</p>
+
+<h3 id="Remplacer_un_élément">Remplacer un élément</h3>
+
+<p>Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . Le contenu ajouté avec <code>::before</code> ou avec <code>::after</code> ne sera plus généré car l'élément sera devenu un élément remplacé.</p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* Ceci ne sera pas affiché, */
+                   /* l'élément sera un élément remplacé */
+  content: " (" attr(id) ")";
+}</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p>
+
+<ul>
+ <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#content', 'content')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::after")}}</li>
+ <li>{{cssxref("::before")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+ <li>{{Cssxref("::marker")}}</li>
+ <li>{{cssxref("url()", "url()")}}</li>
+</ul>