diff options
Diffstat (limited to 'files/fr/web/css/_doublecolon_part/index.md')
| -rw-r--r-- | files/fr/web/css/_doublecolon_part/index.md | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/files/fr/web/css/_doublecolon_part/index.md b/files/fr/web/css/_doublecolon_part/index.md new file mode 100644 index 0000000000..98bb333590 --- /dev/null +++ b/files/fr/web/css/_doublecolon_part/index.md @@ -0,0 +1,111 @@ +--- +title: '::part()' +slug: 'Web/CSS/::part' +tags: + - '::part' + - CSS + - Draft + - Exp + - NeedsBrowserCompatibility + - NeedsExample + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::part' +--- +<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> + +<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>::part</code></strong> représente n’importe quel élément dans un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">arbre fantôme</a> qui a un attribut {{HTMLAttrxRef("part")}} correspondant.</p> + +<pre class="brush: css no-line-numbers">custom-element::part(foo) { + /* Styles à appliquer à la partie `foo` */ +} +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +{{CSSSyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="<tabbed-custom-element>"><code><tabbed-custom-element></code></h3> + +<h4 id="Arbre_fantôme_<tabbed-custom-element>">Arbre fantôme <code><tabbed-custom-element></code></h4> + +<pre class="brush: html"><style type="text/css"> + *, ::before, ::after { + box-sizing: border-box; + } + + :host { + display: flex; + } +</style> +<div part="tab active"> + Tab 1 +</div> +<div part="tab"> + Tab 2 +</div> +<div part="tab"> + Tab 3 +</div> +</pre> + +<h4 id="Feuille_de_style_chargée_dans_un_arbre_léger">Feuille de style chargée dans un arbre léger</h4> + +<pre class="brush: css"> +tabbed-custom-element::part(tab) { + color: #0c0c0dcc; + border-bottom: transparent solid 2px; +} + +tabbed-custom-element::part(tab):hover { + background-color: #0c0c0d19; + border-color: #0c0c0d33; +} + +tabbed-custom-element::part(tab):hover:active { + background-color: #0c0c0d33; +} + +tabbed-custom-element::part(tab):focus { + box-shadow: + 0 0 0 1px #0a84ff inset, + 0 0 0 1px #0a84ff, + 0 0 0 4px rgba(10, 132, 255, 0.3); +} + +tabbed-custom-element::part(active tab) { + color: #0060df; + border-color: #0a84ff !important; +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#part", "::part")}}</td> + <td>{{Spec2("CSS Shadow Parts")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("css.selectors.part")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur <code>::part()</code></li> + <li>L'attribut {{HTMLattrxref("exportparts")}} qui est utilisé pour exporter les parties d'un arbre <em>shadow</em> imbriqué vers un arbre classique</li> + <li><a href="https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md">Utilisation de CSS Shadow : <code>::part</code> et <code>::theme</code></a></li> +</ul> |