initial commit

1 files changed, 283 insertions, 0 deletions

diff --git a/files/fr/web/css/_colon_is/index.html b/files/fr/web/css/_colon_is/index.html
new file mode 100644
index 0000000000..0e30e8c34a
--- /dev/null
+++ b/files/fr/web/css/_colon_is/index.html
@@ -0,0 +1,283 @@
+---
+title: ':is() (:matches(), :any())'
+slug: 'Web/CSS/:is'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:is()</code></strong> prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.</p>
+
+<p>La plupart des navigateurs prennent encore en charge cette fonctionnalité via <code>:matches()</code>, ou via la pseudo-classe préfixée — <code>:any()</code> (anciennes versions de Chrome, Firefox et Safari). <code>:any()</code> fonctionne exactement comme <code>:matches()</code> et <code>:is()</code> mais nécessite l'utilisation de préfixes et ne prend pas en charge <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">les sélecteurs complexes</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>:matches()</code> a été renommé en <code>is()</code> d'après <a href="https://github.com/w3c/csswg-drafts/issues/3258">l'<em>issue</em> 3258 du CSSWG</a>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel paragraphe survolé
+   qui se trouve au sein d'un header, main, ou
+   footer */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* La notation précédente est équivalente à */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+
+/* La version rétro-compatible avec :-*-any()  */
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-webkit-any(header, main, footer) p:hover{
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_fonctionnant_pour_les_différents_navigateurs">Exemple fonctionnant pour les différents navigateurs</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;p&gt;Voici un paragraphe dans un en-tête.&lt;/p&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;p&gt;Mon premier élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;p&gt;Mon deuxième élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;Et un paragraphe de pied de page&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Votre navigateur ne prend pas en charge :is(), :matches() ou :any()');
+      }
+    }
+  }
+}
+
+for(let i = 0; i &lt; matchedItems.length; i++) {
+  applyHandler(matchedItems[i]);
+}
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('Ce paragraphe est à l\'intérieur d\'un élément ' + e.target.parentNode.nodeName);
+  });
+}</pre>
+
+<p>{{EmbedLiveSample('Exemple_fonctionnant_pour_les_différents_navigateurs', '100%', '300')}}</p>
+
+<h3 id="Simplifier_les_listes_de_sélecteurs">Simplifier les listes de sélecteurs</h3>
+
+<p>La pseudo-classe <code>:matches()</code> permet de simplifier largement les sélecteurs CSS. Ainsi, la règle suivante :</p>
+
+<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
+/* utilisent un carré comme puce */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>pourra être remplacée par :</p>
+
+<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
+/* utilisent un carré comme puce */
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>En revanche, le modèle d'usage suivant n'est pas recommandée (cf. <a href="#Issues_with_performance_and_specificity">la section qui suit sur les performances</a>) :</p>
+
+<pre class="brush: css">:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Notes" name="Notes">Simplifier les sélecteurs de section</h3>
+
+<p>La pseudo-classe <code>:matches</code> est particulièrement utile lorsqu'on manipule les <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections et en-têtes</a> HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans <code>:matches()</code>) s'avèrerait plutôt compliqué.</p>
+
+<p>Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser <code>:matches()</code>, on obtient ces règles plutôt compliquées :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Niveau 3 */
+/* … j'ai abandonné */
+</pre>
+
+<p>Avec <code>:is()</code>, c'est plus simple :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Niveau 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Éviter_linvalidation_dune_liste_de_sélecteur">Éviter l'invalidation d'une liste de sélecteur</h3>
+
+<p>À la différence des listes de sélecteurs, la pseudo-classe <code>:is()</code> ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur.</p>
+
+<pre class="brush: css">:is(:valid, :incompatible) {
+  ...
+}
+</pre>
+
+<p>Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler <code>:valid</code> même si les navigateurs ne prennent pas en charge le sélecteur <code>:incompatible</code>. En revanche :</p>
+
+<pre class="brush: css">:valid, :incompatible {
+  ...
+}</pre>
+
+<p>L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge <code>:incompatible</code>, même si <code>:valid</code> est bien pris en charge.</p>
+
+<h2 id="Notes_2">Notes</h2>
+
+<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Problèmes de performances avec <code>any():</code> et la spécificité</h3>
+
+<p>{{Bug(561154)}} suit un problème de spécificité relatif à <code>:-moz-any()</code>. L'implémentation  place <code>:-moz-any()</code> dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur.</p>
+
+<p>Ainsi :</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>sera plus lent que</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>et cette dernière version sera plus rapide :</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c</pre>
+
+<p><code>:is()</code> doit permettre de corriger de tels problèmes.</p>
+
+<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("CSS4 Selectors", "#matches-pseudo", ":is()")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.is")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme <code>is()</code>, avec une spécificité nulle</li>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+</ul>