initial commit

1 files changed, 174 insertions, 0 deletions

diff --git a/files/fr/web/css/_colon_any/index.html b/files/fr/web/css/_colon_any/index.html
new file mode 100644
index 0000000000..0178fd736d
--- /dev/null
+++ b/files/fr/web/css/_colon_any/index.html
@@ -0,0 +1,174 @@
+---
+title: ':any()'
+slug: 'Web/CSS/:any'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.</p>
+
+<pre class="brush: css no-line-numbers">/* sélectionne tous les h2 d'une section, d'un article */
+/* d'un aside ou d'un nav */
+/* actuellement pris en charge avec les préfixes */
+/* -moz- et -webkit- */
+:-moz-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+:-webkit-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+</pre>
+
+<div class="note"><strong>Note : </strong>Cette pseudo-classe est en voie d'être standardisée dans la spécification <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> sous le nom de <code>:matches()</code>. Il est probable que la syntaxe et le nom de <code>:-<em>préfixe</em>-any()</code> soit amené à changer pour l'adopter dans un avenir proche.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>selector</code></dt>
+ <dd>Un sélecteur, simple ou multiple, composé d'un <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors">sélecteur CSS simple</a>.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Le sélecteur <strong>ne peut pas</strong> contenir de combinateur ou de pseudo-éléments.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Simplifier_la_sélection_de_listes">Simplifier la sélection de listes</h3>
+
+<p>Par exemple, le code CSS suivant :</p>
+
+<pre class="brush: css">/*  Les listes non-ordonnes utilisent un carré */
+    dans certains cas */
+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é par :</p>
+
+<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */
+   dans certains cas */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>Cependant, on évitera d'utiliser le code suivant (cf. <a href="#Performances">la section sur les performances</a> plus bas) :</p>
+
+<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Simplifier_la_sélection_de_section">Simplifier la sélection de section</h3>
+
+<p>Ceci est particulièrement utile lorsqu'on manipule <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">des sections et des titres</a> HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans <code>:any()</code>, leur appliquer un style peut être beaucoup plus complexe.</p>
+
+<p>Par exemple, sans <code>:any()</code>, appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :</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 */
+/* ... même pas la peine d'y penser */
+</pre>
+
+<p>En utilisant : <code>-any()</code>, cela devient plus simple :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+
+/* Niveau 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+/* Niveau 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Problèmes_avec_les_performances_et_la_spécificité"><a id="Performances">Problèmes avec les performances et la spécificité</a></h3>
+
+<p>Le bug {{bug("561154")}} illustre un problème où la spécificité de <code>:-moz-any()</code> est incorrecte. L'implémentation actuelle considère <code>:-moz-any()</code> comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.</p>
+
+<p>Par exemple :</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>est moins rapide que :</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>et celui-ci est rapide :</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c
+</pre>
+
+<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.selectors.any")}}</p>