diff options
Diffstat (limited to 'files/fr/web/css/_colon_any/index.html')
| -rw-r--r-- | files/fr/web/css/_colon_any/index.html | 175 |
1 files changed, 0 insertions, 175 deletions
diff --git a/files/fr/web/css/_colon_any/index.html b/files/fr/web/css/_colon_any/index.html deleted file mode 100644 index f3036e1ee9..0000000000 --- a/files/fr/web/css/_colon_any/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: ':any()' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -<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 > :-moz-any(.b, .c) -</pre> - -<p>est moins rapide que :</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>et celui-ci est rapide :</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .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> |