aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/html/element/content
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-10-13 07:13:08 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-11-07 11:56:53 +0100
commitdea9d1f019d9e14357c58cf18653df1ac779d9d8 (patch)
treed20318111821d4e935a6c53409240078c4f687e5 /files/fr/web/html/element/content
parent8829a7c9eb82f180bac76ed5836aaef95be209a1 (diff)
downloadtranslated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.gz
translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.bz2
translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.zip
convert content to md
Diffstat (limited to 'files/fr/web/html/element/content')
-rw-r--r--files/fr/web/html/element/content/index.md117
1 files changed, 64 insertions, 53 deletions
diff --git a/files/fr/web/html/element/content/index.md b/files/fr/web/html/element/content/index.md
index 65be830bb8..d192759d73 100644
--- a/files/fr/web/html/element/content/index.md
+++ b/files/fr/web/html/element/content/index.md
@@ -16,31 +16,43 @@ tags:
translation_of: Web/HTML/Element/content
browser-compat: html.elements.content
---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
-<div class="warning">
- <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
-<p>L'élément HTML <strong><code>&lt;content&gt;</code></strong> — une partie obsolète de la suite de technologies <a href="/fr/docs/Web/Web_Components">Web Components</a> — était utilisé à l'intérieur de <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</code></a>, qui crée un point dans le DOM où un Shadow DOM peut être inséré.</p>
+L'élément HTML **`<content>`** — une partie obsolète de la suite de technologies [Web Components](/fr/docs/Web/Web_Components) — était utilisé à l'intérieur de [Shadow DOM](/fr/docs/Web/Web_Components/Using_shadow_DOM) comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot), qui crée un point dans le DOM où un Shadow DOM peut être inséré.
-<div class="note">
- <p><strong>Note :</strong>Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.</p>
-</div>
+> **Note :**Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.
<table class="properties">
- <tbody>
+ <tbody>
<tr>
- <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
- <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model">Contenu transparent</a>.</td>
+ <th scope="row">
+ <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+ >Catégories de contenu</a
+ >
+ </th>
+ <td>
+ <a
+ href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model"
+ >Contenu transparent</a
+ >.
+ </td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
- <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+ <td>
+ <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+ >Contenu de flux</a
+ >.
+ </td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
- <td> Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+ <td>
+ Aucune, la balise d'ouverture et la balise de fermeture sont
+ obligatoires.
+ </td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
@@ -48,67 +60,66 @@ browser-compat: html.elements.content
</tr>
<tr>
<th scope="row">Interface DOM</th>
- <td><a href="/fr/docs/Web/API/HTMLContentElement"><code>HTMLContentElement</code></a></td>
+ <td>
+ <a href="/fr/docs/Web/API/HTMLContentElement"
+ ><code>HTMLContentElement</code></a
+ >
+ </td>
</tr>
</tbody>
- </table>
+</table>
-<h2 id="attributes">Attributs</h2>
+## Attributs
-<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code>&lt;content&gt;</code>.</p>
+Comme pour tous les éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur `<content>`.
-<dl>
- <dt><code>select</code></dt>
- <dd>Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <code>&lt;content&gt;</code>.</dd>
-</dl>
+- `select`
+ - : Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément `<content>`.
-<h2 id="example">Exemple</h2>
+## Exemple
-<p>Voici un exemple simple d'utilisation de l'élément <code>&lt;content&gt;</code>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.</p>
+Voici un exemple simple d'utilisation de l'élément `<content>`. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.
-<div class="note">
- <p><strong>Note :</strong>Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#enabling_web_components_in_firefox">l'activation des composants web dans Firefox</a>).</p>
-</div>
+> **Note :**Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple [l'activation des composants web dans Firefox](/fr/docs/Web/Web_Components#enabling_web_components_in_firefox)).
-<pre class="brush: html">&lt;html&gt;
- &lt;head&gt;&lt;/head&gt;
- &lt;body&gt;
- &lt;!-- Le contenu original auquel on accède via &lt;content&gt; --&gt;
- &lt;div&gt;
- &lt;h4&gt;L'en-tête de mon contenu&lt;/h4&gt;
- &lt;p&gt;Le texte de mon contenu&lt;/p&gt;
- &lt;/div&gt;
+```html
+<html>
+ <head></head>
+ <body>
+ <!-- Le contenu original auquel on accède via <content> -->
+ <div>
+ <h4>L'en-tête de mon contenu</h4>
+ <p>Le texte de mon contenu</p>
+ </div>
- &lt;script&gt;
- // On récupère le &lt;div&gt; ci-avant.
+ <script>
+ // On récupère le <div> ci-avant.
var myContent = document.querySelector('div');
- // On crée un shadow DOM sur le &lt;div&gt;
+ // On crée un shadow DOM sur le <div>
var shadowroot = myContent.createShadowRoot();
// On ajoute un nouvel en-tête dans le shadow DOM
// et on conserve le paragraphe original.
shadowroot.innerHTML =
- '&lt;h2&gt;Titre inséré&lt;/h2&gt; &lt;content select="p"&gt;&lt;/content&gt;';
- &lt;/script&gt;
+ '<h2>Titre inséré</h2> <content select="p"></content>';
+ </script>
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+ </body>
+</html>
+```
-<p>Si vous l'affichez dans un navigateur web, il devrait ressembler à ce qui suit.</p>
+Si vous l'affichez dans un navigateur web, il devrait ressembler à ce qui suit.
-<p><img alt="Contenu de l'exemple" src="content-example.png"></p>
+![Contenu de l'exemple](content-example.png)
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
-<p>Ce document ne fait plus partie d'aucune spécification.</p>
+Ce document ne fait plus partie d'aucune spécification.
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat}}</p>
+{{Compat}}
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
-<ul>
- <li><a href="/fr/docs/Web/Web_Components">Web Components</a></li>
- <li>Les éléments <a href="/fr/docs/Web/HTML/Element/Shadow"><code>&lt;shadow&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code></a></li>
- </ul>
+- [Web Components](/fr/docs/Web/Web_Components)
+- Les éléments [`<shadow>`](/fr/docs/Web/HTML/Element/Shadow), [`<slot>`](/fr/docs/Web/HTML/Element/slot), [`<template>`](/fr/docs/Web/HTML/Element/template)