diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-17 20:15:31 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-17 20:15:31 +0200 |
| commit | 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f (patch) | |
| tree | 09fe8f8a5fae5235b62918e8b7161fd34480b8d0 /files/fr | |
| parent | 3518481e9190f19bbf81741704f45cb3c1761758 (diff) | |
| download | translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.gz translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.bz2 translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.zip | |
Prepare CSS section for Markdown conversion (#2307)
* Removes summary / seoSummary classes
* Remove div class=hidden and some notranslate
* Remove hidden paragraphs for live sample
* Remove hidden paragraphs for live sample - take 2
* Remove other hidden div and p - updated w/ en-US when necessary
* Remove ids
* Remove notranslate class
* Fix typo which broke build
* remove div class='index'
* remove useless <span style=...>
* remove non typographical sups
* remove non typographical subs
* remove blockindicator and fix some div.note
* fix build :/
* remove useless classes
* fix build - again :x
* fix unhandled elements 1/N + embedlivesample build fail
* fix div.warning
* Fix fixable flaws - hoping to reduce error conversion
* Remove unecessary images (same as en-US)
* fix div notes
* fix warnings
* fix some dl handling
* fix dls
* Fix a bunch of conversion errors
* rm unhandled figures
* Fix other set of issues and revamp easing-function page
* Fix some one-offs conversion errors (incl. deki files)
* fix the rest of one-off conversion issues
* Fix last dl standing
Diffstat (limited to 'files/fr')
652 files changed, 3554 insertions, 6838 deletions
diff --git a/files/fr/web/css/--_star_/index.html b/files/fr/web/css/--_star_/index.html index 99a4c1f7b0..456b7022d5 100644 --- a/files/fr/web/css/--_star_/index.html +++ b/files/fr/web/css/--_star_/index.html @@ -42,7 +42,7 @@ translation_of: Web/CSS/--* <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[2,3]">:root { +<pre class="brush: css">:root { --premiere-couleur: #488cff; --seconde-couleur: #ffff8c; } diff --git a/files/fr/web/css/-moz-context-properties/index.html b/files/fr/web/css/-moz-context-properties/index.html index edda2fb4cc..c7cf7e321f 100644 --- a/files/fr/web/css/-moz-context-properties/index.html +++ b/files/fr/web/css/-moz-context-properties/index.html @@ -67,7 +67,7 @@ translation_of: Web/CSS/-moz-context-properties <p>Ici, l'attribut <code>src</code> de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <code><rect></code> est paramétré afin de récupérer les valeurs <code>fill</code> et <code>stroke</code> telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément <code><img></code> grâce aux mots-clés <code>context-fill</code>/<code>context-stroke</code>. On utilise aussi une couleur de secours pour le remplissage (<code>fill</code>) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.</p> <div class="note"> -<p><strong>Note </strong>: vous pouvez consulter <a href="https://mdn.github.io/css-examples/moz-context-properties/">un exemple complet sur notre dépôt Github</a>.</p> +<p><strong>Note :</strong> vous pouvez consulter <a href="https://mdn.github.io/css-examples/moz-context-properties/">un exemple complet sur notre dépôt Github</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/-moz-float-edge/index.html b/files/fr/web/css/-moz-float-edge/index.html index 0d0eed3a7d..a81710c8d9 100644 --- a/files/fr/web/css/-moz-float-edge/index.html +++ b/files/fr/web/css/-moz-float-edge/index.html @@ -58,7 +58,7 @@ translation_of: Web/CSS/-moz-float-edge <h3 id="HTML">HTML</h3> -<pre class="html prettyprint"><div class="box"> +<pre class="html"><div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.html b/files/fr/web/css/-moz-force-broken-image-icon/index.html index df4536f14d..58e1ca993b 100644 --- a/files/fr/web/css/-moz-force-broken-image-icon/index.html +++ b/files/fr/web/css/-moz-force-broken-image-icon/index.html @@ -19,7 +19,8 @@ translation_of: Web/CSS/-moz-force-broken-image-icon <dl> <dt>{{cssxref("<integer>")}}</dt> <dd>Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}}. <code>0</code> indique que seul l'attribut <code>alt</code> doit être affiché. - <div class="note"><strong>Note :</strong> Même si la valeur est <code>1</code>, l'attribut <code>alt</code> sera affiché. Voir ci-après.</div> + <div class="note"> + <p><strong>Note :</strong> Même si la valeur est <code>1</code>, l'attribut <code>alt</code> sera affiché. Voir ci-après.</p></div> </dd> </dl> @@ -45,7 +46,9 @@ translation_of: Web/CSS/-moz-force-broken-image-icon <p>{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}</p> -<div class="note"><strong>Note :</strong> Si <code>-moz-force-broken-image-icon</code> a la valeur <code>1</code> et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut <code>alt</code> sera masqué.</div> +<div class="note"> + <p><strong>Note :</strong> Si <code>-moz-force-broken-image-icon</code> a la valeur <code>1</code> et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut <code>alt</code> sera masqué.</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html index 13259534a0..4b4cbfb209 100644 --- a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html +++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-bottomleft <p>{{EmbedLiveSample("Exemples")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.html b/files/fr/web/css/-moz-outline-radius-bottomright/index.html index 831cb29e39..8c4e1a813a 100644 --- a/files/fr/web/css/-moz-outline-radius-bottomright/index.html +++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-bottomright <p>{{EmbedLiveSample("Example")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.html b/files/fr/web/css/-moz-outline-radius-topleft/index.html index 28fef48dc0..825b0b8e08 100644 --- a/files/fr/web/css/-moz-outline-radius-topleft/index.html +++ b/files/fr/web/css/-moz-outline-radius-topleft/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-topleft <p>{{EmbedLiveSample("Exemples")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.html b/files/fr/web/css/-moz-outline-radius-topright/index.html index 962f74ece2..df414e6d10 100644 --- a/files/fr/web/css/-moz-outline-radius-topright/index.html +++ b/files/fr/web/css/-moz-outline-radius-topright/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-topright <p>{{EmbedLiveSample("Exemples")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-outline-radius/index.html b/files/fr/web/css/-moz-outline-radius/index.html index 4662069831..f91a602fcb 100644 --- a/files/fr/web/css/-moz-outline-radius/index.html +++ b/files/fr/web/css/-moz-outline-radius/index.html @@ -36,7 +36,9 @@ translation_of: Web/CSS/-moz-outline-radius <h3 id="Valeurs">Valeurs</h3> -<div class="note"><strong>Note :</strong> Les valeurs pour les coefficients elliptiques et les valeurs de type <code><percentage></code> respectent la même syntaxe que pour {{cssxref("border-radius")}}.</div> +<div class="note"> + <p><strong>Note :</strong> Les valeurs pour les coefficients elliptiques et les valeurs de type <code><percentage></code> respectent la même syntaxe que pour {{cssxref("border-radius")}}.</p> +</div> <p>Une, deux, trois ou quatre valeurs <code><outline-radius></code> dont chacune peut être de type :</p> @@ -93,7 +95,7 @@ translation_of: Web/CSS/-moz-outline-radius <p>{{EmbedLiveSample('Exemples', '200', '200')}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-user-focus/index.html b/files/fr/web/css/-moz-user-focus/index.html index 76049ca339..62492eb50c 100644 --- a/files/fr/web/css/-moz-user-focus/index.html +++ b/files/fr/web/css/-moz-user-focus/index.html @@ -24,7 +24,9 @@ translation_of: Web/CSS/-moz-user-focus <p>En utilisant la valeur <code>ignore</code>, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation.</p> -<div class="note"><strong>Note :</strong> Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément <code>textbox</code> en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du <code>textbox</code> et que l'élément reçoit le focus. On peut empêcher le <code>textbox</code> de prendre le focus clavier en passant son index de tabulation à <code>-1</code>, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements <code>mousedown</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément <code>textbox</code> en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du <code>textbox</code> et que l'élément reçoit le focus. On peut empêcher le <code>textbox</code> de prendre le focus clavier en passant son index de tabulation à <code>-1</code>, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements <code>mousedown</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/-webkit-box-reflect/index.html b/files/fr/web/css/-webkit-box-reflect/index.html index d84d50ceb8..856a9ca5b0 100644 --- a/files/fr/web/css/-webkit-box-reflect/index.html +++ b/files/fr/web/css/-webkit-box-reflect/index.html @@ -30,7 +30,9 @@ translation_of: Web/CSS/-webkit-box-reflect -webkit-box-reflect: unset; </pre> -<div class="warning"><strong>Attention !</strong> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element", "element()")}}.</div> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -51,7 +53,7 @@ translation_of: Web/CSS/-webkit-box-reflect <h2 id="Spécifications">Spécifications</h2> -<p>Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element", "element()")}}.</p> +<p>Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element()", "element()")}}.</p> <p>{{cssinfo}}</p> @@ -62,7 +64,7 @@ translation_of: Web/CSS/-webkit-box-reflect <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">La documentation Apple</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">La documentation Apple</a></li> <li><a href="https://www.webkit.org/blog/182/css-reflections/">La spécification WebKit</a></li> - <li>L'article de Lea Verou sur les réflexions CSS <a class="external" href="https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">en utilisant les fonctionnalités en voie de standardisation</a></li> + <li>L'article de Lea Verou sur les réflexions CSS <a href="https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">en utilisant les fonctionnalités en voie de standardisation</a></li> </ul> diff --git a/files/fr/web/css/-webkit-line-clamp/index.html b/files/fr/web/css/-webkit-line-clamp/index.html index d869807051..26895d4690 100644 --- a/files/fr/web/css/-webkit-line-clamp/index.html +++ b/files/fr/web/css/-webkit-line-clamp/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/-webkit-line-clamp <p>Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification <a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer <code>-webkit-line-clamp</code>.</p> </div> diff --git a/files/fr/web/css/-webkit-mask-attachment/index.html b/files/fr/web/css/-webkit-mask-attachment/index.html index 1a65e9de55..f278d89b0f 100644 --- a/files/fr/web/css/-webkit-mask-attachment/index.html +++ b/files/fr/web/css/-webkit-mask-attachment/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/-webkit-mask-attachment --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p id="Summary">Si la propriété {{cssxref("-webkit-mask-image")}} est définie, <strong><code>-webkit-mask-attachment</code></strong> permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.</p> +<p>Si la propriété {{cssxref("-webkit-mask-image")}} est définie, <strong><code>-webkit-mask-attachment</code></strong> permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.</p> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ -webkit-mask-attachment: scroll; diff --git a/files/fr/web/css/-webkit-text-fill-color/index.html b/files/fr/web/css/-webkit-text-fill-color/index.html index f0d8ef51c0..f00bc2ae33 100644 --- a/files/fr/web/css/-webkit-text-fill-color/index.html +++ b/files/fr/web/css/-webkit-text-fill-color/index.html @@ -41,7 +41,7 @@ translation_of: Web/CSS/-webkit-text-fill-color <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">p { +<pre class="brush: css">p { margin: 0; font-size: 3em; -webkit-text-fill-color: green; @@ -74,8 +74,7 @@ translation_of: Web/CSS/-webkit-text-fill-color <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color" hreflang="en" lang="en">Référence CSS Safari<br> - <small lang="en-US">'-webkit-text-fill-color' dans ce document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color">Référence CSS Safari -webkit-text-fill-color' dans ce document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.html b/files/fr/web/css/-webkit-text-stroke-color/index.html index 9ab30e149d..8717f6e1aa 100644 --- a/files/fr/web/css/-webkit-text-stroke-color/index.html +++ b/files/fr/web/css/-webkit-text-stroke-color/index.html @@ -57,14 +57,10 @@ translation_of: Web/CSS/-webkit-text-stroke-color } </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var colorPicker = document.querySelector("input"); +<pre class="brush: js hidden">var colorPicker = document.querySelector("input"); colorPicker.addEventListener("change", function(evt) { document.querySelector("p").style.webkitTextStrokeColor = evt.target.value; });</pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -87,8 +83,7 @@ colorPicker.addEventListener("change", function(evt) { <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Référence CSS Safari<br> - <small lang="en-US">'-webkit-text-stroke-color' dans ce document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color">Référence CSS Safari -webkit-text-stroke-color dans ce document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.html b/files/fr/web/css/-webkit-text-stroke-width/index.html index c79d9aad32..9e34011338 100644 --- a/files/fr/web/css/-webkit-text-stroke-width/index.html +++ b/files/fr/web/css/-webkit-text-stroke-width/index.html @@ -96,8 +96,7 @@ translation_of: Web/CSS/-webkit-text-stroke-width <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Référence CSS Safari<br> - <small lang="en-US">'-webkit-text-stroke-width' dans ce document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width">Référence CSS Safari -webkit-text-stroke-width dans ce document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/-webkit-text-stroke/index.html b/files/fr/web/css/-webkit-text-stroke/index.html index 2f26e7941b..1b44d52d3b 100644 --- a/files/fr/web/css/-webkit-text-stroke/index.html +++ b/files/fr/web/css/-webkit-text-stroke/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/-webkit-text-stroke <p>La propriété <strong><code>-webkit-text-stroke</code></strong> permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés {{cssxref("-webkit-text-stroke-width")}} et {{cssxref("-webkit-text-stroke-color")}}.</p> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs de largeur et de couleur */ +<pre class="brush:css no-line-numbers">/* Valeurs de largeur et de couleur */ -webkit-text-stroke: 4px navy; /* Valeurs globales */ @@ -40,7 +40,7 @@ translation_of: Web/CSS/-webkit-text-stroke <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4] notranslate">#exemple { +<pre class="brush: css">#exemple { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; @@ -48,7 +48,7 @@ translation_of: Web/CSS/-webkit-text-stroke <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p id="exemple">Le contour de ce texte est rouge.</p></pre> +<pre class="brush: html"><p id="exemple">Le contour de ce texte est rouge.</p></pre> <h3 id="Résultat">Résultat</h3> @@ -71,8 +71,7 @@ translation_of: Web/CSS/-webkit-text-stroke <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" hreflang="en" lang="en">Référence CSS Safari<br> - <small lang="en-US">'-webkit-text-stroke' dans ce document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke">Référence CSS Safari -webkit-text-stroke dans ce document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/@counter-style/fallback/index.html b/files/fr/web/css/@counter-style/fallback/index.html index a1ac0eea87..92c54c2c55 100644 --- a/files/fr/web/css/@counter-style/fallback/index.html +++ b/files/fr/web/css/@counter-style/fallback/index.html @@ -41,7 +41,7 @@ fallback: custom-gangnam-style; <h3 id="HTML">HTML</h3> -<pre class="brush: html" id="htmlOutput"><ul class="exemple"> +<pre class="brush: html"><ul class="exemple"> <li>Un</li> <li>Deux</li> <li>Trois</li> diff --git a/files/fr/web/css/@counter-style/index.html b/files/fr/web/css/@counter-style/index.html index c9c649758c..6a557b88d4 100644 --- a/files/fr/web/css/@counter-style/index.html +++ b/files/fr/web/css/@counter-style/index.html @@ -152,7 +152,7 @@ ul { <h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3> <ul> - <li>Gecko permettait d'utiliser <code>none</code> comme valeur pour les descripteurs <code>system</code> et <code>fallback</code> de <code>@counter-style</code> alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).</li> + <li>Gecko permettait d'utiliser <code>none</code> comme valeur pour les descripteurs <code>system</code> et <code>fallback</code> de <code>@counter-style</code> alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).</li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/@counter-style/range/index.html b/files/fr/web/css/@counter-style/range/index.html index 29d5eeda87..4bc4ce55cd 100644 --- a/files/fr/web/css/@counter-style/range/index.html +++ b/files/fr/web/css/@counter-style/range/index.html @@ -46,8 +46,7 @@ range: infinite 6, 10 infinite; <dt><code>auto</code></dt> <dd>L'intervalle dépend du système choisi pour le compteur comme indiqué ci-avant.</dd> <dt><code>[ [ | infinite ]{2} ]#</code></dt> - <dd>Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé <code>infinite</code> est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste.</dd> - <dd>Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.</dd> + <dd>Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé <code>infinite</code> est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste. Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/@counter-style/system/index.html b/files/fr/web/css/@counter-style/system/index.html index 847ba6fa2f..07ba664616 100644 --- a/files/fr/web/css/@counter-style/system/index.html +++ b/files/fr/web/css/@counter-style/system/index.html @@ -38,31 +38,21 @@ system: extends decimal; <dl> <dt><code>cyclic</code></dt> - <dd>Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols")}}.</dd> + <dd>Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols()")}}.</dd> <dt><code>fixed</code></dt> <dd>Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur <code>symbols</code>. On peut éventuellement ajouter un entier (valeur {{cssxref("integer")}}) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est <code>1</code>.</dd> <dt><code>symbolic</code></dt> <dd>Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur <code>symbols</code>. Ce système de compteur ne fonctionne que pour les valeurs positives.</dd> <dt><code>alphabetic</code></dt> - <dd>Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres <code>a</code> à <code>z</code> sont définies comme symbole dans un style de compteur dont le système est <code>alphabetic</code>, les 26 premières représentations du compteur seront <code>a</code>, <code>b</code>, etc. jusqu'à <code>z</code> (jusqu'ici, le comportement est identique à celui obtenu grâce à <code>symbolic</code>) mais ensuite, le système poursuivra avec <code>aa</code>, <code>ab</code>, <code>ac</code>, etc.<br> - <br> + <dd>Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres <code>a</code> à <code>z</code> sont définies comme symbole dans un style de compteur dont le système est <code>alphabetic</code>, les 26 premières représentations du compteur seront <code>a</code>, <code>b</code>, etc. jusqu'à <code>z</code> (jusqu'ici, le comportement est identique à celui obtenu grâce à <code>symbolic</code>) mais ensuite, le système poursuivra avec <code>aa</code>, <code>ab</code>, <code>ac</code>, etc. Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.</dd> <dt><code>numeric</code></dt> - <dd>Les symboles sont interprétés comme les chiffres d'un <a href="https://fr.wikipedia.org/wiki/Notation_positionnelle">système de notation positionnelle</a>. Ce système est très proche de celui qu'on peut obtenir avec <code>alphabetic</code> sauf que, pour ce dernier, le premier symbole fourni par <code>symbols</code> sera interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite alors que pour <code>numeric</code>, le premier symbole est interprété comme 0, le suivant comme <code>1</code>, puis <code>2</code> etc.<br> - <br> - Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec <code>symbols</code>. Le premier symbole qui est fourni sera interprété comme <code>0</code>. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de <code>0</code> à <code>9</code> comme symboles, on obtiendra le même résultat qu'avec le système décimal.</dd> + <dd>Les symboles sont interprétés comme les chiffres d'un <a href="https://fr.wikipedia.org/wiki/Notation_positionnelle">système de notation positionnelle</a>. Ce système est très proche de celui qu'on peut obtenir avec <code>alphabetic</code> sauf que, pour ce dernier, le premier symbole fourni par <code>symbols</code> sera interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite alors que pour <code>numeric</code>, le premier symbole est interprété comme 0, le suivant comme <code>1</code>, puis <code>2</code> etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec <code>symbols</code>. Le premier symbole qui est fourni sera interprété comme <code>0</code>. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de <code>0</code> à <code>9</code> comme symboles, on obtiendra le même résultat qu'avec le système décimal.</dd> <dt><code>additive</code></dt> - <dd>Ce système peut être utilisé pour représenter <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">des systèmes de numérotations additives</a> telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent.<br> - <br> - Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide.</dd> - <dd> - <p>On voit dans l'exemple ci-après que <code>range</code> est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec <code>decimal</code> (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme <code>upper-roman</code> ou <code>lower-roman</code> afin d'éviter de réinventer la roue.</p> + <dd>Ce système peut être utilisé pour représenter <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">des systèmes de numérotations additives</a> telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent. Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide. On voit dans l'exemple ci-après que <code>range</code> est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec <code>decimal</code> (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme <code>upper-roman</code> ou <code>lower-roman</code> afin d'éviter de réinventer la roue. </dd> <dt><code>extends</code></dt> - <dd>Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système <code>extends</code> et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé.<br> - <br> - Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur <code>symbols</code> ou <code>additive-symbols</code>. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal.</dd> - <dd>Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur <code>lower-alpha</code> mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir <code>(a)</code> <code>(b)</code> etc).</dd> + <dd>Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système <code>extends</code> et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé. Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur <code>symbols</code> ou <code>additive-symbols</code>. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal. Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur <code>lower-alpha</code> mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir <code>(a)</code> <code>(b)</code> etc).</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -334,5 +324,5 @@ system: extends decimal; <li>{{cssxref("list-style")}},</li> <li>{{cssxref("list-style-image")}},</li> <li>{{cssxref("list-style-position")}},</li> - <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li> + <li>{{cssxref("symbols()", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li> </ul> diff --git a/files/fr/web/css/@font-face/ascent-override/index.html b/files/fr/web/css/@font-face/ascent-override/index.html index 54a738dcdc..dbbeb8eaa3 100644 --- a/files/fr/web/css/@font-face/ascent-override/index.html +++ b/files/fr/web/css/@font-face/ascent-override/index.html @@ -6,7 +6,7 @@ translation_of: 'Web/CSS/@font-face/ascent-override' --- <p>{{CSSRef}}</p> -<p>Le descripteur CSS <strong><code>ascent-override</code></strong> définit la mesure du jambage supérieur (ascendant) de la police (voir la <a class="external" href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p> +<p>Le descripteur CSS <strong><code>ascent-override</code></strong> définit la mesure du jambage supérieur (ascendant) de la police (voir la <a href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/css/@font-face/descent-override/index.html b/files/fr/web/css/@font-face/descent-override/index.html index 23655a5f02..6805fdd77f 100644 --- a/files/fr/web/css/@font-face/descent-override/index.html +++ b/files/fr/web/css/@font-face/descent-override/index.html @@ -6,7 +6,7 @@ translation_of: 'Web/CSS/@font-face/descent-override' --- <p>{{CSSRef}}</p> -<p>Le descripteur CSS <strong><code>descent-override</code></strong> définit la mesure du jambage inférieur (descendant) de la police (voir la <a class="external" href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p> +<p>Le descripteur CSS <strong><code>descent-override</code></strong> définit la mesure du jambage inférieur (descendant) de la police (voir la <a href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/css/@font-face/font-display/index.html b/files/fr/web/css/@font-face/font-display/index.html index 798e350ac7..2b89c8661d 100644 --- a/files/fr/web/css/@font-face/font-display/index.html +++ b/files/fr/web/css/@font-face/font-display/index.html @@ -57,7 +57,7 @@ font-display: optional;</pre> <h2 id="Exemples">Exemples</h2> -<pre class="brush: css; highlight[7]">@font-face { +<pre class="brush: css">@font-face { font-family: FonteExemple; src: url(/chemin/vers/fonts/examplefont.woff) format('woff'), url(/chemin/vers/fonts/examplefont.eot) format('eot'); diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html index 66d3a0211d..505de0c2ac 100644 --- a/files/fr/web/css/@font-face/font-stretch/index.html +++ b/files/fr/web/css/@font-face/font-stretch/index.html @@ -130,10 +130,10 @@ font-stretch: condensed ultra-condensed;; <h2 id="Accessibilité">Accessibilité</h2> -<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p> +<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)</a></li> </ul> diff --git a/files/fr/web/css/@font-face/font-style/index.html b/files/fr/web/css/@font-face/font-style/index.html index c9776cadef..672e77a232 100644 --- a/files/fr/web/css/@font-face/font-style/index.html +++ b/files/fr/web/css/@font-face/font-style/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/@font-face/font-style --- <div>{{CSSRef}}</div> -<p>Le descripteur <strong><code>font-style</code></strong>, associé à <a href="/fr/docs/Web/CSS/Règles_@">la règle @</a> {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.</p> +<p>Le descripteur <strong><code>font-style</code></strong>, associé à <a href="/fr/docs/Web/CSS/At-rule">la règle @</a> {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.</p> <p>Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur <code>font-style</code> peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.</p> @@ -49,11 +49,11 @@ font-style: oblique 30deg 50deg;</pre> src: url('garamond.ttf'); }</pre> -<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p> +<p><img alt="unstyled Garamond" src="garamondunstyled.jpg"></p> <p>La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.</p> -<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p> +<p><img alt="artificially sloped garamond" src="garamondartificialstyle.jpg"></p> <p>En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur <code>src</code> et indiquer que c'est une police italique via <code>font-style</code>. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.</p> @@ -64,7 +64,7 @@ font-style: oblique 30deg 50deg;</pre> font-style: italic; }</pre> -<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p> +<p><img alt="italic garamond" src="garamonditalic.jpg"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/@font-feature-values/index.html b/files/fr/web/css/@font-feature-values/index.html index a6363edbf5..cf733cde7b 100644 --- a/files/fr/web/css/@font-feature-values/index.html +++ b/files/fr/web/css/@font-feature-values/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/@font-feature-values --- <div>{{CSSRef}}</div> -<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@font-feature-values</code></strong> permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.</p> +<p>La <a href="/fr/docs/Web/CSS/At-rule">règle @</a> <strong><code>@font-feature-values</code></strong> permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.</p> <pre class="brush: css">@font-feature-values Font One { /* On active la caractéristique nice-style @@ -34,24 +34,24 @@ translation_of: Web/CSS/@font-feature-values } </pre> -<p>La règle @ <code>@font-feature-values</code> peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein <a href="/fr/docs/Web/CSS/Règles_@" title="CSS/At-rule#Conditional_Group_Rules">d'un groupe de règles conditionnelles</a>.</p> +<p>La règle @ <code>@font-feature-values</code> peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein <a href="/fr/docs/Web/CSS/At-rule" title="CSS/At-rule#Conditional_Group_Rules">d'un groupe de règles conditionnelles</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> <h3 id="Blocs_liés_aux_caractéristiques">Blocs liés aux caractéristiques</h3> <dl> - <dt><a name="@swash"><code>@swash</code></a></dt> + <dt><code>@swash</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "swash()", "#swash()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd> - <dt><a name="@annotation"><code>@annotation</code></a></dt> + <dt><code>@annotation</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd> - <dt><a name="@ornaments"><code>@ornaments</code></a></dt> + <dt><code>@ornaments</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}}. La caractéristique d'ornement est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd> - <dt><a name="@stylistic"><code>@stylistic</code></a></dt> + <dt><code>@stylistic</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd> - <dt><a name="@styleset"><code>@styleset</code></a></dt> + <dt><code>@styleset</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : <code>ident1: 2 4 12 1</code> correspondra aux valeurs OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Les valeurs supérieures à <code>99</code> sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.</dd> - <dt><a name="@character-variant"><code>@character-variant</code></a></dt> + <dt><code>@character-variant</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : <code>ident1: 2</code> correspond à <code>cv02=1</code> et <code>ident2: 2 4</code> correspond à <code>cv02)4</code>, en revanche <code>ident2: 2 4 5</code> est invalide.</dd> </dl> diff --git a/files/fr/web/css/@keyframes/index.html b/files/fr/web/css/@keyframes/index.html index dd8fb53d18..9856d8f815 100644 --- a/files/fr/web/css/@keyframes/index.html +++ b/files/fr/web/css/@keyframes/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/@keyframes <p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle </a><strong><code>@keyframes</code></strong> permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec <a href="/fr/docs/Web/CSS/CSS_Transitions">les transitions</a>.</p> -<pre class="brush: css no-line-numbers notranslate">@keyframes slidein { +<pre class="brush: css no-line-numbers">@keyframes slidein { from { margin-left: 100%; width: 300%; @@ -45,7 +45,7 @@ translation_of: Web/CSS/@keyframes <p>Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :</p> -<pre class="brush: css notranslate">@keyframes identifier { +<pre class="brush: css">@keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } @@ -61,7 +61,7 @@ translation_of: Web/CSS/@keyframes <p>Les déclarations qui utilisent <code>!important</code> dans une description d'étape sont ignorées</p> -<pre class="brush: css notranslate">@keyframes important1 { +<pre class="brush: css">@keyframes important1 { from { margin-top: 50px; } 50% { margin-top: 150px !important; } /* ignorée */ to { margin-top: 100px; } @@ -98,7 +98,7 @@ translation_of: Web/CSS/@keyframes <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { animation-duration: 25s; animation-name: slidein; } @@ -122,7 +122,7 @@ translation_of: Web/CSS/@keyframes <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Le Chat grimaça en apercevant Alice. Elle trouva qu’il avait l’air bon enfant, et cependant il avait de très longues griffes et une grande rangée de dents ; diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html index 36e47eb9d4..10c33af0f5 100644 --- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html @@ -11,10 +11,10 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio --- <div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}</div> -<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p> +<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p> <div class="warning"> -<p><strong>Ne pas utiliser cette fonctionnalité ! </strong>La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br> +<p><strong>Attention :</strong> Ne pas utiliser cette fonctionnalité ! La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br> <br> <code>-moz-device-pixel-ratio</code> peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et <code>-webkit-device-pixel-ratio</code> peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge <code>dppx</code>. Par exemple :</p> @@ -23,10 +23,12 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio (min-resolution: 2dppx), /* La méthode standard */ (min-resolution: 192dpi) /* Utilisée si dppx n'est pas gérée */ </pre> -<p>Voir <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p> +<p>Voir <a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p> </div> -<div class="note"><strong>Note</strong> : Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html index aca491ee04..814c43f592 100644 --- a/files/fr/web/css/@media/-ms-high-contrast/index.html +++ b/files/fr/web/css/@media/-ms-high-contrast/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/-ms-high-contrast --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p> +<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#cibler_des_caract%c3%a9ristiques_m%c3%a9dia">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p> <p>Cette caractéristique média s'applique aux média de type matriciel (<em>bitmap</em>). Elle ne gère pas les préfixes <code>min</code> et <code>max</code>.</p> @@ -59,7 +59,7 @@ original_slug: Web/CSS/-ms-high-contrast } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <p>Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.</p> diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html index 451c83f18d..3d96ba5464 100644 --- a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html +++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -12,10 +12,10 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio <p><strong><code>-webkit-device-pixel-ratio</code></strong> est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.</p> -<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#Unités"><code>dppx</code></a>.</p> +<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#unités"><code>dppx</code></a>.</p> <div class="warning"> -<p><strong>Attention !</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p> +<p><strong>Attention :</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio <dl> <dt>{{cssxref("<number>")}}</dt> - <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd> + <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd> </dl> <h2 id="Implémentation">Implémentation</h2> @@ -93,8 +93,7 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br> - <small lang="en-US">'media query extensions' in that document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference 'media query extensions'.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.html b/files/fr/web/css/@media/-webkit-transform-3d/index.html index 35c5545966..887649670d 100644 --- a/files/fr/web/css/@media/-webkit-transform-3d/index.html +++ b/files/fr/web/css/@media/-webkit-transform-3d/index.html @@ -47,8 +47,7 @@ translation_of: Web/CSS/@media/-webkit-transform-3d <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br> - <small lang="en-US">'media query extensions' in that document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference media query extensions in that document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html index 14bdf4689b..0999d4619e 100644 --- a/files/fr/web/css/@media/aspect-ratio/index.html +++ b/files/fr/web/css/@media/aspect-ratio/index.html @@ -17,68 +17,25 @@ translation_of: Web/CSS/@media/aspect-ratio <h2 id="Exemples">Exemples</h2> -<div class="note"> -<p><strong>Note :</strong> L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (<em>viewport</em>), vous pouvez redimensionner l'<code>iframe</code> afin d'observer l'effet d'<code>aspect-ratio</code>.</p> -</div> +<h3 id="exemples_de_valeurs_pour_aspect-ratio">Exemples de valeurs pour aspect-ratio</h3> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><label id="wf" for="w">width:165</label> -<input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> -<label id="hf" for="w">height:165</label> -<input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> - -<iframe id="outer" src="data:text/html, - <style> - @media (min-aspect-ratio: 8/5) { - div { - background: %239af; - } - } - @media (max-aspect-ratio: 3/2) { - div { - background: %239ff; - } - } - @media (aspect-ratio: 1/1) { - div { - background: %23f9a; - } - } - </style> - <div id='inner'> - Vous pouvez redimensionner le viewport en largeur - et en hauteur pour voir l'effet. - </div> -"> - -</iframe> +<pre class="brush: css"> +aspect-ratio: 1 / 1; +aspect-ratio: 16 / 9; </pre> -<h3 id="CSS">CSS</h3> +<h2 id="Correspondance_entre_width_et_height_et_aspect-ratio">Correspondance entre width et height et aspect-ratio</h2> -<pre class="brush: css">iframe{ - display:block; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> +<p>Les navigateurs ont ajouté une propriété <code>aspect-ratio</code> interne qui s'applique aux <a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés</a> et aux autres éléments associés qui acceptent des attributs <code>width</code> et <code>height</code>. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.</p> -<pre class="brush: js">outer.style.width=outer.style.height="165px" +<p>Pour Firefox, la feuille de style interne ressemble à :</p> -w.onchange=w.oninput=function(){ - outer.style.width=w.value+"px" - wf.textContent="width:"+w.value -} -h.onchange=h.oninput=function(){ - outer.style.height=h.value+"px" - hf.textContent="height:"+h.value +<pre class="brush: css"> +img, input[type="image"], video, embed, iframe, marquee, object, table { + aspect-ratio: attr(width) / attr(height); }</pre> -<h3 id="Résultat">Résultat</h3> - -<div style="overflow: auto;"> -<p>{{EmbedLiveSample('Exemples')}}</p> -</div> +<p>Pour en savoir plus, vous pouvez consulter <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">Définir la hauteur et largeur des images redevient important (en anglais)</a>.</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/@media/forced-colors/index.html b/files/fr/web/css/@media/forced-colors/index.html index d347ae71b9..ab75ac487c 100644 --- a/files/fr/web/css/@media/forced-colors/index.html +++ b/files/fr/web/css/@media/forced-colors/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/@media/forced-colors <p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>forced-colors</code></strong> est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur</p> </div> diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.html b/files/fr/web/css/@media/prefers-color-scheme/index.html index a240eb36c8..4476aacdf7 100644 --- a/files/fr/web/css/@media/prefers-color-scheme/index.html +++ b/files/fr/web/css/@media/prefers-color-scheme/index.html @@ -10,8 +10,8 @@ translation_of: Web/CSS/@media/prefers-color-scheme --- <div>{{CSSRef}}</div> -<div class="blockIndicator note"> -<p>Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br> +<div class="note"> +<p><strong>Note :</strong> Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br> Sinon, vous pouvez créer le paramètre numérique <code>ui.systemUsesDarkTheme</code> pour redéfinier le comportement par défaut et retourner <code>light</code> (valeur : 0), <code>dark</code> (valeur : 1), or <code>no-preference</code> (valeur : 2). (Firefox retournera<code>light</code> si une autre valeur est utilisée.)</p> </div> @@ -30,7 +30,7 @@ translation_of: Web/CSS/@media/prefers-color-scheme <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">.day { background: #eee; color: black; } +<pre class="brush: css">.day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { @@ -54,7 +54,7 @@ translation_of: Web/CSS/@media/prefers-color-scheme <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="day">Jour (initial)</div> +<pre class="brush: html"><div class="day">Jour (initial)</div> <div class="day light-scheme">Jour (modifié si utilisation d'un thème clair)</div> <div class="day dark-scheme">Jour (modifié si utilisation d'un thème sombre)</div> <br> diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html index 9f161ee4fd..daf259477f 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.html +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html @@ -12,11 +12,10 @@ translation_of: Web/CSS/@media/prefers-reduced-motion --- <div>{{CSSRef}}</div> -<p class="summary">La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">requêtes média</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p> +<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features">requêtes média</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p> -<div class="notecard warning"> - <p><b>Important :</b><p> - <p>Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.</p> +<div class="warning"> + <p><strong>Attention :</strong> Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.</p> </div> <h2 id="syntax">Syntaxe</h2> @@ -63,8 +62,7 @@ translation_of: Web/CSS/@media/prefers-reduced-motion } </pre> -<div class="hidden"> -<pre class="brush: css">.animation { +<pre class="brush: css hidden">.animation { background-color: rebeccapurple; color: #fff; font: 1.2em Helvetica, arial, sans-serif; @@ -106,7 +104,6 @@ translation_of: Web/CSS/@media/prefers-reduced-motion } } </pre> -</div> <h3 id="result">Résultat</h3> diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html index c065872f83..0f07c013b2 100644 --- a/files/fr/web/css/@media/shape/index.html +++ b/files/fr/web/css/@media/shape/index.html @@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/shape <h2 id="Exemples">Exemples</h2> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p> </div> diff --git a/files/fr/web/css/@page/index.html b/files/fr/web/css/@page/index.html index 7dea723ef5..9d44d62546 100644 --- a/files/fr/web/css/@page/index.html +++ b/files/fr/web/css/@page/index.html @@ -21,7 +21,9 @@ translation_of: Web/CSS/@page <p>La règle @ <code>@page</code> peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.</p> -<div class="note"><strong>Note :</strong> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("<length>")}}) relative à la zone d'affichage (<em>viewport</em>) : <code>vh</code>, <code>vw</code>, <code>vmin</code> et <code>vmax</code>. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle <code>@page</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("<length>")}}) relative à la zone d'affichage (<em>viewport</em>) : <code>vh</code>, <code>vw</code>, <code>vmin</code> et <code>vmax</code>. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle <code>@page</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -33,12 +35,12 @@ translation_of: Web/CSS/@page </dl> <dl> - <dt><code><a href="/fr/docs/Web/CSS/@page/marks">marks</a></code></dt> + <dt><code><a href="/fr/docs/orphaned/Web/CSS/@page/marks">marks</a></code></dt> <dd>Ajoute des marques pour la découpe ou l'alignement des pages du document.</dd> </dl> <dl> - <dt><a href="/fr/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt> + <dt><a href="/fr/docs/orphaned/Web/CSS/@page/bleed"><code>bleed</code></a></dt> <dd>Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.</dd> </dl> diff --git a/files/fr/web/css/@page/size/index.html b/files/fr/web/css/@page/size/index.html index 4a162a450a..89d4723b4d 100644 --- a/files/fr/web/css/@page/size/index.html +++ b/files/fr/web/css/@page/size/index.html @@ -53,7 +53,7 @@ size: A4 portrait; <dt><code><length></code></dt> <dd>Une valeur de longueur (cf. {{cssxref("<length>")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.</dd> <dt><code><page-size></code></dt> - <dd> + <dd><p>Un mot-clé avec l'une des valeurs suivantes :</p> <dl> <dt><code>A5</code></dt> <dd>Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.</dd> diff --git a/files/fr/web/css/@supports/index.html b/files/fr/web/css/@supports/index.html index 05205b390c..163bcdd89f 100644 --- a/files/fr/web/css/@supports/index.html +++ b/files/fr/web/css/@supports/index.html @@ -64,7 +64,7 @@ translation_of: Web/CSS/@supports <pre class="brush:css">@supports not ( not ( transform-origin: 2px ) ) { } @supports (display: grid) and ( not (display: inline-grid) ) { }</pre> -<div class="note style-wrap"> +<div class="note"> <p><strong>Note :</strong> Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur <code>not</code> entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme <code>and</code> ou <code>or</code>, il faudra utiliser des parenthèses.</p> </div> @@ -98,8 +98,8 @@ translation_of: Web/CSS/@supports <pre class="brush:css">@supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d ))) { }</pre> -<div class="note style-wrap"> -<p><strong>Note</strong> : Lorsqu'on utilise à la fois l'opérateur <code>and</code> et l'opérateur <code>or</code>, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.</p> +<div class="note"> +<p><strong>Note :</strong> Lorsqu'on utilise à la fois l'opérateur <code>and</code> et l'opérateur <code>or</code>, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/@viewport/index.html b/files/fr/web/css/@viewport/index.html index 97247a26e3..b14056c7ea 100644 --- a/files/fr/web/css/@viewport/index.html +++ b/files/fr/web/css/@viewport/index.html @@ -58,7 +58,7 @@ translation_of: Web/CSS/@viewport </dl> <div class="note"> -<p><strong>Note : </strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.</p> +<p><strong>Note :</strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/_colon_-moz-first-node/index.html b/files/fr/web/css/_colon_-moz-first-node/index.html index fd7e45bb27..74fcd7f5bb 100644 --- a/files/fr/web/css/_colon_-moz-first-node/index.html +++ b/files/fr/web/css/_colon_-moz-first-node/index.html @@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-first-node' <p>La pseudo-classe <strong><code>:-moz-first-node</code></strong> correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs).</p> -<p class="note"><strong>Note :</strong> Tout blanc qui serait au début d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Tout blanc qui serait au début d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_-moz-last-node/index.html b/files/fr/web/css/_colon_-moz-last-node/index.html index 4133fb53a9..aab079a2e6 100644 --- a/files/fr/web/css/_colon_-moz-last-node/index.html +++ b/files/fr/web/css/_colon_-moz-last-node/index.html @@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-last-node' <p>La pseudo-classe <strong><code>:-moz-last-node</code></strong> correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs).</p> -<p class="note"><strong>Note :</strong> Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.html b/files/fr/web/css/_colon_-moz-only-whitespace/index.html index 0a34f1d26c..d53499bc80 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.html +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:-moz-only-whitespace' --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Dans la spécification {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme <code>:-moz-only-whitespace</code> mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.</p> </div> @@ -30,8 +30,7 @@ translation_of: 'Web/CSS/:-moz-only-whitespace' <h3 id="CSS">CSS</h3> -<div class="hidden"> -<pre class="brush: css">:root { +<pre class="brush: css hidden">:root { overflow: hidden; max-width: 100vw; max-height: 100vh; @@ -45,7 +44,6 @@ div { min-height: 1rem; } </pre> -</div> <pre class="brush: css">div { border: 4px solid red; diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.html b/files/fr/web/css/_colon_-moz-window-inactive/index.html index 68c8be972f..e0352a939f 100644 --- a/files/fr/web/css/_colon_-moz-window-inactive/index.html +++ b/files/fr/web/css/_colon_-moz-window-inactive/index.html @@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-window-inactive' <p>La pseudo-classe <strong><code>:-moz-window-inactive</code></strong>, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.</p> -<div class="note"><strong>Note :</strong> Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut <code>active="true"</code> sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.</div> +<div class="note"> + <p><strong>Note :</strong> Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut <code>active="true"</code> sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.</p> +</div> <p><code>:-moz-window-inactive</code> fonctionne également pour le contenu des documents HTML.</p> diff --git a/files/fr/web/css/_colon_active/index.html b/files/fr/web/css/_colon_active/index.html index 617efb14c9..0ac630a4c3 100644 --- a/files/fr/web/css/_colon_active/index.html +++ b/files/fr/web/css/_colon_active/index.html @@ -21,7 +21,9 @@ a:active { <p>La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec <code>:active</code> doit être écrite après les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> -<div class="note"><strong>Note :</strong> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe <code>:active</code> ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.</div> +<div class="note"> + <p><strong>Note :</strong> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe <code>:active</code> ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.</p> +</div> <h2 id="Syntax">Syntax</h2> diff --git a/files/fr/web/css/_colon_autofill/index.html b/files/fr/web/css/_colon_autofill/index.html index 94196944d2..c74d26ed18 100644 --- a/files/fr/web/css/_colon_autofill/index.html +++ b/files/fr/web/css/_colon_autofill/index.html @@ -13,7 +13,9 @@ original_slug: Web/CSS/:-webkit-autofill <p>La pseudo-classe <strong><code>:-webkit-autofill</code></strong> correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.</p> -<p class="note"><strong>Note :</strong> Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent <code>!important</code> pour les déclarations avec <code>:-webkit-autofill</code> ce qui les rend difficilement modifiables sans utiliser JavaScript.</p> +<div class="note"> + <p><strong>Note :</strong> Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent <code>!important</code> pour les déclarations avec <code>:-webkit-autofill</code> ce qui les rend difficilement modifiables sans utiliser JavaScript.</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_colon_blank/index.html b/files/fr/web/css/_colon_blank/index.html index b67a791497..db9d6f5d06 100644 --- a/files/fr/web/css/_colon_blank/index.html +++ b/files/fr/web/css/_colon_blank/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:blank' --- <p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Le sélecteur <code>:blank</code> est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir <a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">l'<em>issue</em> n°1967 à ce propos</a>.</p> </div> diff --git a/files/fr/web/css/_colon_checked/index.html b/files/fr/web/css/_colon_checked/index.html index e29ddf49b8..fba13cef19 100644 --- a/files/fr/web/css/_colon_checked/index.html +++ b/files/fr/web/css/_colon_checked/index.html @@ -1,15 +1,15 @@ --- title: ':checked' -slug: 'Web/CSS/:checked' +slug: Web/CSS/:checked tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:checked' +translation_of: Web/CSS/:checked --- <div>{{CSSRef}}</div> -<p>La pseudo-classe <strong><code>:checked</code></strong> représente n'importe quel <strong>bouton radio</strong> (<code><a href="/fr/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>), <strong>case à cocher </strong>(<code><a href="/fr/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>) ou <strong>option</strong> ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (<code>on</code>). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe <code>:checked</code> ne s'applique plus à l'élément en question.</p> +<p>La pseudo-classe <strong><code>:checked</code></strong> représente n'importe quel <strong>bouton radio</strong> (<code><a href="/fr/docs/Web/HTML/Element/Input/radio"><input type="radio"></a></code>), <strong>case à cocher </strong>(<code><a href="/fr/docs/Web/HTML/Element/Input/checkbox"><input type="checkbox"></a></code>) ou <strong>option</strong> ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (<code>on</code>). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe <code>:checked</code> ne s'applique plus à l'élément en question.</p> <pre class="brush: css no-line-numbers">/* cible n'importe quel bouton radio sélectionné, case /* à cocher cochée ou option sélectionnée */ @@ -29,70 +29,64 @@ input:checked { <h2 id="Exemples">Exemples</h2> -<p>Ici, on utilise la pseudo-classe <code>:checked</code> pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download this demo</a>).</p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#expand-btn { - margin: 0 3px; - display: inline-block; - font: 12px / 13px "Lucida Grande", sans-serif; - text-shadow: rgba(255, 255, 255, 0.4) 0 1px; - padding: 3px 6px; - border: 1px solid rgba(0, 0, 0, 0.6); - background-color: #969696; - cursor: default; - border-radius: 3px; - box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; -} +<h3 id="exemple_simple">Exemple simple</h3> -#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn { - background: #B5B5B5; - box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; -} +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"> +<div> + <input type="radio" name="my-input" id="yes"> + <label for="yes">Oui</label> -#isexpanded, .expandable { - display: none; + <input type="radio" name="my-input" id="no"> + <label for="no">Non</label> +</div> + +<div> + <input type="checkbox" name="my-checkbox" id="opt-in"> + <label for="opt-in">Cochez-moi !</label> +</div> + +<select name="my-select" id="fruit"> + <option value="opt1">Pommes</option> + <option value="opt2">Raisins</option> + <option value="opt3">Poires</option> +</select> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css"> +div, +select { + margin: 8px; } -#isexpanded:checked ~ * tr.expandable { - display: table-row; - background: #cccccc; +/* Libellés pour les entrées cochées */ +input:checked + label { + color: red; +} +/* Éléments radio cochés */ +input[type="radio"]:checked { + box-shadow: 0 0 0 3px orange; } -#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable { - display: block; - background: #cccccc; +/* Éléments cases à cocher cochés */ +input[type="checkbox"]:checked { + box-shadow: 0 0 0 3px hotpink; } -</pre> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input type="checkbox" id="isexpanded" /> - -<table> - <thead> - <tr><th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th></tr> - </thead> - <tbody> - <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - <tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - <tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - </tbody> -</table> - -<p>[Un texte normal]</p> -<p><label for="isexpanded" id="expand-btn">Afficher les éléments masqués</label></p> -<p class="expandable">[Un texte caché]</p> -<p>[Un texte normal]</p> +/* Éléments options sélectionnés */ +option:checked { + box-shadow: 0 0 0 3px lime; + color: red; +} </pre> -<h3 id="Résultat">Résultat</h3> +<h4 id="résultat">Résultat</h4> -<p>{{EmbedLiveSample('Exemples','300','450')}}</p> +<p>{{EmbedLiveSample("exemple_simple")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_colon_default/index.html b/files/fr/web/css/_colon_default/index.html index 0581ed4c6a..195232f149 100644 --- a/files/fr/web/css/_colon_default/index.html +++ b/files/fr/web/css/_colon_default/index.html @@ -26,7 +26,7 @@ translation_of: 'Web/CSS/:default' <li>L'élément <code><button></code> est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments {{htmlelement("input")}} dont le type permet d'envoyer des formulaires tels que <code>image</code> ou <code>submit</code>).</li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La spécification WHATWG HTML définit cela dans <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default">le paragraphe 4.16.3</a>.</p> </div> diff --git a/files/fr/web/css/_colon_dir/index.html b/files/fr/web/css/_colon_dir/index.html index 4bc716dd55..258e28c8b5 100644 --- a/files/fr/web/css/_colon_dir/index.html +++ b/files/fr/web/css/_colon_dir/index.html @@ -24,20 +24,19 @@ translation_of: 'Web/CSS/:dir' <h2 id="Syntaxe">Syntaxe</h2> -<p id="Syntaxe_formelle">La pseudo-classe <code>:dir()</code> nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler</p> +<p>La pseudo-classe <code>:dir()</code> nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler</p> <h3 id="Paramètres">Paramètres</h3> <dl> <dt><code>direction</code></dt> <dd>La direction du texte pour les éléments qu'on souhaite sélectionner. La valeur peut être <code>ltr</code> (texte écrit de gauche à droite) ou <code>rtl</code> (texte écrit de droite à gauche).</dd> - <dt> - <h3 id="Syntaxe_formelle_2">Syntaxe formelle</h3> - - {{csssyntax}} - </dt> </dl> +<h3 id="Syntaxe_formelle_2">Syntaxe formelle</h3> + +<p>{{csssyntax}}</p> + <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/css/_colon_empty/index.html b/files/fr/web/css/_colon_empty/index.html index 70af2f5971..81091c8db4 100644 --- a/files/fr/web/css/_colon_empty/index.html +++ b/files/fr/web/css/_colon_empty/index.html @@ -1,11 +1,11 @@ --- title: ':empty' -slug: 'Web/CSS/:empty' +slug: Web/CSS/:empty tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:empty' +translation_of: Web/CSS/:empty --- <div>{{CSSRef}}</div> @@ -17,8 +17,8 @@ div:empty { background: lime; }</pre> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur <code>:empty</code> a été modifié afin de se comporter comme <span style="white-space: nowrap;">{{CSSxRef(":-moz-only-whitespace")}}</span> mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.</p> +<div class="note"> +<p><strong>Note :</strong> Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur <code>:empty</code> a été modifié afin de se comporter comme {{CSSxRef(":-moz-only-whitespace")}} mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -59,15 +59,15 @@ div:empty { <h2 id="Accessibilité">Accessibilité</h2> -<p>Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de <a href="/fr/Apprendre/a11y/What_is_accessibility">l'arbre d'accessibilité</a>, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.</p> +<p>Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility">l'arbre d'accessibilité</a>, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.</p> <p>Le texte fournissant le nom accessible peut être masqué grâce <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener">à des propriétés</a> afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.</p> <ul> - <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/" hreflang="en">Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)</a></li> - <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/" hreflang="en"><em lang="en">Hidden content for better a11y</em> (en anglais)</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)</a></li> + <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/"><i lang="en">Hidden content for better a11y</i> (en anglais)</a></li> <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre la règle WCAG 2.4</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html" hreflang="en"><em lang="en">Understanding Success Criterion 2.4.4</em> (en anglais) </a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html"><i lang="en">Understanding Success Criterion 2.4.4</i> (en anglais) </a></li> </ul> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_colon_enabled/index.html b/files/fr/web/css/_colon_enabled/index.html index 3b3cc1ba71..09241724f6 100644 --- a/files/fr/web/css/_colon_enabled/index.html +++ b/files/fr/web/css/_colon_enabled/index.html @@ -24,7 +24,6 @@ input:enabled { <p>Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.</p> -<div id="Enabled_Disabled_Inputs_Example"> <h3 id="HTML">HTML</h3> <pre class="brush:html"><form action="url_of_form"> @@ -52,7 +51,6 @@ input:disabled { <h3 id="Résultat">Résultat</h3> <div>{{EmbedLiveSample("Exemples",550,95)}}</div> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_colon_first-child/index.html b/files/fr/web/css/_colon_first-child/index.html index 4b4d1012c9..f82d5e854b 100644 --- a/files/fr/web/css/_colon_first-child/index.html +++ b/files/fr/web/css/_colon_first-child/index.html @@ -19,7 +19,7 @@ p:first-child { }</pre> <div class="note"> -<p><strong>Note </strong>: Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.</p> +<p><strong>Note :</strong> Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_first-of-type/index.html b/files/fr/web/css/_colon_first-of-type/index.html index 4aa63d0fc8..c4582933bd 100644 --- a/files/fr/web/css/_colon_first-of-type/index.html +++ b/files/fr/web/css/_colon_first-of-type/index.html @@ -49,7 +49,7 @@ p:first-of-type { <div>{{EmbedLiveSample('Exemples','100%', '120')}}</div> <div class="note"> -<p><strong>Note </strong><strong>:</strong> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.</p> +<p><strong>Note :</strong> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.</p> </div> <div class="note"> diff --git a/files/fr/web/css/_colon_first/index.html b/files/fr/web/css/_colon_first/index.html index 9587b8d0df..00a1c2771e 100644 --- a/files/fr/web/css/_colon_first/index.html +++ b/files/fr/web/css/_colon_first/index.html @@ -1,17 +1,17 @@ --- title: ':first' -slug: 'Web/CSS/:first' +slug: Web/CSS/:first tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:first' +translation_of: Web/CSS/:first --- <div>{{CSSRef}}</div> <p>La pseudo-classe <strong><code>:first</code></strong>, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud )</p> -<pre class="brush: css no-line-numbers notranslate">/* Cible le contenu de la première page */ +<pre class="brush: css no-line-numbers">/* Cible le contenu de la première page */ /* lorsqu'on imprime */ @page :first { margin-left: 50%; @@ -26,7 +26,7 @@ translation_of: 'Web/CSS/:first' <li>Les propriétés liées aux sauts de page : {{cssxref("page-break")}}</li> </ul> -<p>De plus, seules <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">les unités absolues</a> peuvent être utilisées pour les marges.</p> +<p>De plus, seules <a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">les unités absolues</a> peuvent être utilisées pour les marges.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -36,7 +36,7 @@ translation_of: 'Web/CSS/:first' <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">@page :first { +<pre class="brush: css">@page :first { margin-left: 50%; margin-top: 50%; } @@ -47,13 +47,13 @@ p { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Première page.</p> +<pre class="brush: html"><p>Première page.</p> <p>Deuxième page.</p> <button>Imprimer</button></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () => { +<pre class="brush: js">document.querySelector("button").addEventListener('click', () => { window.print(); });</pre> diff --git a/files/fr/web/css/_colon_focus-visible/index.html b/files/fr/web/css/_colon_focus-visible/index.html index ecdd7ca410..8354f4329b 100644 --- a/files/fr/web/css/_colon_focus-visible/index.html +++ b/files/fr/web/css/_colon_focus-visible/index.html @@ -125,8 +125,6 @@ custom-button:focus-visible { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>{{Compat("css.selectors.focus-visible")}}</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/_colon_fullscreen/index.html b/files/fr/web/css/_colon_fullscreen/index.html index 5e63891e2c..70a63996e7 100644 --- a/files/fr/web/css/_colon_fullscreen/index.html +++ b/files/fr/web/css/_colon_fullscreen/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/:fullscreen' --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:fullscreen</code></strong> permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.</span></p> +<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:fullscreen</code></strong> permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_host()/index.html b/files/fr/web/css/_colon_host()/index.html index 9533eaabf0..f2bbe1b429 100644 --- a/files/fr/web/css/_colon_host()/index.html +++ b/files/fr/web/css/_colon_host()/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/:host()' <p>Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction <code>:host()</code>. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}.</p> <div class="note"> -<p><strong>Note</strong> : Cette fonction n'a aucun effet si elle est utilisée en dehors d'un <em>shadow DOM</em>.</p> +<p><strong>Note :</strong> Cette fonction n'a aucun effet si elle est utilisée en dehors d'un <em>shadow DOM</em>.</p> </div> <pre class="brush: css no-line-numbers">/* On cible l'hôte du shadow DOM uniquement s'il diff --git a/files/fr/web/css/_colon_host-context()/index.html b/files/fr/web/css/_colon_host-context()/index.html index 606220fd36..6457aa73c3 100644 --- a/files/fr/web/css/_colon_host-context()/index.html +++ b/files/fr/web/css/_colon_host-context()/index.html @@ -16,7 +16,7 @@ translation_of: 'Web/CSS/:host-context()' <p>Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — <code>h1</code> par exemple — afin de sélectionner uniquement les instances d'un élément personnalisé (<em>custom element</em>) présentes à l'intérieur d'un élément <code><h1></code>.</p> <div class="note"> -<p><strong>Note</strong> : Cette pseudo-classe n'a aucun effet en dehors d'un <em>shadow DOM</em>.</p> +<p><strong>Note :</strong> Cette pseudo-classe n'a aucun effet en dehors d'un <em>shadow DOM</em>.</p> </div> <pre class="brush: css no-line-numbers">/* Cible un hôte uniquement si c'est un descendant diff --git a/files/fr/web/css/_colon_host/index.html b/files/fr/web/css/_colon_host/index.html index 93b5e59bde..e8a2a7a89f 100644 --- a/files/fr/web/css/_colon_host/index.html +++ b/files/fr/web/css/_colon_host/index.html @@ -12,7 +12,7 @@ translation_of: 'Web/CSS/:host' <p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host</code></strong> permet de cibler l'hôte d'un <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em> contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (<em>custom element</em>) depuis l'intérieur du <em>shadow DOM</em>.</p> <div class="note"> -<p><strong>Note </strong>: Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un <em>shadow DOM</em>.</p> +<p><strong>Note :</strong> Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un <em>shadow DOM</em>.</p> </div> <pre class="brush: css no-line-numbers">/* Cible la racine d'un hôte de shadow DOM */ @@ -71,7 +71,7 @@ style.textContent = 'span:hover { text-decoration: underline; }' + </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("css.selectors.host")}}</p> diff --git a/files/fr/web/css/_colon_hover/index.html b/files/fr/web/css/_colon_hover/index.html index cbaa7781ed..3871067514 100644 --- a/files/fr/web/css/_colon_hover/index.html +++ b/files/fr/web/css/_colon_hover/index.html @@ -1,11 +1,11 @@ --- title: ':hover' -slug: 'Web/CSS/:hover' +slug: Web/CSS/:hover tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:hover' +translation_of: Web/CSS/:hover --- <div>{{CSSRef}}</div> @@ -19,9 +19,11 @@ a:hover { <p>La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle <code>:hover</code> après les règles <code>:link</code> et <code>:visited</code> mais avant la règle <code>:active</code> (l'ordre est <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent.</p> -<p>La pseudo-classe <code>:hover</code> peut être appliquée à n'importe quel <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a>. {{experimental_inline}}</p> +<p>La pseudo-classe <code>:hover</code> peut être appliquée à n'importe quel <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a>. {{experimental_inline}}</p> -<div class="note"><strong>Note d'utilisation :</strong> sur les écrans tactiles, <code>:hover</code> est problématique voire impossible. La pseudo-classe <code>:hover</code> n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.</div> +<div class="note"> + <p><strong>Note :</strong> sur les écrans tactiles, <code>:hover</code> est problématique voire impossible. La pseudo-classe <code>:hover</code> n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_in-range/index.html b/files/fr/web/css/_colon_in-range/index.html index 5283d2fcba..b8c69639c9 100644 --- a/files/fr/web/css/_colon_in-range/index.html +++ b/files/fr/web/css/_colon_in-range/index.html @@ -1,11 +1,11 @@ --- title: ':in-range' -slug: 'Web/CSS/:in-range' +slug: Web/CSS/:in-range tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:in-range' +translation_of: Web/CSS/:in-range --- <div>{{CSSRef}}</div> @@ -20,7 +20,9 @@ input:in-range { <p>Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.</p> -<div class="note"><strong>Note :</strong> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme <em>dans l'intervalle</em> ou <em>en dehors de l'intervalle</em>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme <em>dans l'intervalle</em> ou <em>en dehors de l'intervalle</em>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -30,7 +32,7 @@ input:in-range { <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight:[5]">li { +<pre class="brush: css">li { list-style: none; margin-bottom: 1em; } @@ -51,7 +53,6 @@ input:out-of-range + label::after { content:' non autorisée !'; }</pre> -<div id="example"> <h3 id="HTML">HTML</h3> <pre class="brush: html; highlight:[3]"><form action="" id="form1"> @@ -64,7 +65,6 @@ input:out-of-range + label::after { </form></pre> <h3 id="Résultat">Résultat</h3> -</div> <div>{{EmbedLiveSample('Exemples',600,140)}}</div> @@ -100,5 +100,5 @@ input:out-of-range + label::after { <ul> <li>{{cssxref(":out-of-range")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Guide de validation pour les données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Guide de validation pour les données de formulaire</a></li> </ul> diff --git a/files/fr/web/css/_colon_indeterminate/index.html b/files/fr/web/css/_colon_indeterminate/index.html index cef942a8b3..a94a588e4b 100644 --- a/files/fr/web/css/_colon_indeterminate/index.html +++ b/files/fr/web/css/_colon_indeterminate/index.html @@ -1,11 +1,11 @@ --- title: ':indeterminate' -slug: 'Web/CSS/:indeterminate' +slug: Web/CSS/:indeterminate tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:indeterminate' +translation_of: Web/CSS/:indeterminate --- <div>{{CSSRef}}</div> @@ -20,8 +20,8 @@ input:indeterminate { <p>Cela inclut :</p> <ul> - <li>un élément <code><a href="/fr/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> dont la propriété du DOM <code>indeterminate</code> est fixée à <code>true</code> via du code JavaScript</li> - <li>des éléments <code><a href="/fr/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> dont tous les boutons radio du groupe sont décochés</li> + <li>un élément <code><a href="/fr/docs/Web/HTML/Element/Input/checkbox"><input type="checkbox"></a></code> dont la propriété du DOM <code>indeterminate</code> est fixée à <code>true</code> via du code JavaScript</li> + <li>des éléments <code><a href="/fr/docs/Web/HTML/Element/Input/radio"><input type="radio"></a></code> dont tous les boutons radio du groupe sont décochés</li> <li>des éléments {{HTMLElement("progress")}} dans un état indéterminé.</li> </ul> @@ -35,7 +35,7 @@ input:indeterminate { <h4 id="CSS">CSS</h4> -<pre class="brush: css; hightlight[5]">input, span { +<pre class="brush: css">input, span { background: red; } @@ -71,7 +71,7 @@ for(var i = 0; i < inputs.length; i++) { <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; hightlight[5]">progress:indeterminate { +<pre class="brush: css">progress:indeterminate { opacity: 0.5; box-shadow: 0 0 2px 1px red; } diff --git a/files/fr/web/css/_colon_is/index.html b/files/fr/web/css/_colon_is/index.html index beee9542e7..3268425e30 100644 --- a/files/fr/web/css/_colon_is/index.html +++ b/files/fr/web/css/_colon_is/index.html @@ -1,19 +1,19 @@ --- title: ':is() (:matches(), :any())' -slug: 'Web/CSS/:is' +slug: Web/CSS/:is tags: - CSS - Experimental - Pseudo-classe - Reference - Web -translation_of: 'Web/CSS/:is' +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> +<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="/en-US/docs/Learn/CSS/Building_blocks/Selectors">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> @@ -158,13 +158,13 @@ dir ol dir, dir ul dir, dir menu dir, dir 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> +<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> +<h3 id="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> @@ -230,7 +230,7 @@ h1 { <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> +<h3 id="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> @@ -269,7 +269,7 @@ h1 { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("css.selectors.is")}}</p> diff --git a/files/fr/web/css/_colon_last-of-type/index.html b/files/fr/web/css/_colon_last-of-type/index.html index f2c319d43b..8feeeed2f2 100644 --- a/files/fr/web/css/_colon_last-of-type/index.html +++ b/files/fr/web/css/_colon_last-of-type/index.html @@ -18,7 +18,7 @@ p:last-of-type { }</pre> <div class="note"> -<p><strong>Note : </strong>Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p> +<p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_left/index.html b/files/fr/web/css/_colon_left/index.html index 44523734fc..545f6f24f1 100644 --- a/files/fr/web/css/_colon_left/index.html +++ b/files/fr/web/css/_colon_left/index.html @@ -20,7 +20,9 @@ translation_of: 'Web/CSS/:left' <p>La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page {{cssxref(":right")}}, si elle est définie de « droite à gauche » ce sera une page <code>:left</code>.</p> -<div class="note"><strong>Note :</strong> Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de <strong>la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.</div> +<div class="note"> + <p><strong>Note :</strong> Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de <strong>la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_not/index.html b/files/fr/web/css/_colon_not/index.html index 56d703d285..8cf347c1fc 100644 --- a/files/fr/web/css/_colon_not/index.html +++ b/files/fr/web/css/_colon_not/index.html @@ -1,11 +1,11 @@ --- title: ':not' -slug: 'Web/CSS/:not' +slug: Web/CSS/:not tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:not' +translation_of: Web/CSS/:not --- <div>{{CSSRef}}</div> @@ -17,25 +17,25 @@ translation_of: 'Web/CSS/:not' color: blue; }</pre> -<p>La <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a> de la pseudo-classe <code>:not</code> est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.</p> +<p>La <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">spécificité</a> de la pseudo-classe <code>:not</code> est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.</p> <div class="note"> -<p><strong>Notes :</strong></p> - +<p><strong>Note :</strong> <ul> <li>Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, <code>:not(*) </code>va exclure tous les éléments et ne sera jamais appliqué.</li> - <li>À l'inverse, il est possible d'augmenter la <a href="/fr/docs/Web/CSS/Spécificité">spécificitié</a> d'un sélecteur. Ainsi. <code>toto:not(truc)</code> ciblera les mêmes éléments que <code>toto</code>, mais avec une spécificité plus forte.</li> + <li>À l'inverse, il est possible d'augmenter la <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">spécificitié</a> d'un sélecteur. Ainsi. <code>toto:not(truc)</code> ciblera les mêmes éléments que <code>toto</code>, mais avec une spécificité plus forte.</li> <li><code>:not(toto){}</code> ciblera tout élément qui n'est pas <code>toto</code>, <strong>notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}</strong>.</li> <li>Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, <code>body :not(table) a</code> s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie <code>:not()</code> du sélecteur.</li> </ul> +</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<p>La pseudo-classe <code>:not()</code> prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou <a href="/fr/docs/Web/CSS/Pseudo-éléments">de pseudo-élément</a>.</p> +<p>La pseudo-classe <code>:not()</code> prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou <a href="/fr/docs/Web/CSS/Pseudo-elements">de pseudo-élément</a>.</p> <div class="warning"> -<p><strong>Attention</strong>, la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.</p> +<p><strong>Attention :</strong> la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.</p> </div> {{csssyntax}} diff --git a/files/fr/web/css/_colon_nth-child/index.html b/files/fr/web/css/_colon_nth-child/index.html index ca67129ec6..0e9b1efcac 100644 --- a/files/fr/web/css/_colon_nth-child/index.html +++ b/files/fr/web/css/_colon_nth-child/index.html @@ -83,7 +83,6 @@ body :nth-child(4n) { <h3 id="Exemple_démonstratif">Exemple démonstratif</h3> -<div id="Exemple_demonstratif"> <h4 id="CSS">CSS</h4> <pre class="brush: css">html { @@ -165,7 +164,6 @@ span, div em { <span>Puis un dernier</span> </div> </pre> -</div> <h4 id="Résultat">Résultat</h4> diff --git a/files/fr/web/css/_colon_nth-of-type/index.html b/files/fr/web/css/_colon_nth-of-type/index.html index 54d7fe30b2..9a64cd08c6 100644 --- a/files/fr/web/css/_colon_nth-of-type/index.html +++ b/files/fr/web/css/_colon_nth-of-type/index.html @@ -1,13 +1,13 @@ --- title: ':nth-of-type' -slug: 'Web/CSS/:nth-of-type' +slug: Web/CSS/:nth-of-type tags: - CSS - Mise en page - Pseudo-classe - Reference - Web -translation_of: 'Web/CSS/:nth-of-type' +translation_of: Web/CSS/:nth-of-type --- <div>{{CSSRef}}</div> @@ -39,7 +39,7 @@ p:nth-of-type(4n) { <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="punctuation token"><div> +<pre class="brush: html"><div> <div>Cet élément n'est pas compté.</div> <p>1er paragraphe.</p> <p>2e paragraphe.</p> @@ -47,24 +47,24 @@ p:nth-of-type(4n) { <p>3e paragraphe.</p> <p>4e paragraphe.</p> </div> -</span></span></code></pre> +</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css line-numbers language-css"><code class="language-css">/* Paragraphes impairs */ +<pre class="brush: css line-numbers language-css">/* Paragraphes impairs */ p:nth-of-type(2n+1) { color: red; } /* Paragraphes pairs */ -</code><code class="language-css"><span class="selector token">p<span class="pseudo-class token">:nth-of-type(2n)</span> </span><span class="punctuation token">{</span> - <span class="property token">color</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/* Premier paragraphe */</span> -<span class="selector token">p<span class="pseudo-class token">:nth-of-type(1)</span> </span><span class="punctuation token">{</span> - <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +p:nth-of-type(2n) { + color: blue; +} + +/* Premier paragraphe */ +p:nth-of-type(1) { + font-weight: bold; +}</pre> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/_colon_only-child/index.html b/files/fr/web/css/_colon_only-child/index.html index d47ce1274a..0f992ae22e 100644 --- a/files/fr/web/css/_colon_only-child/index.html +++ b/files/fr/web/css/_colon_only-child/index.html @@ -65,7 +65,7 @@ p:only-child { <h4 id="CSS_2">CSS</h4> -<pre class="brush: css l">li li { +<pre class="brush: css">li li { list-style-type : disc; } @@ -77,7 +77,7 @@ li:only-child { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html language-html"><ol> +<pre class="brush: html"><ol> <li>Premier <ul> <li>Ceci est l'unique élément enfant</li> diff --git a/files/fr/web/css/_colon_only-of-type/index.html b/files/fr/web/css/_colon_only-of-type/index.html index 43cab12bcd..4c1042a821 100644 --- a/files/fr/web/css/_colon_only-of-type/index.html +++ b/files/fr/web/css/_colon_only-of-type/index.html @@ -17,9 +17,8 @@ p:only-of-type { background-color: lime; }</pre> -<div class="note"><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4). - -<p> </p> +<div class="note"> + <p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -30,7 +29,7 @@ p:only-of-type { <h3 id="CSS">CSS</h3> -<pre class="brush: css l">li li { +<pre class="brush: css">li li { list-style-type : disc; } @@ -42,7 +41,7 @@ li:only-of-type { <h3 id="HTML">HTML</h3> -<pre class="brush: html language-html"><ol> +<pre class="brush: html"><ol> <li>Premier <ul> <li>Ceci est l'unique li</li> diff --git a/files/fr/web/css/_colon_out-of-range/index.html b/files/fr/web/css/_colon_out-of-range/index.html index 8db6dc91da..44486cf80d 100644 --- a/files/fr/web/css/_colon_out-of-range/index.html +++ b/files/fr/web/css/_colon_out-of-range/index.html @@ -1,11 +1,11 @@ --- title: ':out-of-range' -slug: 'Web/CSS/:out-of-range' +slug: Web/CSS/:out-of-range tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:out-of-range' +translation_of: Web/CSS/:out-of-range --- <div>{{CSSRef}}</div> @@ -18,7 +18,9 @@ input:out-of-range { background-color: rgba(255, 0, 0, 0.25); }</pre> -<div class="note"><strong>Note :</strong> Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.</div> +<div class="note"> + <p><strong>Note :</strong> Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -28,7 +30,7 @@ input:out-of-range { <h3 id="HTML">HTML</h3> -<pre class="brush: html; highlight:[4]"><form action="" id="form1"> +<pre class="brush: html"><form action="" id="form1"> <ul>Les valeurs entre 1 et 10 sont autorisées. <li> <input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12"> @@ -101,5 +103,5 @@ input:out-of-range + label::after { <ul> <li>{{cssxref(":in-range")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Le guide de validation des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Le guide de validation des données de formulaire</a></li> </ul> diff --git a/files/fr/web/css/_colon_placeholder-shown/index.html b/files/fr/web/css/_colon_placeholder-shown/index.html index e6fe947e5b..93f571be8a 100644 --- a/files/fr/web/css/_colon_placeholder-shown/index.html +++ b/files/fr/web/css/_colon_placeholder-shown/index.html @@ -27,17 +27,15 @@ translation_of: 'Web/CSS/:placeholder-shown' <h4 id="CSS">CSS</h4> -<div class="hidden"> -<pre class="brush: css">input:-ms-input-placeholder { +<pre class="brush: css hidden">input:-ms-input-placeholder { border-color: silver; } input:-moz-placeholder { border-color: silver; }</pre> -</div> -<pre class="brush: css; highlight[6]">input { +<pre class="brush: css">input { border: 2px solid black; padding: 3px; } @@ -64,8 +62,7 @@ input:-moz-placeholder { <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css">input:-ms-input-placeholder { +<pre class="brush: css hidden">input:-ms-input-placeholder { text-overflow: ellipsis; } @@ -90,8 +87,7 @@ input:-moz-placeholder { <h4 id="CSS_3">CSS</h4> -<div class="hidden"> -<pre class="brush: css">input:-ms-input-placeholder { +<pre class="brush: css hidden">input:-ms-input-placeholder { color: red; font-style: italic; } @@ -100,7 +96,6 @@ input:-moz-placeholder { color: red; font-style: italic; }</pre> -</div> <pre class="brush: css">input:placeholder-shown { color: red; @@ -134,8 +129,7 @@ input:-moz-placeholder { <h4 id="CSS_4">CSS</h4> -<div class="hidden"> -<pre class="brush: css">input.studentid:-ms-input-placeholder { +<pre class="brush: css hidden">input.studentid:-ms-input-placeholder { background-color: yellow; color: red; font-style: italic; @@ -146,9 +140,8 @@ input.studentid:-moz-placeholder { color: red; font-style: italic; }</pre> -</div> -<pre class="brush: css; highlight[6]">input { +<pre class="brush: css">input { background-color: #E8E8E8; color: black; } diff --git a/files/fr/web/css/_colon_read-only/index.html b/files/fr/web/css/_colon_read-only/index.html index 9040f249b6..41a0a4a663 100644 --- a/files/fr/web/css/_colon_read-only/index.html +++ b/files/fr/web/css/_colon_read-only/index.html @@ -25,7 +25,7 @@ input:read-only { }</pre> <div class="note"> -<p><strong>Note </strong>: Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.</p> +<p><strong>Note :</strong> Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -59,7 +59,7 @@ p[contenteditable="true"] { color: blue; } <p>{{EmbedLiveSample("Exemples")}}</p> -<h2 class="editable" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/_colon_right/index.html b/files/fr/web/css/_colon_right/index.html index 9b7584c2c5..ecaaba1862 100644 --- a/files/fr/web/css/_colon_right/index.html +++ b/files/fr/web/css/_colon_right/index.html @@ -19,7 +19,9 @@ translation_of: 'Web/CSS/:right' <p>La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).</p> -<div class="note"><strong>Note :</strong> Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} <strong>de la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.</div> +<div class="note"> + <p><strong>Note :</strong> Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} <strong>de la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_target/index.html b/files/fr/web/css/_colon_target/index.html index 0ae8e2b7f7..183349cc73 100644 --- a/files/fr/web/css/_colon_target/index.html +++ b/files/fr/web/css/_colon_target/index.html @@ -25,7 +25,9 @@ translation_of: 'Web/CSS/:target' <pre class="brush: html"><section id="section2">Exemple</section></pre> -<div class="note"><strong>Note :</strong> L'attribut <code>id</code> a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <code><a></code> était nécessairement l'élément cible. La pseudo-classe <code>:target</code> permet également de gérer ces cibles.</div> +<div class="note"> + <p><strong>Note :</strong> L'attribut <code>id</code> a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <code><a></code> était nécessairement l'élément cible. La pseudo-classe <code>:target</code> permet également de gérer ces cibles.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html index a6817d1f5c..51dc574676 100644 --- a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html +++ b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html @@ -32,10 +32,6 @@ translation_of: 'Web/CSS/::-moz-progress-bar' <p>{{EmbedLiveSample('Exemples')}}</p> -<p>Une barre de progression mise en forme de cette façon devrait ressembler à :</p> - -<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p> - <h2 id="Spécifications">Spécifications</h2> <p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html index 05ee5929ce..9fc489d9c2 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html +++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -1,12 +1,12 @@ --- title: '::-webkit-progress-bar' -slug: 'Web/CSS/::-webkit-progress-bar' +slug: Web/CSS/::-webkit-progress-bar tags: - CSS - Non-standard - Pseudo-element - Reference -translation_of: 'Web/CSS/::-webkit-progress-bar' +translation_of: Web/CSS/::-webkit-progress-bar --- <div>{{CSSRef}}{{Non-standard_header}}</div> @@ -40,7 +40,7 @@ translation_of: 'Web/CSS/::-webkit-progress-bar' <p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13488/progress-bar.png" style="height: 43px; width: 194px;"></p> +<p><img alt="" src="progress-bar.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html index ebe55d9b17..91a831dcef 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html +++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html @@ -1,12 +1,12 @@ --- title: '::-webkit-progress-value' -slug: 'Web/CSS/::-webkit-progress-value' +slug: Web/CSS/::-webkit-progress-value tags: - CSS - Non-standard - Pseudo-element - Reference -translation_of: 'Web/CSS/::-webkit-progress-value' +translation_of: Web/CSS/::-webkit-progress-value --- <div>{{CSSRef}}{{Non-standard_header}}</div> @@ -39,7 +39,7 @@ translation_of: 'Web/CSS/::-webkit-progress-value' <p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13490/progress-value.png" style="height: 60px; width: 249px;"></p> +<p><img alt="" src="progress-value.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_doublecolon_backdrop/index.html b/files/fr/web/css/_doublecolon_backdrop/index.html index 801ee9e7dc..4a5d8fae17 100644 --- a/files/fr/web/css/_doublecolon_backdrop/index.html +++ b/files/fr/web/css/_doublecolon_backdrop/index.html @@ -1,11 +1,11 @@ --- title: '::backdrop' -slug: 'Web/CSS/::backdrop' +slug: Web/CSS/::backdrop tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::backdrop' +translation_of: Web/CSS/::backdrop --- <div>{{CSSRef}}</div> @@ -19,7 +19,9 @@ dialog::backdrop { background: rgba(255,0,0,.25); }</pre> -<p class="note"><strong>Note :</strong> L'élément <code>::backdrop</code> peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.</p> +<div class="note"> + <p><strong>Note :</strong> L'élément <code>::backdrop</code> peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.</p> +</div> <p>Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.</p> @@ -38,7 +40,7 @@ dialog::backdrop { <p>Voici le résultat obtenu :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p> +<p><img alt="" src="bbb-backdrop.png"></p> <p>On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.</p> diff --git a/files/fr/web/css/_doublecolon_before/index.html b/files/fr/web/css/_doublecolon_before/index.html index eef6a0affd..51d962fb43 100644 --- a/files/fr/web/css/_doublecolon_before/index.html +++ b/files/fr/web/css/_doublecolon_before/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::before' <p><strong><code>::before</code></strong> crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (<em>inline</em>).</p> -<pre class="brush:css no-line-numbers notranslate">/* On ajoute un coeur avant les liens */ +<pre class="brush:css no-line-numbers">/* On ajoute un coeur avant les liens */ a::before { content: "♥"; } @@ -35,11 +35,11 @@ a::before { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q></pre> +<pre class="brush: html"><q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">q::before { +<pre class="brush: css">q::before { content: "«"; color: blue; } @@ -58,11 +58,11 @@ q::after { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><span class="ribbon">Observez où est placée la boite orange.</span></pre> +<pre class="brush: html"><span class="ribbon">Observez où est placée la boite orange.</span></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">.ribbon { +<pre class="brush: css">.ribbon { background-color: #5BC8F7; } @@ -83,7 +83,7 @@ q::after { <h4 id="HTML_3">HTML</h4> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Acheter du lait</li> <li>Promener le chien</li> <li>Faire de l'exercice</li> @@ -95,7 +95,7 @@ q::after { <h4 id="CSS_3">CSS</h4> -<pre class="brush: css notranslate">li { +<pre class="brush: css">li { list-style-type: none; position: relative; margin: 1px; @@ -124,7 +124,7 @@ li.done::before { <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">var list = document.querySelector('ul'); +<pre class="brush: js">var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if( ev.target.tagName === 'LI') { ev.target.classList.toggle('done'); diff --git a/files/fr/web/css/_doublecolon_cue-region/index.html b/files/fr/web/css/_doublecolon_cue-region/index.html index 3a8f67bccd..4386cd36f5 100644 --- a/files/fr/web/css/_doublecolon_cue-region/index.html +++ b/files/fr/web/css/_doublecolon_cue-region/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/::cue-region' --- <p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p> -<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue-region</code></strong> correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">mettre en forme des sous-titres et autres indications textuelles</a> de pistes VTT.</span></p> +<p>Le pseudo-élément CSS <strong><code>::cue-region</code></strong> correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">mettre en forme des sous-titres et autres indications textuelles</a> de pistes VTT.</p> <pre class="brush: css; no-line-numbers">::cue-region { color: yellow; @@ -44,7 +44,7 @@ translation_of: 'Web/CSS/::cue-region' <h2 id="Exemples">Exemples</h2> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.</p> </div> diff --git a/files/fr/web/css/_doublecolon_cue/index.html b/files/fr/web/css/_doublecolon_cue/index.html index 837a7189fc..01ab9c8284 100644 --- a/files/fr/web/css/_doublecolon_cue/index.html +++ b/files/fr/web/css/_doublecolon_cue/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/::cue' --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue</code></strong> permet de cibler les indications textuelles <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a> d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme <a href="/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues">les légendes et autres indications textuelles</a> pour les médias avec des pistes VTT.</span></p> +<p>Le pseudo-élément CSS <strong><code>::cue</code></strong> permet de cibler les indications textuelles <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a> d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme <a href="/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues">les légendes et autres indications textuelles</a> pour les médias avec des pistes VTT.</p> <pre class="brush: css no-line-numbers">::cue { color: yellow; diff --git a/files/fr/web/css/_doublecolon_first-letter/index.html b/files/fr/web/css/_doublecolon_first-letter/index.html index 4e41941be8..23d75fa8fd 100644 --- a/files/fr/web/css/_doublecolon_first-letter/index.html +++ b/files/fr/web/css/_doublecolon_first-letter/index.html @@ -1,15 +1,15 @@ --- title: '::first-letter' -slug: 'Web/CSS/::first-letter' +slug: Web/CSS/::first-letter tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::first-letter' +translation_of: Web/CSS/::first-letter --- <div>{{CSSRef}}</div> -<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-letter</code></strong> sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.</p> +<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::first-letter</code></strong> sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.</p> <pre class="brush: css no-line-numbers">/* Sélectionne la première lettre */ /* d'un élément <p> */ @@ -21,8 +21,8 @@ p::first-letter { <p>La première lettre d'un élément n'est pas forcément évidente à identifier :</p> <ul> - <li>La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode <em lang="en">open</em> (Ps), <em lang="en">close</em> (Pe), <em lang="en">initial quote</em> (Pi), <em lang="en">final quote</em> (Pf) et <em lang="en">other punctuation</em> (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.</li> - <li>D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le <code>IJ</code> en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément <code>::first-letter</code>. (Ceci est mal supporté par les navigateurs, reportez vous au <a href="/fr/CSS/::first-letter#Compatibilité_des_navigateurs">tableau de compatibilité des navigateurs</a>).</li> + <li>La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode <i lang="en">open</i> (Ps), <i lang="en">close</i> (Pe), <i lang="en">initial quote</i> (Pi), <i lang="en">final quote</i> (Pf) et <i lang="en">other punctuation</i> (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.</li> + <li>D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le <code>IJ</code> en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément <code>::first-letter</code>. (Ceci est mal supporté par les navigateurs, reportez vous au <a href="/fr/docs/Web/CSS/::first-letter#compatibilit%c3%a9_des_navigateurs">tableau de compatibilité des navigateurs</a>).</li> <li>Enfin, une combinaison du pseudo-élément {{cssxref("::before")}} et de la propriété {{cssxref("content")}} peut injecter du texte au début de l'élément. Dans ce cas, <code>::first-letter</code> sélectionnera la première lettre du contenu inséré.</li> </ul> @@ -44,11 +44,11 @@ p::first-letter { <p>Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.</p> -<div class="note">Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.<br> -<br> -Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.<br> -<br> -Si les navigateurs anciens doivent être supportés, <code>:first-letter</code> est le seul choix viable. Sinon, la syntaxe <code>::first-letter</code> doit être privilégiée.</div> +<div class="note"> + <p><strong>Note :</strong> Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.</p> + <p>Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.</p> + <p>Si les navigateurs anciens doivent être supportés, <code>:first-letter</code> est le seul choix viable. Sinon, la syntaxe <code>::first-letter</code> doit être privilégiée.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_doublecolon_first-line/index.html b/files/fr/web/css/_doublecolon_first-line/index.html index 5b2d2c24c5..11f165eae1 100644 --- a/files/fr/web/css/_doublecolon_first-line/index.html +++ b/files/fr/web/css/_doublecolon_first-line/index.html @@ -1,15 +1,15 @@ --- title: '::first-line (:first-line)' -slug: 'Web/CSS/::first-line' +slug: Web/CSS/::first-line tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::first-line' +translation_of: Web/CSS/::first-line --- <div>{{CSSRef}}</div> -<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-line</code></strong> applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant <code>::first-line</code> ne ciblent pas un élément HTML réel.</p> +<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::first-line</code></strong> applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant <code>::first-line</code> ne ciblent pas un élément HTML réel.</p> <pre class="brush: css no-line-numbers">/* Sélectionne la première ligne */ /* d'un élément <p> */ @@ -34,11 +34,11 @@ translation_of: 'Web/CSS/::first-line' <p>Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.</p> -<div class="note">Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.<br> -<br> -Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.<br> -<br> -Si les navigateurs anciens doivent être supportés, <code>:first-line</code> est le seul choix viable ; sinon<code>,::first-line</code> est préféré.</div> +<div class="note"> + <p><strong>Note :</strong> Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.</p> + <p>Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.</p> + <p>Si les navigateurs anciens doivent être supportés, <code>:first-line</code> est le seul choix viable ; sinon<code>,::first-line</code> est préféré.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_doublecolon_marker/index.html b/files/fr/web/css/_doublecolon_marker/index.html index c7e5be8e76..d4f4c6f0dc 100644 --- a/files/fr/web/css/_doublecolon_marker/index.html +++ b/files/fr/web/css/_doublecolon_marker/index.html @@ -28,7 +28,7 @@ translation_of: 'Web/CSS/::marker' <li><a href="/fr/docs/Web/CSS/CSS_Fonts">Toutes les propriétés liées aux polices (font).</a></li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.</p> </div> diff --git a/files/fr/web/css/_doublecolon_placeholder/index.html b/files/fr/web/css/_doublecolon_placeholder/index.html index 4416c4ae92..54944043c7 100644 --- a/files/fr/web/css/_doublecolon_placeholder/index.html +++ b/files/fr/web/css/_doublecolon_placeholder/index.html @@ -1,11 +1,11 @@ --- title: '::placeholder' -slug: 'Web/CSS/::placeholder' +slug: Web/CSS/::placeholder tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::placeholder' +translation_of: Web/CSS/::placeholder --- <div>{{CSSRef}}</div> @@ -71,7 +71,7 @@ translation_of: 'Web/CSS/::placeholder' <ul> <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> </ul> @@ -83,7 +83,7 @@ translation_of: 'Web/CSS/::placeholder' <p>Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront <code>aria-describedby</code> afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.</p> -<pre class="brush:html line-numbers language-html"><label for="user-email">Votre adresse mail</label> +<pre class="brush:html"><label for="user-email">Votre adresse mail</label> <span id="user-email-hint" class="input-hint">Exemple : johndoe@example.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> </pre> @@ -94,11 +94,11 @@ translation_of: 'Web/CSS/::placeholder' <h3 id="Mode_«_contraste_élevé_»_de_Windows">Mode « contraste élevé » de Windows</h3> -<p>Lorsque le <a href="/en-US/docs/Web/CSS/-ms-high-contrast">mode de contraste élevé de Windows</a> est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.</p> +<p>Lorsque le <a href="/en-US/docs/Web/CSS/@media/-ms-high-contrast">mode de contraste élevé de Windows</a> est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.</p> <ul> - <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Comment utiliser <code>-ms-high-contrast</code> (en anglais)</a></li> - <li>{{cssxref("-ms-high-contrast")}}</li> + <li><a href="https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Comment utiliser <code>-ms-high-contrast</code> (en anglais)</a></li> + <li>{{cssxref("@media/-ms-high-contrast")}}</li> </ul> <h3 id="Libellés_(HTMLElement(<label>))">Libellés ({{HTMLElement("<label>")}})</h3> @@ -147,7 +147,7 @@ translation_of: 'Web/CSS/::placeholder' <li>Les équivalents <strong>non-standards</strong> : <ul> <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> + <li>{{cssxref("::placeholder")}}</li> <li>{{cssxref(":-ms-input-placeholder")}}</li> </ul> </li> diff --git a/files/fr/web/css/_doublecolon_selection/index.html b/files/fr/web/css/_doublecolon_selection/index.html index 5f7d4f0385..2072d308a1 100644 --- a/files/fr/web/css/_doublecolon_selection/index.html +++ b/files/fr/web/css/_doublecolon_selection/index.html @@ -1,15 +1,15 @@ --- title: '::selection' -slug: 'Web/CSS/::selection' +slug: Web/CSS/::selection tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::selection' +translation_of: Web/CSS/::selection --- <div>{{CSSRef}}</div> -<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p> +<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p> <pre class="brush: css no-line-numbers">::selection { background-color: cyan; @@ -92,7 +92,7 @@ p::selection { <ul> <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> </ul> @@ -116,9 +116,8 @@ p::selection { </table> <div class="note"> -<p><strong>Note : </strong>Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.<br> - <br> - Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p> +<p><strong>Note :</strong> Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.</p> +<p>Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p> </div> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.html b/files/fr/web/css/adjacent_sibling_combinator/index.html index a359824b96..c6100f0b8e 100644 --- a/files/fr/web/css/adjacent_sibling_combinator/index.html +++ b/files/fr/web/css/adjacent_sibling_combinator/index.html @@ -26,7 +26,6 @@ img + p { <h3 id="CSS">CSS</h3> -<div id="Example_1"> <pre class="brush: css">li:first-of-type + li { color: red; } @@ -41,7 +40,6 @@ img + p { </ul></pre> <h3 id="Résultat">Résultat</h3> -</div> <p>{{EmbedLiveSample('Exemples', 200, 100)}}</p> diff --git a/files/fr/web/css/align-content/index.html b/files/fr/web/css/align-content/index.html index 62625c4cfa..014928628a 100644 --- a/files/fr/web/css/align-content/index.html +++ b/files/fr/web/css/align-content/index.html @@ -9,14 +9,12 @@ translation_of: Web/CSS/align-content --- <div>{{CSSRef}}</div> -<p>La propriété CSS <strong><code>align-content</code></strong> définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">un conteneur de boîte flexible</a> et le long de l'axe principal lorsque le conteneur est une grille.</p> +<p>La propriété CSS <strong><code>align-content</code></strong> définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">un conteneur de boîte flexible</a> et le long de l'axe principal lorsque le conteneur est une grille.</p> <p>L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.</p> <div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec <code>flex-wrap: nowrap</code> par exemple).</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -78,7 +76,7 @@ align-content: unset;</pre> <dt><code>baseline<br> first baseline</code><br> <code>last baseline</code></dt> - <dd><img alt="La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend." src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;">Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br> + <dd><img alt="La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend." src="410px-typography_line_terms.svg.png">Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br> Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd> <dt><code>space-between</code></dt> <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.</dd> @@ -102,7 +100,7 @@ align-content: unset;</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">#container { +<pre class="brush: css">#container { height:200px; width: 240px; align-content: center; /* Cette valeur peut être changée dans la démonstration */ @@ -220,10 +218,7 @@ select { </div> </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var values = document.getElementById('values'); +<pre class="brush: js hidden">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -235,7 +230,6 @@ display.addEventListener('change', function (evt) { container.className = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -282,9 +276,9 @@ display.addEventListener('change', function (evt) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles</a></li> - <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles</a></li> + <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li> </ul> diff --git a/files/fr/web/css/align-items/index.html b/files/fr/web/css/align-items/index.html index 1774fe755e..69e1fcd440 100644 --- a/files/fr/web/css/align-items/index.html +++ b/files/fr/web/css/align-items/index.html @@ -9,14 +9,14 @@ translation_of: Web/CSS/align-items --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</span> La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a> correspondante.</p> +<p>La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</p> + +<p>La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossary/Grid_Areas">la zone de grille</a> correspondante.</p> <p>L'exemple qui suit illustre le fonctionnement des différentes valeurs de <code>align-items</code> au sein d'une grile.</p> <div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>À l'heure actuelle, cette propriété est prise en charge pour les dispositions <em>Flexbox</em> et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -79,9 +79,6 @@ align-items: unset; <dd>Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.</dd> <dt><code>self-end</code></dt> <dd>Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.</dd> -</dl> - -<dl> <dt><code>baseline</code></dt> <dt><code>first baseline<br> last baseline</code></dt> @@ -92,18 +89,16 @@ align-items: unset; <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur <code>start</code> à la place.</dd> <dt><code>unsafe</code></dt> <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - </dt> </dl> +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> {{csssyntax}} <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">#container { +<pre class="brush: css">#container { height:200px; width: 240px; align-items: center; /* Cette valeur peut être modifiée dans l'exemple */ @@ -218,10 +213,7 @@ select { </div> </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var values = document.getElementById('values'); +<pre class="brush: js hidden">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -233,7 +225,6 @@ display.addEventListener('change', function (evt) { container.className = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -278,10 +269,10 @@ display.addEventListener('change', function (evt) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles CSS</a></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li> - <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles CSS</a></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li> + <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li> <li>La propriété {{cssxref("align-self")}}</li> </ul> diff --git a/files/fr/web/css/align-self/index.html b/files/fr/web/css/align-self/index.html index 1d9dfbfc23..02b2574984 100644 --- a/files/fr/web/css/align-self/index.html +++ b/files/fr/web/css/align-self/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/align-self <div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/all/index.html b/files/fr/web/css/all/index.html index 18c96dcd4a..335620c2ee 100644 --- a/files/fr/web/css/all/index.html +++ b/files/fr/web/css/all/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/all <div>{{EmbedInteractiveExample("pages/css/all.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs globales */ @@ -79,7 +77,6 @@ blockquote { <h3 id="Résultat">Résultat</h3> -<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;"> <h4 id="Pas_de_propriété_all">Pas de propriété <code>all</code></h4> <pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> @@ -89,9 +86,7 @@ blockquote { background-color: skyblue; color: red; }</pre> {{EmbedLiveSample("ex0", "200", "125")}} <p>L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.</p> -</div> -<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;"> <h4 id="allunset"><code>all:unset</code></h4> <pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> @@ -102,9 +97,7 @@ blockquote { all: unset; }</pre> {{EmbedLiveSample("ex1", "200", "125")}} <p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (<em>inline</em>) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est <code>transparent</code> (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée).</p> -</div> -<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;"> <h4 id="allinitial"><code>all:initial</code></h4> <pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> @@ -115,9 +108,7 @@ blockquote { all: initial; }</pre> {{EmbedLiveSample("ex2", "200", "125")}} <p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut <code>transparent</code> (sa valeur initiale), {{cssxref("font-size")}} vaut <code>normal</code> (valeur initiale) et {{cssxref("color")}} vaut <code>black</code> (sa valeur initiale).</p> -</div> -<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;"> <h4 id="allinherit"><code>all:inherit</code></h4> <pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> @@ -128,7 +119,6 @@ blockquote { all: inherit; }</pre> {{EmbedLiveSample("ex3", "200", "125")}} <p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut <code>#F0F0F0</code> (valeur héritée), {{cssxref("font-size")}} vaut <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut <code>blue</code> (valeur héritée).</p> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/alpha-value/index.html b/files/fr/web/css/alpha-value/index.html index 2a260de8f1..a2736fad98 100644 --- a/files/fr/web/css/alpha-value/index.html +++ b/files/fr/web/css/alpha-value/index.html @@ -25,13 +25,17 @@ translation_of: Web/CSS/alpha-value <p>Certaines fonctionnalités CSS utilisent des valeurs <code><alpha-value></code> dont <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#RGB_colors">les notations fonctionnelles pour les couleurs telles que <code>rgba()</code> et <code>hsla()</code></a> et aussi {{cssxref("shape-image-threshold")}} (qui détermine les pixels à prendre en compte pour une image lorsqu'on souhaite en extraire une forme).</p> -<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* <rgba()> */</span> -<span class="property token">color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">34</span><span class="punctuation token">,</span> <span class="number token">12</span><span class="punctuation token">,</span> <span class="number token">64</span><span class="punctuation token">,</span> <span class="number token">0.6</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="property token">color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">34.0</span> <span class="number token">12</span> <span class="number token">64</span> <span class="operator token">/</span> <span class="number token">60</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> - -<code class="language-css"><span class="comment token">/* shape-image-threshold */ -</span><span class="property token">shape-image-threshold</span><span class="punctuation token">:</span> <span class="number token">70%</span><span class="punctuation token">;</span> -<span class="property token">shape-image-threshold</span><span class="punctuation token">:</span> <span class="number token">0.7</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: css"> +/* <rgba()> */ +color: rgba(34, 12, 64, 0.6); +color: rgba(34.0 12 64 / 60%); +</pre> + +<pre class="brush: css"> +/* shape-image-threshold */ +shape-image-threshold: 70%; +shape-image-threshold: 0.7; +</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/angle/index.html b/files/fr/web/css/angle/index.html index 1a936ee1fe..f020237b66 100644 --- a/files/fr/web/css/angle/index.html +++ b/files/fr/web/css/angle/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/angle <div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <p>Pour exprimer une valeur de ce type, on utilisera une valeur de type {{cssxref("<number>")}} (un nombre), immédiatement suivie d'une unité <code>deg</code>, <code>grad</code>, <code>rad</code> ou <code>turn</code>. Comme pour les autres dimensions présentes en CSS, il n'y a pas d'espace entre le littéral réservé à l'unité et le nombre qui indique la mesure de l'angle. L'unité est facultative pour la valeur <code>0</code> (bien qu'il soit recommandé d'écrire une unité pour des raisons de lisibilité et de cohérence). Il est possible d'utiliser un signe <code>+</code> ou <code>-</code> en préfixe.</p> @@ -43,25 +41,25 @@ translation_of: Web/CSS/angle <table> <tbody> <tr> - <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td> + <td><img src="angle90.png"></td> <td> <p>Un angle droit orienté dans le sens horaire : <code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></p> </td> </tr> <tr> - <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td> + <td><img src="angle180.png"></td> <td>Un angle plat orienté dans le sens horaire : <code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td> </tr> <tr> - <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td> + <td><img src="angleminus90.png"></td> <td>Un angle droit orienté dans le sens anti-horaire : <code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td> </tr> <tr> - <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td> + <td><img src="angle0.png"></td> <td> <p>Un angle nul : <code>0 = 0deg = 0grad = 0turn = 0rad</code></p> - <div class="note"><strong>Note :</strong>Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.</div> + <div class="note"><p><strong>Note :</strong>Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.</p></div> </td> </tr> </tbody> diff --git a/files/fr/web/css/animation-delay/index.html b/files/fr/web/css/animation-delay/index.html index f7efca1935..733ba4d654 100644 --- a/files/fr/web/css/animation-delay/index.html +++ b/files/fr/web/css/animation-delay/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-delay <div>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur par défaut, <code>0s</code>, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.</p> <p>Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur <code>-1s</code> comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.</p> diff --git a/files/fr/web/css/animation-direction/index.html b/files/fr/web/css/animation-direction/index.html index 88527d3588..45fa6dbf7b 100644 --- a/files/fr/web/css/animation-direction/index.html +++ b/files/fr/web/css/animation-direction/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-direction <div>{{EmbedInteractiveExample("pages/css/animation-direction.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/animation-duration/index.html b/files/fr/web/css/animation-duration/index.html index ec4e6dd410..766d826733 100644 --- a/files/fr/web/css/animation-duration/index.html +++ b/files/fr/web/css/animation-duration/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-duration <div>{{EmbedInteractiveExample("pages/css/animation-duration.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur par défaut est <code>0s</code>, ce qui indique qu'aucune animation ne doit avoir lieu.</p> <p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.</p> @@ -34,9 +32,13 @@ animation-duration: 10s, 30s, 230ms; <dd>La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (<code>s</code> comme suffixe pour l'unité) ou en millisecondes (<code>ms</code> comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.</dd> </dl> -<div class="note"><strong>Note :</strong> Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de <code>0s</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de <code>0s</code>.</p> +</div> -<div class="note"><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">les valeurs des propriétés pour plusieurs animations</a>.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -103,6 +105,6 @@ animation-duration: 10s, 30s, 230ms; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Manipuler les animations CSS</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul> diff --git a/files/fr/web/css/animation-fill-mode/index.html b/files/fr/web/css/animation-fill-mode/index.html index fe7afbd8d3..01b33f2513 100644 --- a/files/fr/web/css/animation-fill-mode/index.html +++ b/files/fr/web/css/animation-fill-mode/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-fill-mode <div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/animation-iteration-count/index.html b/files/fr/web/css/animation-iteration-count/index.html index 85c80ff18b..7291b39c13 100644 --- a/files/fr/web/css/animation-iteration-count/index.html +++ b/files/fr/web/css/animation-iteration-count/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/animation-iteration-count <div>{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/animation-name/index.html b/files/fr/web/css/animation-name/index.html index 3ea322393f..107ab29d0c 100644 --- a/files/fr/web/css/animation-name/index.html +++ b/files/fr/web/css/animation-name/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-name <div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées aux animations.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/animation-play-state/index.html b/files/fr/web/css/animation-play-state/index.html index 98a89cd532..c0dcf45efb 100644 --- a/files/fr/web/css/animation-play-state/index.html +++ b/files/fr/web/css/animation-play-state/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-play-state <div>{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html index 736ccbf5cd..f3b7858272 100644 --- a/files/fr/web/css/animation-timing-function/index.html +++ b/files/fr/web/css/animation-timing-function/index.html @@ -9,12 +9,10 @@ translation_of: Web/CSS/animation-timing-function --- <div>{{CSSRef}}</div> -<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("<timing-function>")}}.</p> +<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("easing-function")}}.</p> <div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -57,7 +55,7 @@ animation-timing-function: unset; <dl> <dt><code><timing-function></code></dt> - <dd>Chaque valeur {{cssxref("<timing-function>")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}. + <dd>Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}. <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.</p> <dl> @@ -99,7 +97,7 @@ animation-timing-function: unset; </dl> <div class="note"> -<p><strong>Note </strong>: Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS#Utiliser_plusieurs_valeurs_pour_différentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p> +<p><strong>Note :</strong> Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -111,8 +109,7 @@ animation-timing-function: unset; <div> <h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> @@ -121,7 +118,7 @@ animation-timing-function: unset; <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div></pre> -<pre class="brush:css;">.parent > div[class] { +<pre class="brush:css hidden">.parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; @@ -144,7 +141,6 @@ animation-timing-function: unset; } } </pre> -</div> <pre class="brush: css">.ease { animation-timing-function: ease; @@ -171,8 +167,7 @@ animation-timing-function: unset; <div> <h3 id="Fonctions_en_escalier">Fonctions en escalier</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> @@ -183,7 +178,7 @@ animation-timing-function: unset; <div class="step-end">step-end</div> </div></pre> -<pre class="brush:css;">.parent > div[class] { +<pre class="brush:css hidden">.parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; @@ -206,7 +201,6 @@ animation-timing-function: unset; } } </pre> -</div> <pre class="brush: css">.jump-start { animation-timing-function: steps(5, jump-start); @@ -264,7 +258,7 @@ animation-timing-function: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li> - <li>{{cssxref('timing-function')}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li> + <li>{{cssxref('easing-function')}}</li> <li>L'API JavaScript {{domxref("AnimationEvent")}}</li> </ul> diff --git a/files/fr/web/css/animation/index.html b/files/fr/web/css/animation/index.html index 2458dfa40f..fd5be78c0d 100644 --- a/files/fr/web/css/animation/index.html +++ b/files/fr/web/css/animation/index.html @@ -27,8 +27,6 @@ translation_of: Web/CSS/animation <div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; @@ -40,8 +38,8 @@ translation_of: Web/CSS/animation animation: 3s slidein; </pre> -<div class="hidden" id="animation"> -<pre class="brush: html"><div class="grid"> +<h2 id="animation_example">Exemple d'animation</h2> +<pre class="brush: html hidden"><div class="grid"> <div class="col"> <div class="note"> Avec l'animation suivante : @@ -80,7 +78,7 @@ translation_of: Web/CSS/animation </div> </div></pre> -<pre class="brush: css">html,body { +<pre class="brush: css hidden">html,body { height: 100%; box-sizing: border-box; } @@ -172,7 +170,7 @@ button.restart { transform-origin: left center; }</pre> -<pre class="brush: js">window.addEventListener('load', function () { +<pre class="brush: js hidden">window.addEventListener('load', function () { var ANIMATION = Array.from(document.querySelectorAll('.animation')); var BUTTON = Array.from(document.querySelectorAll('button')); @@ -211,9 +209,8 @@ button.restart { btn.addEventListener('click', function () { playPause(index); }); }); })</pre> -</div> -<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("animation_example", "100%", 260, "", "", "example-outcome-frame")}}</p> <p><a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">Une liste des propriétés qui peuvent être animées</a> est disponible. On notera que cette liste est également valable pour <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">les transitions CSS</a>.</p> diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html index 1de60de406..3f709c1ac5 100644 --- a/files/fr/web/css/appearance/index.html +++ b/files/fr/web/css/appearance/index.html @@ -21,8 +21,6 @@ browser-compat: css.properties.appearance <div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété était utilisée dans les feuilles de style XUL afin de mettre en forme des <em>widgets</em> utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations XBL pour les <em>widgets</em> livrés avec les logiciels Mozilla.</p> <div class="note"> diff --git a/files/fr/web/css/attr()/index.html b/files/fr/web/css/attr()/index.html index cb6a859554..1a026e67da 100644 --- a/files/fr/web/css/attr()/index.html +++ b/files/fr/web/css/attr()/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/attr() <p>La fonction <strong><code>attr()</code></strong> est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments</a> auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.</p> -<pre class="brush:css no-line-numbers notranslate">/* Utilisation simple */ +<pre class="brush:css no-line-numbers">/* Utilisation simple */ attr(data-count); attr(title); @@ -168,11 +168,11 @@ attr(data-something, "default"); <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><p data-toto="coucou">world</p></pre> +<pre class="brush: html;"><p data-toto="coucou">world</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[2] notranslate">[data-toto]::before { +<pre class="brush: css">[data-toto]::before { content: attr(data-toto) " "; }</pre> @@ -186,19 +186,17 @@ attr(data-something, "default"); <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><div class="background" data-background="lime"></div></pre> +<pre class="brush: html;"><div class="background" data-background="lime"></div></pre> <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css; notranslate">html, +<pre class="brush: css;">html, body, .background { height: 100vh; }</pre> -</div> -<pre class="brush: css; highlight[6] notranslate">.background { +<pre class="brush: css">.background { background-color: red; } @@ -246,7 +244,7 @@ body, <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></li> - <li><a href="/fr/docs/Web/HTML/Attributs_universels/data-*">Attributs HTML <code>data-*</code></a></li> + <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></li> + <li><a href="/fr/docs/Web/HTML/Global_attributes/data-*">Attributs HTML <code>data-*</code></a></li> <li><a href="/fr/docs/Web/SVG/Attribute/data-*">Attributs SVG <code>data-*</code></a></li> </ul> diff --git a/files/fr/web/css/attribute_selectors/index.html b/files/fr/web/css/attribute_selectors/index.html index e90c7d7fec..1c0631a784 100644 --- a/files/fr/web/css/attribute_selectors/index.html +++ b/files/fr/web/css/attribute_selectors/index.html @@ -57,7 +57,7 @@ a[class~="logo"] { <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur se termine par <code>valeur</code>.</dd> <dt><code>[<em>attr</em>*=<em>valeur</em>]</code></dt> <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> et dont la valeur contient au moins une occurrence de <code>valeur</code> dans la chaîne de caractères.</dd> - <dt id="case-insensitive"><code>[<em>attr</em> <em>operateur</em> <em>valeur</em> i]</code></dt> + <dt><code>[<em>attr</em> <em>operateur</em> <em>valeur</em> i]</code></dt> <dd>On peut ajouter un <code>i</code> (ou <code>I</code>) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).</dd> <dt><code>[attr operateur valeur s]</code> {{experimental_inline}}</dt> <dd>Ajouter un <code>s</code> (ou <code>S</code>) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).</dd> diff --git a/files/fr/web/css/backface-visibility/index.html b/files/fr/web/css/backface-visibility/index.html index 2f0a69cc68..510a676f14 100644 --- a/files/fr/web/css/backface-visibility/index.html +++ b/files/fr/web/css/backface-visibility/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/backface-visibility <div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Dans certains cas, on souhaite que la face avant ne soit pas visible par transparence. Par exemple, si on souhaite simuler une carte à jouer qu'on retourne.</p> <p>Cette propriété n'aura aucun effet tant que les transformations appliquées sont uniquement en 2D car aucun effet de perspective ne sera introduit.</p> diff --git a/files/fr/web/css/background-attachment/index.html b/files/fr/web/css/background-attachment/index.html index 549d4d3cc6..a047e44575 100644 --- a/files/fr/web/css/background-attachment/index.html +++ b/files/fr/web/css/background-attachment/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-attachment <div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -51,7 +49,7 @@ background-attachment: unset; <h4 id="CSS">CSS</h4> -<pre class="brush:css; highlight:[3];">p { +<pre class="brush:css">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } @@ -76,7 +74,7 @@ background-attachment: unset; <h4 id="CSS_2">CSS</h4> -<pre class="brush:css; highlight:[3];">p { +<pre class="brush:css">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; diff --git a/files/fr/web/css/background-blend-mode/index.html b/files/fr/web/css/background-blend-mode/index.html index 4a1096ca9d..0b8bc30a7f 100644 --- a/files/fr/web/css/background-blend-mode/index.html +++ b/files/fr/web/css/background-blend-mode/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-blend-mode <div>{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les modes de fusions (<em>blending modes</em>) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/background-clip/index.html b/files/fr/web/css/background-clip/index.html index bad08f1652..78a5167402 100644 --- a/files/fr/web/css/background-clip/index.html +++ b/files/fr/web/css/background-clip/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-clip <div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si aucune image ({{cssxref("background-image")}}) ni couleur ({{cssxref("background-color")}}) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via {{cssxref("border-style")}} ou {{cssxref("border-image")}}). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/background-color/index.html b/files/fr/web/css/background-color/index.html index 77f77b6d54..b536c82c49 100644 --- a/files/fr/web/css/background-color/index.html +++ b/files/fr/web/css/background-color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-color <div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/background-image/index.html b/files/fr/web/css/background-image/index.html index 7aed346038..8060b3da48 100644 --- a/files/fr/web/css/background-image/index.html +++ b/files/fr/web/css/background-image/index.html @@ -13,15 +13,15 @@ translation_of: Web/CSS/background-image <div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.</p> <p>Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p> <p>Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme <code>none</code>.</p> -<div class="note"><strong>Note :</strong> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.</div> +<div class="note"> + <p><strong>Note :</strong> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -155,7 +155,7 @@ div { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">Implémenter des sprites en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Implémenter des sprites en CSS</a></li> <li>{{HTMLElement("img")}},</li> <li>{{cssxref("<image>")}},</li> <li>{{cssxref("<gradient>")}},</li> @@ -163,7 +163,7 @@ div { <li>{{cssxref("radial-gradient")}},</li> <li>{{cssxref("repeating-linear-gradient")}},</li> <li>{{cssxref("repeating-radial-gradient")}},</li> - <li>{{cssxref("element")}},</li> + <li>{{cssxref("element()")}},</li> <li>{{cssxref("_image", "image()")}},</li> <li>{{cssxref("image-set")}},</li> <li>{{cssxref("url","url()")}}</li> diff --git a/files/fr/web/css/background-origin/index.html b/files/fr/web/css/background-origin/index.html index bbe137266b..30fda75135 100644 --- a/files/fr/web/css/background-origin/index.html +++ b/files/fr/web/css/background-origin/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/background-origin <div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Attention, <code>background-origin</code> est ignorée lorsque {{cssxref("background-attachment")}} vaut <code>fixed</code>.</p> -<div class="note"><strong>Note : </strong>Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration <code>background-origin</code> avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour <code>background-origin</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration <code>background-origin</code> avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour <code>background-origin</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/background-position-x/index.html b/files/fr/web/css/background-position-x/index.html index 7d841b7ce5..19ef27e117 100644 --- a/files/fr/web/css/background-position-x/index.html +++ b/files/fr/web/css/background-position-x/index.html @@ -16,9 +16,9 @@ translation_of: Web/CSS/background-position-x <div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note : </strong>La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de <code>background-position-x</code>.</div> +<div class="note"> + <p><strong>Note :</strong> La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de <code>background-position-x</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -102,5 +102,5 @@ background-position-x: unset; <li>{{cssxref("background-position-y")}}</li> <li>{{cssxref("background-position-inline")}}</li> <li>{{cssxref("background-position-block")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Manipuler plusieurs arrière-plans</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></li> </ul> diff --git a/files/fr/web/css/background-position-y/index.html b/files/fr/web/css/background-position-y/index.html index 07c6c16350..d6346071e7 100644 --- a/files/fr/web/css/background-position-y/index.html +++ b/files/fr/web/css/background-position-y/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/background-position-y <div>{{EmbedInteractiveExample("pages/css/background-position-y.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note : </strong>La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.</div> +<div class="note"> + <p><strong>Note :</strong> La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -101,5 +101,5 @@ background-position-y: unset; <li>{{cssxref("background-position-x")}}</li> <li>{{cssxref("background-position-inline")}}</li> <li>{{cssxref("background-position-block")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Manipuler plusieurs arrière-plans</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></li> </ul> diff --git a/files/fr/web/css/background-position/index.html b/files/fr/web/css/background-position/index.html index a132fa982d..5649bec662 100644 --- a/files/fr/web/css/background-position/index.html +++ b/files/fr/web/css/background-position/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-position <div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs utilisant un mot-clé */ @@ -51,12 +49,11 @@ background-position: unset; <p>La propriété <code>background-position</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#<position>"><position></a></code>, séparées par des virgules.</p> -<h3 id="Values" name="Values">Valeurs</h3> +<h3 id="Values">Valeurs</h3> <dl> - <dt><a id="<position>" name="<position>"><code><position></code></a></dt> - <dd>Une valeur {{cssxref("<position>")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale.</dd> - <dd> + <dt><code><position></code></dt> + <dd>Une valeur {{cssxref("<position>")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale. <p><strong>Définition avec une valeur :</strong> la valeur peut être :</p> <ul> @@ -186,7 +183,7 @@ L'ordre est le même entre background-image et -position. <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrières-plans</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Gérer plusieurs arrières-plans</a></li> <li>{{cssxref("background-position-x")}}</li> <li>{{cssxref("background-position-y")}}</li> <li>{{cssxref("background-position-inline")}}</li> diff --git a/files/fr/web/css/background-repeat/index.html b/files/fr/web/css/background-repeat/index.html index faeff47297..91aeac12e6 100644 --- a/files/fr/web/css/background-repeat/index.html +++ b/files/fr/web/css/background-repeat/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-repeat <div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (<code>round</code>) voire être distribuées avec des espaces entre les motifs pour remplir la zone (<code>space</code>).</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -45,8 +43,7 @@ background-repeat: unset; <dl> <dt><code><repeat-style></code></dt> - <dd>Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance :</dd> - <dd> + <dd>Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance : <table class="standard-table"> <tbody> <tr> @@ -79,8 +76,7 @@ background-repeat: unset; </tr> </tbody> </table> - Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options :</dd> - <dd> + Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options : <table class="standard-table"> <tbody> <tr> @@ -227,5 +223,5 @@ div { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrières-plans en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Utiliser plusieurs arrières-plans en CSS</a></li> </ul> diff --git a/files/fr/web/css/background-size/index.html b/files/fr/web/css/background-size/index.html index edb088c899..3ab7be1f5f 100644 --- a/files/fr/web/css/background-size/index.html +++ b/files/fr/web/css/background-size/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-size <div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.</p> </div> @@ -65,15 +63,15 @@ background-size: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt id="contain"><code>contain</code></dt> + <dt><code>contain</code></dt> <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.</dd> - <dt id="cover"><code>cover</code></dt> + <dt><code>cover</code></dt> <dd>Un mot-clé dont le comportement est opposé à celui de <code>contain</code>. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).</dd> - <dt id="auto"><code>auto</code></dt> + <dt><code>auto</code></dt> <dd>Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.</dd> - <dt id="length"><code><length></code></dt> + <dt><code><length></code></dt> <dd>Une valeur de type {{cssxref("<length>")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.</dd> - <dt id="percentage"><code><percentage></code></dt> + <dt><code><percentage></code></dt> <dd>Une valeur de type {{cssxref("<percentage>")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<em>padding</em>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut <code>fixed</code>, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.</dd> </dl> @@ -98,13 +96,10 @@ background-size: unset; <p>Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :</p> -<dl> - <dt>Si les deux composants de <code>background-size</code> sont définis et qu'aucun ne vaut <code>auto</code> :</dt> - <dd>L'image utilise la taille définie.</dd> - <dt>Si <code>background-size</code> vaut <code>contain</code> ou <code>cover</code> :</dt> - <dd>L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.</dd> - <dt>Si <code>background-size</code> vaut <code>auto</code> ou <code>auto auto</code> :</dt> - <dd> +<ul> + <li><p>Si les deux composants de <code>background-size</code> sont définis et qu'aucun ne vaut <code>auto</code> : L'image utilise la taille définie.</p></li> + <li><p>Si <code>background-size</code> vaut <code>contain</code> ou <code>cover</code> : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.</p></li> + <li><p>Si <code>background-size</code> vaut <code>auto</code> ou <code>auto auto</code> :</p> <ul> <li>Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.</li> <li>Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.</li> @@ -112,21 +107,18 @@ background-size: unset; <li>Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion.</li> <li>Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.</li> </ul> - </dd> - <dd> - <div class="note"><strong>Note :</strong> Les images SVG peuvent contenir un attribut <code><a href="/fr/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> pour lequel la valeur par défaut est équivalente à <code>contain</code>. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour <code>background-size</code> permet d'ignorer <code>preserveAspectRatio</code>.</div> - </dd> - <dt>Si <code>background-size</code> possède une composante <code>auto</code> et que l'autre composante est différente de <code>auto</code> :</dt> - <dd> + <div class="note"><p><strong>Note :</strong> Les images SVG peuvent contenir un attribut <code><a href="/fr/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> pour lequel la valeur par défaut est équivalente à <code>contain</code>. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour <code>background-size</code> permet d'ignorer <code>preserveAspectRatio</code>.</p></div> +</li> + <li><p>Si <code>background-size</code> possède une composante <code>auto</code> et que l'autre composante est différente de <code>auto</code> :</p> <ul> <li>Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.</li> <li>Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.</li> </ul> - </dd> -</dl> + </li> +</ul> <div class="note"> -<p><strong>Note : </strong>Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.</p> +<p><strong>Note :</strong> Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -258,7 +250,7 @@ background-size: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Redimensionner les images d'arrière-plan</a></li> - <li><a href="/fr/docs/Web/CSS/Redimensionnement_arrière-plans_SVG">Redimensionner les arrière-plans SVG</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images">Redimensionner les images d'arrière-plan</a></li> + <li><a href="/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds">Redimensionner les arrière-plans SVG</a></li> <li>{{cssxref("object-fit")}}</li> </ul> diff --git a/files/fr/web/css/background/index.html b/files/fr/web/css/background/index.html index ed55b04e8a..a404e63da6 100644 --- a/files/fr/web/css/background/index.html +++ b/files/fr/web/css/background/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background <div>{{EmbedInteractiveExample("pages/css/background.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.</p> <p>Lorsqu'on utilise la propriété raccourcie <code>background</code>, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.</p> @@ -92,7 +90,7 @@ background: no-repeat center/80% url("../img/image.png"); <h3 id="CSS">CSS</h3> -<pre class="brush:css' highlight:[2,6];">.attention { +<pre class="brush:css">.attention { background: pink; } @@ -153,6 +151,6 @@ background: no-repeat center/80% url("../img/image.png"); <ul> <li>{{cssxref("box-decoration-break")}}</li> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Les gradients</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrière-plans</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Les gradients</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Gérer plusieurs arrière-plans</a></li> </ul> diff --git a/files/fr/web/css/basic-shape/index.html b/files/fr/web/css/basic-shape/index.html index 30bee0b07c..0205f6ff16 100644 --- a/files/fr/web/css/basic-shape/index.html +++ b/files/fr/web/css/basic-shape/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/basic-shape <div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <p>Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs <code><basic-shape></code>. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.</p> @@ -22,44 +20,47 @@ translation_of: Web/CSS/basic-shape <p>Les formes qui suivent sont prises en charge. Toutes les valeurs <code><basic-shape></code> sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à <a href="/fr/docs/Web/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs">cette page explicative</a>).</p> <dl> - <dt><code><a name="inset()"></a>inset()</code></dt> + <dt><code>inset()</code></dt> <dd> + <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p> <pre class="syntaxbox">inset( <shape-arg>{1,4} [round <border-radius>]? )</pre> - <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p> - <p>Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.</p> <p>L'argument facultatif <code><border-radius></code> permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.</p> <p>Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.</p> </dd> - <dt><code><a name="polygon()"></a>polygon()</code></dt> + <dt><code>polygon()</code></dt> <dd> + <p>Définit un polygone.</p> <pre class="syntaxbox">polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</pre> <p><code><fill-rule></code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut pour cet argument est <code>nonzero</code>.</p> - <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>x<sub>i</sub></em> et <em>y<sub>i</sub></em> du i-ème sommet du polygone.</p> + <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>xi</em> et <em>yi</em> du i-ème sommet du polygone.</p> </dd> - <dt><code><a name="circle()"></a>circle(</code>)</dt> + <dt><code>circle(</code>)</dt> <dd> + <p>Définit un cercle.</p> <pre class="syntaxbox">circle( [<shape-radius>]? [at <position>]? )</pre> <p>L'argument <code><shape-radius></code> représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence <code>sqrt(largeur^2+hauteur^2)/sqrt(2)</code>.</p> <p>L'argument {{cssxref("<position>")}} définit la position pour le centre du cercle. La valeur par défaut est <code>center</code>.</p> </dd> - <dt><code><a name="ellipse()"></a>ellipse()</code></dt> + <dt><code>ellipse()</code></dt> <dd> + <p>Définit une ellipse.</p> <pre class="syntaxbox">ellipse( [<shape-radius>{2}]? [at <position>]? )</pre> <p>Les arguments <code><shape-radius></code> représentent les demi-axes horizontaux (r<sub>x</sub>) et verticaux (r<sub>y</sub>) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.</p> <p>L'argument {{cssxref("<position>")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est <code>center</code>.</p> </dd> - <dt><code><a id="path()" name="path()"></a>path()</code></dt> + <dt><code>path()</code></dt> <dd> + <p>Définit un chemin.</p> <pre class="syntaxbox"><code>path( [<fill-rule>,]? <string>)</code></pre> <p>L'argument optionnel <code><fill-rule></code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut est <code>nonzero</code>.</p> @@ -89,7 +90,7 @@ translation_of: Web/CSS/basic-shape <h2 id="L'interpolation_des_formes_simples">L'interpolation des formes simples</h2> -<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div> +<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc()">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div> <div> </div> diff --git a/files/fr/web/css/blend-mode/index.html b/files/fr/web/css/blend-mode/index.html index 2f025a5746..cd83ad75cd 100644 --- a/files/fr/web/css/blend-mode/index.html +++ b/files/fr/web/css/blend-mode/index.html @@ -23,292 +23,296 @@ translation_of: Web/CSS/blend-mode <dt><code>normal</code></dt> <dd> <p>La couleur finale obtenue est la couleur du premier plan, quelle que soit la couleur de l'arrière-plan. On obtient ainsi un effet similaire à la superposition de deux feuilles de papier opaques.</p> - - <div class="hidden" id="normal"> - <pre class="brush: html"><div id="div"></div></pre> - - <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: normal; -}</pre> - </div> - - <p>{{EmbedLiveSample('normal', "300", "300")}}</p> </dd> <dt><code>multiply</code></dt> <dd> <p>La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.<br> Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.</p> + </dd> + <dt><code>screen</code></dt> + <dd> + <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p> + </dd> + <dt><code>overlay</code></dt> + <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties. + </dd> + <dt><code>darken</code></dt> + <dd> + <p>La couleur finale est la couleur la plus sombre des deux couches.</p> + </dd> + <dt><code>lighten</code></dt> + <dd> + <p>La couleur finale est la couleur la plus claire des deux couches.</p> + </dd> + <dt><code>color-dodge</code></dt> + <dd> + <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br> + Un premier-plan noir n'entraînera aucun changement.</p> + </dd> + <dt><code>color-burn</code></dt> + <dd> + <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p> + </dd> + <dt><code>hard-light</code></dt> + <dd> + <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p> + </dd> + <dt><code>soft-light</code></dt> + <dd> + <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p> + </dd> + <dt><code>difference</code></dt> + <dd> + <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p> + </dd> + <dt><code>exclusion</code></dt> + <dd> + <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p> + </dd> + <dt><code>hue</code></dt> + <dd> + <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p> + </dd> + <dt><code>saturation</code></dt> + <dd> + <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p> + </dd> + <dt><code>color</code></dt> + <dd> + <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p> + </dd> + <dt><code>luminosity</code></dt> + <dd> + <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p> + </dd> +</dl> + - <div class="hidden" id="multiply"> - <pre class="brush: html"><div id="div"></div></pre> +<h2 id="examples">Exemples</h2> + +<h3 id="normal">normal</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: multiply; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: normal; }</pre> - </div> - <p>{{EmbedLiveSample('multiply', "300", "300")}}</p> - </dd> - <dt><code>screen</code></dt> - <dd> - <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p> +<p>{{ EmbedLiveSample('normal', "300", "350") }}</p> + +<h3 id="multiply">multiply</h3> - <div class="hidden" id="screen"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: screen; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: multiply; }</pre> - </div> - <p>{{EmbedLiveSample('screen', "300", "300")}}</p> - </dd> - <dt><code>overlay</code></dt> - <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties. - <div class="hidden" id="overlay"> - <pre class="brush: html"><div id="div"></div></pre> +<p>{{ EmbedLiveSample('multiply', "300", "350") }}</p> + +<h3 id="screen">screen</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: overlay; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: screen; }</pre> - </div> - <p>{{EmbedLiveSample('overlay', "300", "300")}}</p> - </dd> - <dt><code>darken</code></dt> - <dd> - <p>La couleur finale est la couleur la plus sombre des deux couches.</p> +<p>{{ EmbedLiveSample('screen', "300", "350") }}</p> - <div class="hidden" id="darken"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="overlay">overlay</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: darken; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: overlay; }</pre> - </div> - <p>{{EmbedLiveSample('darken', "300", "300")}}</p> - </dd> - <dt><code>lighten</code></dt> - <dd> - <p>La couleur finale est la couleur la plus claire des deux couches.</p> +<p>{{ EmbedLiveSample('overlay', "300", "350") }}</p> - <div class="hidden" id="lighten"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="darken">darken</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: lighten; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: darken; }</pre> - </div> - <p>{{EmbedLiveSample('lighten', "300", "300")}}</p> - </dd> - <dt><code>color-dodge</code></dt> - <dd> - <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br> - Un premier-plan noir n'entraînera aucun changement.</p> +<p>{{ EmbedLiveSample('darken', "300", "350") }}</p> - <div class="hidden" id="color-dodge"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="lighten">lighten</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: color-dodge; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: lighten; }</pre> - </div> - <p>{{EmbedLiveSample('color-dodge', "300", "300")}}</p> - </dd> - <dt><code>color-burn</code></dt> - <dd> - <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p> +<p>{{ EmbedLiveSample('lighten', "300", "350") }}</p> - <div class="hidden" id="color-burn"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="color-dodge">color-dodge</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: color-burn; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: color-dodge; }</pre> - </div> - <p>{{EmbedLiveSample('color-burn', "300", "300")}}</p> - </dd> - <dt><code>hard-light</code></dt> - <dd> - <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p> +<p>{{ EmbedLiveSample('color-dodge', "300", "350") }}</p> + +<h3 id="color-burn">color-burn</h3> - <div class="hidden" id="hard-light"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: hard-light; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: color-burn; }</pre> - </div> - <p>{{EmbedLiveSample('hard-light', "300", "300")}}</p> - </dd> - <dt><code>soft-light</code></dt> - <dd> - <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p> +<p>{{ EmbedLiveSample('color-burn', "300", "350") }}</p> + +<h3 id="hard-light">hard-light</h3> - <div class="hidden" id="soft-light"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: soft-light; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: hard-light; }</pre> - </div> - <p>{{EmbedLiveSample('soft-light', "300", "300")}}</p> - </dd> - <dt><code>difference</code></dt> - <dd> - <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p> +<p>{{ EmbedLiveSample('hard-light', "300", "350") }}</p> + +<h3 id="soft-light">soft-light</h3> - <div class="hidden" id="difference"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: difference; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: soft-light; }</pre> - </div> - <p>{{EmbedLiveSample('difference', "300", "300")}}</p> - </dd> - <dt><code>exclusion</code></dt> - <dd> - <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p> +<p>{{ EmbedLiveSample('soft-light', "300", "350") }}</p> - <div class="hidden" id="exclusion"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="difference">difference</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: exclusion; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: difference; }</pre> - </div> - <p>{{EmbedLiveSample('exclusion', "300", "300")}}</p> - </dd> - <dt><code>hue</code></dt> - <dd> - <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p> +<p>{{ EmbedLiveSample('difference', "300", "350") }}</p> - <div class="hidden" id="hue"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="exclusion">exclusion</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: hue; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: exclusion; }</pre> - </div> - <p>{{EmbedLiveSample('hue', "300", "300")}}</p> - </dd> - <dt><code>saturation</code></dt> - <dd> - <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p> +<p>{{ EmbedLiveSample('exclusion', "300", "350") }}</p> + +<h3 id="hue">hue</h3> - <div class="hidden" id="saturation"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: saturation; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: hue; }</pre> - </div> - <p>{{EmbedLiveSample('saturation', "300", "300")}}</p> - </dd> - <dt><code>color</code></dt> - <dd> - <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p> +<p>{{ EmbedLiveSample('hue', "300", "350") }}</p> + +<h3 id="saturation">saturation</h3> - <div class="hidden" id="color"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: color; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: saturation; }</pre> - </div> - <p>{{EmbedLiveSample('color', "300", "300")}}</p> - </dd> - <dt><code>luminosity</code></dt> - <dd> - <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p> +<p>{{ EmbedLiveSample('saturation', "300", "350") }}</p> - <div class="hidden" id="luminosity"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="color">color</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: luminosity; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: color; }</pre> - </div> - <p>{{EmbedLiveSample('luminosity', "300", "300")}}</p> - </dd> -</dl> +<p>{{ EmbedLiveSample('color', "300", "350") }}</p> + +<h3 id="luminosity">luminosity</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: luminosity; +}</pre> + +<p>{{ EmbedLiveSample('luminosity', "300", "350") }}</p> <h2 id="L'interpolation_des_modes_de_fusion">L'interpolation des modes de fusion</h2> diff --git a/files/fr/web/css/block-size/index.html b/files/fr/web/css/block-size/index.html index 2994e685a5..4ed59048b2 100644 --- a/files/fr/web/css/block-size/index.html +++ b/files/fr/web/css/block-size/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/block-size <div>{{EmbedInteractiveExample("pages/css/block-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si le mode d'écriture est vertical, la valeur de <code>block-size</code> fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.</p> <p>L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}.</p> diff --git a/files/fr/web/css/border-block-end-color/index.html b/files/fr/web/css/border-block-end-color/index.html index a6422a9b92..0837a30800 100644 --- a/files/fr/web/css/border-block-end-color/index.html +++ b/files/fr/web/css/border-block-end-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-end-color <div>{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p> <ul> diff --git a/files/fr/web/css/border-block-end-style/index.html b/files/fr/web/css/border-block-end-style/index.html index d776b6e2f3..2f381a74bc 100644 --- a/files/fr/web/css/border-block-end-style/index.html +++ b/files/fr/web/css/border-block-end-style/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end-style <div>{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p> <ul> diff --git a/files/fr/web/css/border-block-end-width/index.html b/files/fr/web/css/border-block-end-width/index.html index 09d58b14b9..a6cd3ee9ea 100644 --- a/files/fr/web/css/border-block-end-width/index.html +++ b/files/fr/web/css/border-block-end-width/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end-width <div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-block-end/index.html b/files/fr/web/css/border-block-end/index.html index 64b30fe781..4ec15731fe 100644 --- a/files/fr/web/css/border-block-end/index.html +++ b/files/fr/web/css/border-block-end/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end <div>{{EmbedInteractiveExample("pages/css/border-block-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> <p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p> diff --git a/files/fr/web/css/border-block-start-color/index.html b/files/fr/web/css/border-block-start-color/index.html index 2a19ee6af8..95208d2f9b 100644 --- a/files/fr/web/css/border-block-start-color/index.html +++ b/files/fr/web/css/border-block-start-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-start-color <div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p> <ul> diff --git a/files/fr/web/css/border-block-start-style/index.html b/files/fr/web/css/border-block-start-style/index.html index 1cc6d32187..a6060e2c1d 100644 --- a/files/fr/web/css/border-block-start-style/index.html +++ b/files/fr/web/css/border-block-start-style/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-start-style <div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p> <ul> diff --git a/files/fr/web/css/border-block-start-width/index.html b/files/fr/web/css/border-block-start-width/index.html index 4b4014b773..4e9e0f6139 100644 --- a/files/fr/web/css/border-block-start-width/index.html +++ b/files/fr/web/css/border-block-start-width/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-start-width <div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-inline-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-block-start/index.html b/files/fr/web/css/border-block-start/index.html index 2dc10fd173..44fa752755 100644 --- a/files/fr/web/css/border-block-start/index.html +++ b/files/fr/web/css/border-block-start/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-start <div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> <p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p> diff --git a/files/fr/web/css/border-bottom-color/index.html b/files/fr/web/css/border-bottom-color/index.html index 2c1405eb2e..a1c9a1bf02 100644 --- a/files/fr/web/css/border-bottom-color/index.html +++ b/files/fr/web/css/border-bottom-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-bottom-color <div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <color> */ diff --git a/files/fr/web/css/border-bottom-left-radius/index.html b/files/fr/web/css/border-bottom-left-radius/index.html index 7fbe0c67a8..be45e9ff52 100644 --- a/files/fr/web/css/border-bottom-left-radius/index.html +++ b/files/fr/web/css/border-bottom-left-radius/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/border-bottom-left-radius <div>{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p> -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-bottom-right-radius/index.html b/files/fr/web/css/border-bottom-right-radius/index.html index 01202f17c2..9a9fb45657 100644 --- a/files/fr/web/css/border-bottom-right-radius/index.html +++ b/files/fr/web/css/border-bottom-right-radius/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/border-bottom-right-radius <div>{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p> -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-right-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-right-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-bottom-style/index.html b/files/fr/web/css/border-bottom-style/index.html index 25af11dd26..82a22dc543 100644 --- a/files/fr/web/css/border-bottom-style/index.html +++ b/files/fr/web/css/border-bottom-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-bottom-style <div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-bottom-style: unset; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dotted; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-bottom-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dashed; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: inset; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-bottom-width/index.html b/files/fr/web/css/border-bottom-width/index.html index 32224d9304..62e85b5adb 100644 --- a/files/fr/web/css/border-bottom-width/index.html +++ b/files/fr/web/css/border-bottom-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-bottom-width <div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Une valeur de longueur */ @@ -39,31 +37,11 @@ border-bottom-width: unset; <dl> <dt><code><line-width></code></dt> <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"> </div> - </td> - <td>Une bordure fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"> </div> - </td> - <td>Une bordure moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"> </div> - </td> - <td>Une bordure épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd> </dl> diff --git a/files/fr/web/css/border-bottom/index.html b/files/fr/web/css/border-bottom/index.html index b02a21e637..40903908a8 100644 --- a/files/fr/web/css/border-bottom/index.html +++ b/files/fr/web/css/border-bottom/index.html @@ -23,8 +23,6 @@ translation_of: Web/CSS/border-bottom <div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Comme pour les autres propriétés raccourcies, <code>border-bottom</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p> diff --git a/files/fr/web/css/border-collapse/index.html b/files/fr/web/css/border-collapse/index.html index 44857ef640..1751aa7ddf 100644 --- a/files/fr/web/css/border-collapse/index.html +++ b/files/fr/web/css/border-collapse/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-collapse <div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Le modèle des <em>bordures séparées</em> est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}.</p> <p>Le modèle des <em>bordures fusionnées</em> permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs <code>inset</code> et <code>outset</code> de {{cssxref("border-style")}} se comportent respectivement comme <code>groove</code> et <code>ridge</code>.</p> diff --git a/files/fr/web/css/border-color/index.html b/files/fr/web/css/border-color/index.html index 75ccdf21eb..34c8a624c4 100644 --- a/files/fr/web/css/border-color/index.html +++ b/files/fr/web/css/border-color/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-color <div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Chaque côté peut être paramétré individuellement grâce aux propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} et {{cssxref("border-left-color")}} ou, si on utilise les propriétés logiques : {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-image-outset/index.html b/files/fr/web/css/border-image-outset/index.html index 268d5a3a87..72861fff31 100644 --- a/files/fr/web/css/border-image-outset/index.html +++ b/files/fr/web/css/border-image-outset/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-outset <div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-image-repeat/index.html b/files/fr/web/css/border-image-repeat/index.html index cdd8232f24..73277c07d4 100644 --- a/files/fr/web/css/border-image-repeat/index.html +++ b/files/fr/web/css/border-image-repeat/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-repeat <div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* border-image-repeat */ diff --git a/files/fr/web/css/border-image-slice/index.html b/files/fr/web/css/border-image-slice/index.html index 5466c32526..ab1572f57c 100644 --- a/files/fr/web/css/border-image-slice/index.html +++ b/files/fr/web/css/border-image-slice/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/border-image-slice <div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p><img alt="Les 9 zones définies par border-image-slice" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></p> +<p><img alt="Les 9 zones définies par border-image-slice" src="border-image-slice.png"></p> <p>Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).</p> @@ -126,5 +124,5 @@ border-image-slice: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies#Quelques_cas_aux_limites_épineux">Description illustrée de la syntaxe multi-valuée</a></li> + <li><a href="/fr/docs/Web/CSS/Shorthand_properties#quelques_cas_aux_limites_%c3%a9pineux">Description illustrée de la syntaxe multi-valuée</a></li> </ul> diff --git a/files/fr/web/css/border-image-source/index.html b/files/fr/web/css/border-image-source/index.html index 904c1ccdfd..f030f45974 100644 --- a/files/fr/web/css/border-image-source/index.html +++ b/files/fr/web/css/border-image-source/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-source <div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */ diff --git a/files/fr/web/css/border-image-width/index.html b/files/fr/web/css/border-image-width/index.html index 03f2a742d1..f334914cde 100644 --- a/files/fr/web/css/border-image-width/index.html +++ b/files/fr/web/css/border-image-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-width <div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si <code>border-image-width</code> est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du <em>padding</em> voire du contenu.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-image/index.html b/files/fr/web/css/border-image/index.html index a17db19da4..d945857f9f 100644 --- a/files/fr/web/css/border-image/index.html +++ b/files/fr/web/css/border-image/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-image <div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété <code>border-image</code> sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, <code>border-style</code> <strong>doit</strong> être présente si <code>border-image</code> est utilisée.</p> <div class="note"> diff --git a/files/fr/web/css/border-inline-end-color/index.html b/files/fr/web/css/border-inline-end-color/index.html index 9289f6ecda..bc4b34cade 100644 --- a/files/fr/web/css/border-inline-end-color/index.html +++ b/files/fr/web/css/border-inline-end-color/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-color <div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p> <ul> diff --git a/files/fr/web/css/border-inline-end-style/index.html b/files/fr/web/css/border-inline-end-style/index.html index e161161904..7fa9597e99 100644 --- a/files/fr/web/css/border-inline-end-style/index.html +++ b/files/fr/web/css/border-inline-end-style/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-style <div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p> <ul> diff --git a/files/fr/web/css/border-inline-end-width/index.html b/files/fr/web/css/border-inline-end-width/index.html index 41aac7ad6c..1c01412029 100644 --- a/files/fr/web/css/border-inline-end-width/index.html +++ b/files/fr/web/css/border-inline-end-width/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-width <div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-start-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-inline-end/index.html b/files/fr/web/css/border-inline-end/index.html index a801d40d70..860957487a 100644 --- a/files/fr/web/css/border-inline-end/index.html +++ b/files/fr/web/css/border-inline-end/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end <div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> <p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p> diff --git a/files/fr/web/css/border-inline-start-color/index.html b/files/fr/web/css/border-inline-start-color/index.html index 8cf5b5b11f..f2b6520344 100644 --- a/files/fr/web/css/border-inline-start-color/index.html +++ b/files/fr/web/css/border-inline-start-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start-color <div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p> <ul> diff --git a/files/fr/web/css/border-inline-start-width/index.html b/files/fr/web/css/border-inline-start-width/index.html index 648cd04479..a530bc3c6e 100644 --- a/files/fr/web/css/border-inline-start-width/index.html +++ b/files/fr/web/css/border-inline-start-width/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start-width <div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-inline-start/index.html b/files/fr/web/css/border-inline-start/index.html index 31c508d4ed..1e57c3f268 100644 --- a/files/fr/web/css/border-inline-start/index.html +++ b/files/fr/web/css/border-inline-start/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start <div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> <p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p> diff --git a/files/fr/web/css/border-left-color/index.html b/files/fr/web/css/border-left-color/index.html index 7c333ed82f..d19f3c7ad2 100644 --- a/files/fr/web/css/border-left-color/index.html +++ b/files/fr/web/css/border-left-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-left-color <div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <color> */ diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html index ad7a1c9fb9..3bb7d560f3 100644 --- a/files/fr/web/css/border-left-style/index.html +++ b/files/fr/web/css/border-left-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-left-style <div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-left-style: unset; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dotted; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dashed; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: inset; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-left-width/index.html b/files/fr/web/css/border-left-width/index.html index 4b5b84a190..5c218977d1 100644 --- a/files/fr/web/css/border-left-width/index.html +++ b/files/fr/web/css/border-left-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-left-width <div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Une valeur de longueur */ @@ -39,31 +37,11 @@ border-left-width: unset; <dl> <dt><code><br-width></code></dt> <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté gauche de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"> </div> - </td> - <td>Une bordure fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"> </div> - </td> - <td>Une bordure moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"> </div> - </td> - <td>Une bordure épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd> </dl> diff --git a/files/fr/web/css/border-left/index.html b/files/fr/web/css/border-left/index.html index b0a1a7de7d..bd60bc0f95 100644 --- a/files/fr/web/css/border-left/index.html +++ b/files/fr/web/css/border-left/index.html @@ -23,8 +23,6 @@ translation_of: Web/CSS/border-left <div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p> diff --git a/files/fr/web/css/border-radius/index.html b/files/fr/web/css/border-radius/index.html index 779403fa01..540cf83bc4 100644 --- a/files/fr/web/css/border-radius/index.html +++ b/files/fr/web/css/border-radius/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/border-radius <div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.</p> -<p>Cette propriété est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de définir :</p> +<p>Cette propriété est une <a href="/fr/docs/Web/CSS/Shorthand_properties">propriété raccourcie</a> qui permet de définir :</p> <ul> <li>{{cssxref("border-top-left-radius")}},</li> @@ -29,7 +27,9 @@ translation_of: Web/CSS/border-radius <p>La propriété <code>border-radius</code> ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut <code>collapse</code>.</p> -<div class="note"><strong>Note :</strong> Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (<code>border-radius:0 0 inherit inherit</code> pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.</div> +<div class="note"> + <p><strong>Note :</strong> Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (<code>border-radius:0 0 inherit inherit</code> pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -94,46 +94,46 @@ border-radius: unset; <tbody> <tr> <td style="vertical-align: top;">Une seule valeur</td> - <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> + <td><img src="all-corner.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.</td> </tr> <tr> <td style="vertical-align: top;">Deux valeurs (coin en haut à gauche et en bas à droite)</td> - <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> + <td><img src="top-left-bottom-right.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.</td> </tr> <tr> <td style="vertical-align: top;">Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)</td> - <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> + <td><img src="top-right-bottom-left.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.</td> </tr> <tr> <td style="vertical-align: top;">Coin en haut à gauche</td> - <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> + <td><img src="top-left.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td> </tr> <tr> <td style="vertical-align: top;">Coin en haut à droite</td> - <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> + <td style="margin-left: 2px;"><img src="top-right.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td> </tr> <tr> <td style="vertical-align: top;">Coin en bas à droite</td> - <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> + <td style="margin-left: 2px;"><img src="bottom-rigth.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td> </tr> <tr> <td style="vertical-align: top;">Coin en bas à gauche</td> - <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> + <td><img src="bottom-left.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td> </tr> </tbody> </table> <dl> - <dt><a id="length" name="length"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("<length>")}}. Les valeurs négatives sont considérées comme invalides.</dd> - <dt><a id="percentage" name="percentage"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("<percentage>")}} pour plus de détails.</dd> </dl> diff --git a/files/fr/web/css/border-right-color/index.html b/files/fr/web/css/border-right-color/index.html index 9136bfccec..7ec0703a27 100644 --- a/files/fr/web/css/border-right-color/index.html +++ b/files/fr/web/css/border-right-color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-right-color <div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <color> */ diff --git a/files/fr/web/css/border-right-style/index.html b/files/fr/web/css/border-right-style/index.html index 63edb2d351..13e84b546f 100644 --- a/files/fr/web/css/border-right-style/index.html +++ b/files/fr/web/css/border-right-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-right-style <div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-right-style: unset; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dotted; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-right-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dashed; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: inset; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-right-width/index.html b/files/fr/web/css/border-right-width/index.html index 3211387ef2..f2233827aa 100644 --- a/files/fr/web/css/border-right-width/index.html +++ b/files/fr/web/css/border-right-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-right-width <div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -38,31 +36,11 @@ border-right-width: unset;</pre> <dl> <dt><code><br-width></code></dt> <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"> </div> - </td> - <td>Une bordure fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"> </div> - </td> - <td>Une bordure moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"> </div> - </td> - <td>Une bordure épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd> </dl> diff --git a/files/fr/web/css/border-right/index.html b/files/fr/web/css/border-right/index.html index 5ce5ece5b2..9c33a5c287 100644 --- a/files/fr/web/css/border-right/index.html +++ b/files/fr/web/css/border-right/index.html @@ -21,8 +21,6 @@ translation_of: Web/CSS/border-right <div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Ces propriétés permettent de décrire la bordure du côté droit d'un élément.</p> <div class="note"> diff --git a/files/fr/web/css/border-spacing/index.html b/files/fr/web/css/border-spacing/index.html index f06382de34..f6e0d18643 100644 --- a/files/fr/web/css/border-spacing/index.html +++ b/files/fr/web/css/border-spacing/index.html @@ -14,12 +14,10 @@ translation_of: Web/CSS/border-spacing <div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de <code>border-spacing</code> est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du <code>border-spacing</code> approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).</p> <div class="note"> -<p><strong>Note</strong> : La propriété <code>border-spacing</code> équivaut à l'attribut déprécié <code>cellspacing</code> de l'élément <code><table></code>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.</p> +<p><strong>Note :</strong> La propriété <code>border-spacing</code> équivaut à l'attribut déprécié <code>cellspacing</code> de l'élément <code><table></code>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-style/index.html b/files/fr/web/css/border-style/index.html index 78f8ed3007..1ddbc35fff 100644 --- a/files/fr/web/css/border-style/index.html +++ b/files/fr/web/css/border-style/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/border-style <p>La propriété CSS <strong><code>border-style</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément.</p> -<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> @@ -44,7 +42,9 @@ border-style: initial; border-style: unset; </pre> -<div class="note"><strong>Note :</strong> La valeur par défaut de <code>border-style</code> est <code>none</code>. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de <code>none</code> ou de <code>hidden</code>.</div> +<div class="note"> + <p><strong>Note :</strong> La valeur par défaut de <code>border-style</code> est <code>none</code>. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de <code>none</code> ou de <code>hidden</code>.</p> +</div> <p>La propriété <code>border-style</code> peut être définie avec une, deux, trois ou quatre valeurs :</p> @@ -73,66 +73,39 @@ border-style: unset; </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-top-color/index.html b/files/fr/web/css/border-top-color/index.html index d3a9afc9b6..4abdfc1493 100644 --- a/files/fr/web/css/border-top-color/index.html +++ b/files/fr/web/css/border-top-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-top-color <div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <color> */ diff --git a/files/fr/web/css/border-top-left-radius/index.html b/files/fr/web/css/border-top-left-radius/index.html index d894bf6244..0c34d5e94d 100644 --- a/files/fr/web/css/border-top-left-radius/index.html +++ b/files/fr/web/css/border-top-left-radius/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-top-left-radius <div>{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-top-right-radius/index.html b/files/fr/web/css/border-top-right-radius/index.html index 6c283db1cb..51c7324d0f 100644 --- a/files/fr/web/css/border-top-right-radius/index.html +++ b/files/fr/web/css/border-top-right-radius/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/border-top-right-radius <div>{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p> -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-radius-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-radius-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-top-style/index.html b/files/fr/web/css/border-top-style/index.html index 6509483f06..aa175464ec 100644 --- a/files/fr/web/css/border-top-style/index.html +++ b/files/fr/web/css/border-top-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-top-style <div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-top-style: inherit; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dotted; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-top-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dashed; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: inset; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-top-width/index.html b/files/fr/web/css/border-top-width/index.html index 835f9c5cc5..e96b5ef89f 100644 --- a/files/fr/web/css/border-top-width/index.html +++ b/files/fr/web/css/border-top-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-top-width <div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Une valeur de longueur */ @@ -39,31 +37,11 @@ border-top-width: unset; <dl> <dt><code><line-width></code></dt> <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;"> </div> - </td> - <td>Une bordure fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;"> </div> - </td> - <td>Une bordure moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;"> </div> - </td> - <td>Une bordure épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd> </dl> diff --git a/files/fr/web/css/border-top/index.html b/files/fr/web/css/border-top/index.html index 8393224111..4b9d59fe82 100644 --- a/files/fr/web/css/border-top/index.html +++ b/files/fr/web/css/border-top/index.html @@ -21,8 +21,6 @@ translation_of: Web/CSS/border-top <div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p> diff --git a/files/fr/web/css/border-width/index.html b/files/fr/web/css/border-width/index.html index 2399f59f98..f41d3cb8a7 100644 --- a/files/fr/web/css/border-width/index.html +++ b/files/fr/web/css/border-width/index.html @@ -26,8 +26,6 @@ translation_of: Web/CSS/border-width <div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -68,31 +66,11 @@ border-width: unset; <dl> <dt><code><line-width></code></dt> <dd>Une valeur de longueur (type {{cssxref("<length>")}} ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"> </div> - </td> - <td>La bordure est fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"> </div> - </td> - <td>La bordure est moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"> </div> - </td> - <td>La bordure est épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : <code>thin ≤ medium ≤ thick</code> et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.</dd> </dl> diff --git a/files/fr/web/css/border/index.html b/files/fr/web/css/border/index.html index c44cac3e09..1c1edbdede 100644 --- a/files/fr/web/css/border/index.html +++ b/files/fr/web/css/border/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border <div>{{EmbedInteractiveExample("pages/css/border.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est <code>none</code>). Ainsi, <code>border</code> peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.</p> <div class="note"> @@ -59,11 +57,11 @@ border: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="br-width" name="br-width"><code><line-width></code></a></dt> + <dt><code><line-width></code></dt> <dd>Voir {{cssxref("border-width")}} (la valeur par défaut est <code>medium</code>).</dd> - <dt><a id="br-style" name="br-style"><code><line-style></code></a></dt> + <dt><code><line-style></code></dt> <dd>Voir {{cssxref("border-style")}} (la valeur par défaut est <code>none</code>).</dd> - <dt><a id="color" name="color"><code><color></code></a></dt> + <dt><code><color></code></dt> <dd>Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("<color>")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).</dd> </dl> diff --git a/files/fr/web/css/bottom/index.html b/files/fr/web/css/bottom/index.html index 3a23446bda..b1b5d78f15 100644 --- a/files/fr/web/css/bottom/index.html +++ b/files/fr/web/css/bottom/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/bottom <p>La propriété <strong><code>bottom</code></strong> contribue à la définition de l'emplacement vertical des <a href="/fr/docs/Web/CSS/position">éléments positionnés</a>. Elle n'a aucun effet pour les éléments non-positionnés.</p> -<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div <p>Pour les <strong>éléments positionnés de façon absolue</strong>, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>, la propriété <code>bottom</code> définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.</p> @@ -50,17 +48,17 @@ bottom: unset; <dt><code><length></code></dt> <dd>Une longueur (type {{cssxref("<length>")}} qui représente : <ul> - <li>La distance depuis le bord bas du bloc englobant pour <strong>les éléments positionnés de façon absolue</strong></li> - <li>Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour <strong>les éléments positionnés de façon relative </strong>.</li> + <li>La distance depuis le bord bas du bloc englobant pour les éléments positionnés de façon absolue</li> + <li>Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour les éléments positionnés de façon relative.</li> </ul> </dd> <dt><code><percentage></code></dt> <dd>Une valeur de pourcentage (type {{cssxref("<percentage>")}} exprimée par rapport à la hauteur du bloc englobant.</dd> <dt><code>auto</code></dt> - <dd> + <dd> Indique pour : <ul> - <li>Pour <strong>les éléments positionnés de façon absolue :</strong> la position de l'élément se base sur la propriété {{cssxref("top")}} et <code>height: auto</code> est traitée comme une hauteur basée sur la taille du contenu</li> - <li>Pour <strong>les éléments positionnés de façon relative :</strong> le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également <code>auto</code>, l'élément n'est pas déplacé verticalement.</li> + <li>Les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété {{cssxref("top")}} et <code>height: auto</code> est traitée comme une hauteur basée sur la taille du contenu</li> + <li>Les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également <code>auto</code>, l'élément n'est pas déplacé verticalement.</li> </ul> </dd> <dt><code>inherit</code></dt> diff --git a/files/fr/web/css/box-align/index.html b/files/fr/web/css/box-align/index.html index 65c0e3ea92..731682f8ba 100644 --- a/files/fr/web/css/box-align/index.html +++ b/files/fr/web/css/box-align/index.html @@ -112,8 +112,8 @@ div.exemple > p { <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-decoration-break/index.html b/files/fr/web/css/box-decoration-break/index.html index 989fe8020e..cfbe10973c 100644 --- a/files/fr/web/css/box-decoration-break/index.html +++ b/files/fr/web/css/box-decoration-break/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/box-decoration-break <div>{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -72,7 +70,7 @@ box-decoration-break: unset; <h5 id="Image_équivalente">Image équivalente</h5> -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="box-decoration-break-inline-slice.png"></p> <h4 id="Avec_clone">Avec <code>clone</code></h4> @@ -103,29 +101,21 @@ box-decoration-break: unset; <h5 id="Image_équivalente_2">Image équivalente</h5> -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="box-decoration-break-inline-clone.png"></p> <h3 id="Gestion_des_fragments_pour_les_boîtes_en_bloc">Gestion des fragments pour les boîtes en bloc</h3> -<p>Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc :</p> - -<ol> - <li>Sans fragmentation</li> -</ol> +<p>Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc sans fragmentation:</p> -<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> +<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="box-decoration-break-block.png"></p> -<ol start="2"> - <li>En décomposant le bloc sur trois colonnes, normalement (<code>slice</code>), on aura :</li> -</ol> +<p>En décomposant le bloc sur trois colonnes, normalement (<code>slice</code>), on aura :</p> -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="box-decoration-break-block-slice.png"></p> -<ol start="3"> - <li>Si on applique <code>box-decoration-break:clone</code>, voici le résultat :</li> -</ol> +<p>Si on applique <code>box-decoration-break:clone</code>, voici le résultat :</p> -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="box-decoration-break-block-clone.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/box-direction/index.html b/files/fr/web/css/box-direction/index.html index 749a876f1f..9a62ce1e3f 100644 --- a/files/fr/web/css/box-direction/index.html +++ b/files/fr/web/css/box-direction/index.html @@ -11,10 +11,10 @@ translation_of: Web/CSS/box-direction <div>{{CSSRef}}{{Non-standard_header}}</div> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version. La propriété <code>-moz-box-direction</code> ne peut être utilisée que dans des composants XUL tandis que la propriété <code>box-direction</code> a été remplacée par la propriété standard <code>flex-direction</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version. La propriété <code>-moz-box-direction</code> ne peut être utilisée que dans des composants XUL tandis que la propriété <code>box-direction</code> a été remplacée par la propriété standard <code>flex-direction</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> </div> -<p>La propriété <strong><code>box-direction</code></strong> définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a>.</p> +<p>La propriété <strong><code>box-direction</code></strong> définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>.</p> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ box-direction: normal; @@ -58,8 +58,8 @@ box-direction: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{note("L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.")}}</li> - <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{note("Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{note("L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{note("Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-flex-group/index.html b/files/fr/web/css/box-flex-group/index.html index 39b0639069..c04d6907b0 100644 --- a/files/fr/web/css/box-flex-group/index.html +++ b/files/fr/web/css/box-flex-group/index.html @@ -11,12 +11,12 @@ translation_of: Web/CSS/box-flex-group <div>{{CSSRef}}{{Non-standard_header}}</div> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p> -<p>La propriété <strong><code>box-flex-group</code></strong> permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> +<p>La propriété <strong><code>box-flex-group</code></strong> permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> <pre class="brush:css no-line-numbers">/* Un entier désignant le groupe */ /* Type <integer> */ @@ -44,8 +44,8 @@ box-flex-group: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-flex/index.html b/files/fr/web/css/box-flex/index.html index 33eb7e1a38..8029705961 100644 --- a/files/fr/web/css/box-flex/index.html +++ b/files/fr/web/css/box-flex/index.html @@ -10,9 +10,11 @@ translation_of: Web/CSS/box-flex --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p class="warning">Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour <code>box-flex</code> ni au comportement de <code>-webkit-box-flex</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour <code>box-flex</code> ni au comportement de <code>-webkit-box-flex</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> +</div> -<p>Les propriétés <strong><code>-moz-box-flex</code></strong> et <strong><code>-webkit-box-flex</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> +<p>Les propriétés <strong><code>-moz-box-flex</code></strong> et <strong><code>-webkit-box-flex</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> <pre class="brush:css no-line-numbers">/* Valeurs numériques */ /* Type <number> */ @@ -90,7 +92,7 @@ div.exemple > p:nth-child(2) { <h2 id="Spécifications">Spécifications</h2> -<p>Cette propriété n'est pas une propriété standard. <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Une ancienne version de la spécification CSS3 pour les boîtes flexibles</a> définissait une propriété <code>box-flex</code> mais ce brouillon a depuis été remplacé.</p> +<p>Cette propriété n'est pas une propriété standard. <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Une ancienne version de la spécification CSS3 pour les boîtes flexibles</a> définissait une propriété <code>box-flex</code> mais ce brouillon a depuis été remplacé.</p> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-lines/index.html b/files/fr/web/css/box-lines/index.html index 8807932717..9c01911dbc 100644 --- a/files/fr/web/css/box-lines/index.html +++ b/files/fr/web/css/box-lines/index.html @@ -10,13 +10,13 @@ translation_of: Web/CSS/box-lines --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p> -<p>La propriété <strong><code>box-lines</code></strong> détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> +<p>La propriété <strong><code>box-lines</code></strong> détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ box-lines: single; @@ -58,8 +58,8 @@ box-lines: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-ordinal-group/index.html b/files/fr/web/css/box-ordinal-group/index.html index 34b81a4c1f..b9d400c5d1 100644 --- a/files/fr/web/css/box-ordinal-group/index.html +++ b/files/fr/web/css/box-ordinal-group/index.html @@ -11,12 +11,12 @@ translation_of: Web/CSS/box-ordinal-group <div>{{CSSRef}}{{Non-standard_header}}</div> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> -<p><span class="seoSummary">La propriété <strong><code>box-ordinal-group</code></strong> permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</span></p> +<p>La propriété <strong><code>box-ordinal-group</code></strong> permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p> <pre class="brush:css">/* Un entier indiquant le groupe */ /* Type <integer> */ @@ -29,7 +29,7 @@ box-ordinal-group: initial; box-ordinal-group: unset; </pre> -<p>Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de <strong><code>box-direction</code></strong> est <code>normal</code>, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.</p> +<p>Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de <strong><code>box-direction</code></strong> est <code>normal</code>, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -42,8 +42,8 @@ box-ordinal-group: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a>{{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a>{{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a>{{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a>{{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-orient/index.html b/files/fr/web/css/box-orient/index.html index ee9e876725..9c5220bd16 100644 --- a/files/fr/web/css/box-orient/index.html +++ b/files/fr/web/css/box-orient/index.html @@ -11,12 +11,12 @@ translation_of: Web/CSS/box-orient <div>{{CSSRef}}{{Non-standard_header}}</div> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> <p>La propriété CSS <strong><code>box-orient</code></strong> définit si un élément organise son contenu horizontalement ou verticalement.</p> -<p>Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> +<p>Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> <pre class="brush:css">/* Valeurs avec un mot-clé */ box-orient: horizontal; @@ -89,8 +89,8 @@ box-orient: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-pack/index.html b/files/fr/web/css/box-pack/index.html index 6462999d93..45fd486ed7 100644 --- a/files/fr/web/css/box-pack/index.html +++ b/files/fr/web/css/box-pack/index.html @@ -10,11 +10,11 @@ translation_of: Web/CSS/box-pack --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> -<div>Les propriétés CSS <strong><code>-moz-box-pack</code></strong> et <strong><code>-webkit-box-pack</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</div> +<div>Les propriétés CSS <strong><code>-moz-box-pack</code></strong> et <strong><code>-webkit-box-pack</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</div> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ box-pack: start; @@ -28,7 +28,7 @@ box-pack: initial; box-pack: unset; </pre> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p> <p>La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.</p> @@ -130,7 +130,7 @@ div.exemple p { <h2 id="Spécifications">Spécifications</h2> -<p>Cette propriété n'est pas standard mais une propriété semblable est apparue <a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">avec les brouillons de spécification pour les boîtes flexibles CSS3</a> et a été remplacée dans les versions suivantes de la spécification.</p> +<p>Cette propriété n'est pas standard mais une propriété semblable est apparue <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">avec les brouillons de spécification pour les boîtes flexibles CSS3</a> et a été remplacée dans les versions suivantes de la spécification.</p> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-shadow/index.html b/files/fr/web/css/box-shadow/index.html index 6c8ec5bc41..a8e3cae319 100644 --- a/files/fr/web/css/box-shadow/index.html +++ b/files/fr/web/css/box-shadow/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/box-shadow <p>La propriété CSS <strong><code>box-shadow</code></strong> ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et avec une couleur.</p> -<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div <p>Elle permet de projeter une ombre depuis un élément. Si une {{cssxref("border-radius")}} est définie sur l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (<em>z order</em>) pour plusieurs ombres sera le même <a href="/fr/docs/Web/CSS/text-shadow">que pour les ombres texte</a> (la première ombre est sur le dessus).</p> @@ -59,17 +57,17 @@ box-shadow: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="inset" name="inset"><code>inset</code></a></dt> + <dt><code>inset</code></dt> <dd>Si la valeur n'est pas définie (le cas par défaut), l'ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).<br> La présence du mot-clé <code>inset</code> modifie l'ombre afin qu'elle soit tournée vers l'intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l'intérieur sont dessinées à l'intérieur de la bordure (même les transparentes), au-dessus de l'arrière-plan mais sous le contenu.</dd> - <dt><a id="offset" name="offset"><code><offset-x></code> <code><offset-y></code></a></dt> + <dt><code><offset-x></code> <code><offset-y></code></dt> <dd>Deux valeurs de longueur ({{cssxref("<length>")}} qui permettent de définir le décalage de l'ombre. <code><offset-x></code> définit la distance horizontale du décalage et les valeurs négatives placeront l'ombre à gauche de l'élément. <code><offset-y></code> définit la distance verticale et les distances négatives placent l'ombre au-dessus de l'élément (cf. {{cssxref("<length>")}} pour les différentes unités possibles).<br> Si les deux valeurs sont <code>0</code>, l'ombre est placée derrière l'élément (et peut générer un effet de flou si <code><blur-radius></code> et/ou <code><spread-radius></code> est utilisé).</dd> - <dt><a id="blur" name="blur"><code><blur-radius></code></a></dt> + <dt><code><blur-radius></code></dt> <dd>Une troisième valeur de longueur ({{cssxref("<length>")}}). Plus cette valeur sera grande, plus le flou de l'ombre sera diffus : l'ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas définie, sa valeur par défaut est <code>0</code> (le côté de l'ombre est rectiligne).</dd> - <dt><a id="spread" name="spread"><code><spread-radius></code></a></dt> + <dt><code><spread-radius></code></dt> <dd>Une quatrième valeur de longueur ({{cssxref("<length>")}}). Les valeurs positives étaleront l'ombre et les valeurs négatives rétréciront l'ombre. Si elle n'est pas définie, la valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément).</dd> - <dt><a id="color" name="color"><code><color></code></a></dt> + <dt><code><color></code></dt> <dd>Une valeur de couleur ({{cssxref("<color>")}}). Si la valeur n'est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété {{cssxref("color")}} mais Safari affiche une ombre transparente.</dd> </dl> @@ -81,7 +79,7 @@ box-shadow: unset; {{csssyntax}} -<h2 class="cleared" id="Exemples">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> @@ -117,7 +115,7 @@ box-shadow: unset; <p>{{EmbedLiveSample("Exemples","400","300")}}</p> -<h2 class="cleared" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/box-sizing/index.html b/files/fr/web/css/box-sizing/index.html index ddcdaf9e90..2108d237cb 100644 --- a/files/fr/web/css/box-sizing/index.html +++ b/files/fr/web/css/box-sizing/index.html @@ -22,8 +22,6 @@ translation_of: Web/CSS/box-sizing <div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (<em>content box</em>) de l'élément. Si l'élément possède une bordure (<em>border</em>) ou du remplissage (<em>padding</em>), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite.</p> <p>La propriété <code>box-sizing</code> peut être utilisée afin d'ajuster ce comportement :</p> @@ -33,7 +31,7 @@ translation_of: Web/CSS/box-sizing <li><code>border-box</code> indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.</li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Il est souvent utile de définir <code>box-sizing</code> à <code>border-box</code> aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la <code>position: relative</code> ou <code>position: absolute</code>, l'utilisation de <code>box-sizing: content-box</code> permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.</p> </div> @@ -66,8 +64,8 @@ box-sizing: unset; {{csssyntax}} -<div class="blockIndicator note"> -<p>Note : La valeur <code>padding-box</code> a été dépréciée.</p> +<div class="note"> +<p><strong>Note :</strong> La valeur <code>padding-box</code> a été dépréciée.</p> </div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/break-after/index.html b/files/fr/web/css/break-after/index.html index b2191bb0a0..4ed535eaf6 100644 --- a/files/fr/web/css/break-after/index.html +++ b/files/fr/web/css/break-after/index.html @@ -125,7 +125,7 @@ break-after: unset; </tbody> </table> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La valeur <code>always</code> de <code>page-break-*</code> a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est <code>page</code> et pas <code>always</code>.</p> </div> diff --git a/files/fr/web/css/break-before/index.html b/files/fr/web/css/break-before/index.html index 35bf0c5215..7ea0446d08 100644 --- a/files/fr/web/css/break-before/index.html +++ b/files/fr/web/css/break-before/index.html @@ -143,7 +143,7 @@ break-before: unset; </tbody> </table> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La valeur <code>always</code> pour <code>page-break-before</code> a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est <code>page</code> et non <code>always</code>.</p> </div> diff --git a/files/fr/web/css/calc()/index.html b/files/fr/web/css/calc()/index.html index 6f3cbb1c7e..b3eb962d7b 100644 --- a/files/fr/web/css/calc()/index.html +++ b/files/fr/web/css/calc()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/calc() <p>La fonction <strong><code>calc()</code></strong> peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à <code>calc()</code>, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.</p> -<pre class="brush: css no-line-numbers notranslate">/* property: calc(expression) */ +<pre class="brush: css no-line-numbers">/* property: calc(expression) */ width: calc(100% - 80px); </pre> @@ -55,7 +55,7 @@ width: calc(100% - 80px); <p><code>calc()</code> rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :</p> -<pre class="brush: css notranslate">.banniere { +<pre class="brush: css">.banniere { position: absolute; left: 40px; width: calc(100% - 80px); @@ -68,7 +68,7 @@ width: calc(100% - 80px); } </pre> -<pre class="brush: html notranslate"><div class="banniere">C'est une bannière !</div></pre> +<pre class="brush: html"><div class="banniere">C'est une bannière !</div></pre> <p>{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}</p> @@ -78,7 +78,7 @@ width: calc(100% - 80px); <p>Regardons un peu le CSS :</p> -<pre class="brush: css notranslate">input { +<pre class="brush: css">input { padding: 2px; display: block; width: calc(100% - 1em); @@ -93,7 +93,7 @@ width: calc(100% - 80px); <p>Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons <code>calc()</code> pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div id="boiteformulaire"> <label>Tapez quelque chose :</label> <input type="text"> @@ -107,7 +107,7 @@ width: calc(100% - 80px); <p>Prenons la feuille de style suivante :</p> -<pre class="brush: css notranslate">.toto { +<pre class="brush: css">.toto { --largeurA: 100px; --largeurB: calc(var(--largeurA) / 2); --largeurC: calc(var(--largeurB) / 2); @@ -120,7 +120,7 @@ width: calc(100% - 80px); <p>Lorsque vous utilisez <code>calc()</code> pour définir la taille d'un texte, assurez-vous d'inclure <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a>. Par exemple :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> diff --git a/files/fr/web/css/caption-side/index.html b/files/fr/web/css/caption-side/index.html index e708794974..46b1691fd8 100644 --- a/files/fr/web/css/caption-side/index.html +++ b/files/fr/web/css/caption-side/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/caption-side <div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/caret-color/index.html b/files/fr/web/css/caret-color/index.html index 71a7d3ed85..ef1f0eb278 100644 --- a/files/fr/web/css/caret-color/index.html +++ b/files/fr/web/css/caret-color/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/caret-color <div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque {{cssxref("cursor")}} vaut <code>auto</code> ou <code>text</code> ou <code>vertical-text</code>, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.</p> </div> @@ -39,7 +37,7 @@ caret-color: hsla(228, 4%, 24%, 0.8);</pre> <dl> <dt><code>auto</code></dt> <dd>L'agent utilisateur doit utiliser <code>currentcolor</code> mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.). - <div class="note"><strong>Note :</strong> Bien que l'agent utilisateur puisse utiliser <code>currentcolor</code> pour la valeur <code>auto</code>, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur <code>currentcolor</code>).</div> + <div class="note"><p><strong>Note :</strong> Bien que l'agent utilisateur puisse utiliser <code>currentcolor</code> pour la valeur <code>auto</code>, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur <code>currentcolor</code>).</p></div> </dd> <dt><color></dt> <dd>L'agent utilisateur utilise la couleur ({{cssxref("<color>")}}) indiquée comme couleur pour le curseur de saisie.</dd> @@ -95,7 +93,7 @@ caret-color: hsla(228, 4%, 24%, 0.8);</pre> <ul> <li>{{HTMLElement("input")}}</li> <li>L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément éditable</li> - <li><a href="/fr/docs/Web/HTML/Contenu_editable">Rendre du contenu éditable</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Editable_content">Rendre du contenu éditable</a></li> <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li> <li>Le type de données {{cssxref("<color>")}}</li> <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li> diff --git a/files/fr/web/css/clamp()/index.html b/files/fr/web/css/clamp()/index.html index 2781cfa678..242f7aa3f6 100644 --- a/files/fr/web/css/clamp()/index.html +++ b/files/fr/web/css/clamp()/index.html @@ -15,14 +15,14 @@ translation_of: Web/CSS/clamp() <p><strong>Note :</strong> l'expression <code>clamp(MIN, VAL, MAX)</code> sera résolue comme <code>max(MIN, min(VAL, MAX)))</code>.</p> </div> -<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px); +<pre class="brush: css no-line-numbers">width: clamp(10px, 4em, 80px); </pre> <p>Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.</p> <p>Prenons comme hypothèse qu'un em mesure 16px de large :</p> -<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px); +<pre class="brush: css no-line-numbers">width: clamp(10px, 4em, 80px); /* avec 1em = 16px, on a 4em = 16px * 4 = 64px */ width: clamp(10px, 64px, 80px); /* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */ @@ -65,7 +65,7 @@ width: 64px; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 2rem; } h1.responsive { @@ -77,7 +77,7 @@ h1.responsive { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1> +<pre class="brush: html"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1> <h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1> </pre> diff --git a/files/fr/web/css/clear/index.html b/files/fr/web/css/clear/index.html index 1b2fba1541..541ff870fa 100644 --- a/files/fr/web/css/clear/index.html +++ b/files/fr/web/css/clear/index.html @@ -13,16 +13,14 @@ translation_of: Web/CSS/clear <div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la bordure</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/Fusion_des_marges"> fusion des marges (<em>margin collapsing</em>)</a> verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.</p> +<p>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le bord de la bordure</a> de l'élément sous <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"> fusion des marges (<em>margin collapsing</em>)</a> verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.</p> <p>Lorsqu'elle est appliquée aux éléments flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.</p> -<p>Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du <a href="/fr/docs/Web/CSS/Block_formatting_context">même contexte de formatage</a>.</p> +<p>Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">même contexte de formatage</a>.</p> <div class="note"> -<p><strong>Note : </strong>Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser <code>clear</code> sur un pseudo-élément remplacé {{cssxref("::after")}}.</p> +<p><strong>Note :</strong> Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser <code>clear</code> sur un pseudo-élément remplacé {{cssxref("::after")}}.</p> <pre class="brush: css">#conteneur::after { content: ""; @@ -34,7 +32,7 @@ translation_of: Web/CSS/clear <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css:no-line-numbers">/* Valeurs avec mot-clé */ +<pre class="brush: css">/* Valeurs avec mot-clé */ clear: none; clear: left; clear: right; @@ -230,5 +228,5 @@ p { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîtes</a></li> </ul> diff --git a/files/fr/web/css/clip-path/index.html b/files/fr/web/css/clip-path/index.html index 0e59f1bbec..1888fb3c17 100644 --- a/files/fr/web/css/clip-path/index.html +++ b/files/fr/web/css/clip-path/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/clip-path <div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La propriété <code>clip-path</code> remplace la propriété {{cssxref("clip")}} désormais dépréciée.</p> </div> @@ -98,8 +96,7 @@ clip-path: unset; <h3 id="Comparaison_entre_HTML_et_SVG">Comparaison entre HTML et SVG</h3> -<div class="hidden" id="clip-path"> -<pre class="brush: html"><svg class="defs"> +<pre class="brush: html hidden"><svg class="defs"> <defs> <clipPath id="myPath" clipPathUnits="objectBoundingBox"> <path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /> @@ -518,9 +515,8 @@ svg text { svg text.em { font-style: italic; }</pre> -</div> -<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}}</p> <h3 id="Exemple_complet">Exemple complet</h3> @@ -556,15 +552,11 @@ svg text.em { } </pre> -<div class="hidden"> -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath"); +<pre class="brush: js hidden">var clipPathSelect = document.getElementById("clipPath"); clipPathSelect.addEventListener("change", function (evt) { document.getElementById("clipped").style.clipPath = evt.target.value; }); </pre> -</div> <h4 id="Résultat">Résultat</h4> diff --git a/files/fr/web/css/clip/index.html b/files/fr/web/css/clip/index.html index 8b882c9078..a7cf1ead61 100644 --- a/files/fr/web/css/clip/index.html +++ b/files/fr/web/css/clip/index.html @@ -27,7 +27,7 @@ clip: unset; </pre> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.</p> +<p><strong>Attention :</strong> Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.</p> </div> <p>{{cssinfo}}</p> @@ -38,8 +38,7 @@ clip: unset; <dl> <dt><code><shape></code></dt> - <dd>Une forme rectangulaire indiquée avec <code>rect(<haut>, <droite>, <bas>, <gauche>)</code> ou avec <code>rect(<haut> <droite> <bas> <gauche>)</code>. <code><haut></code> et <code><bas></code> indiquent les décalages à partir du haut de la boîte de bordure, <code><gauche></code> et <code><droite></code> indiquent les décalages à partir du bord gauche de la boîte de bordure.</dd> - <dd><code><haut></code>, <code><droite></code>, <code><bas></code> et <code><gauche></code> peuvent avoir une valeur de longueur (type {{cssxref("<length>")}}) ou<code> auto</code>. Si un des côtés vaut <code>auto</code>, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.</dd> + <dd>Une forme rectangulaire indiquée avec <code>rect(<haut>, <droite>, <bas>, <gauche>)</code> ou avec <code>rect(<haut> <droite> <bas> <gauche>)</code>. <code><haut></code> et <code><bas></code> indiquent les décalages à partir du haut de la boîte de bordure, <code><gauche></code> et <code><droite></code> indiquent les décalages à partir du bord gauche de la boîte de bordure.<code><haut></code>, <code><droite></code>, <code><bas></code> et <code><gauche></code> peuvent avoir une valeur de longueur (type {{cssxref("<length>")}}) ou<code> auto</code>. Si un des côtés vaut <code>auto</code>, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.</dd> <dt><code>auto</code></dt> <dd>L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que <code>rect(auto, auto, auto, auto)</code>.</dd> </dl> diff --git a/files/fr/web/css/color-adjust/index.html b/files/fr/web/css/color-adjust/index.html index 88640a6c4d..53e02b582a 100644 --- a/files/fr/web/css/color-adjust/index.html +++ b/files/fr/web/css/color-adjust/index.html @@ -11,12 +11,10 @@ translation_of: Web/CSS/color-adjust --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">La propriété CSS <strong><code>color-adjust</code></strong> contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.</span></p> +<p>La propriété CSS <strong><code>color-adjust</code></strong> contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.</p> <div>{{EmbedInteractiveExample("pages/css/color-adjust.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), <code>#411</code> qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (<code>black</code> pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/color/index.html b/files/fr/web/css/color/index.html index 8b6d594f54..2b31fd1dae 100644 --- a/files/fr/web/css/color/index.html +++ b/files/fr/web/css/color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/color <div>{{EmbedInteractiveExample("pages/css/color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé ({{cssxref("<gradient>")}}) car en CSS un dégradé est considéré comme une image (type {{cssxref("<image>")}}) et pas comme une couleur.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/color_value/index.html b/files/fr/web/css/color_value/index.html index c362b45dab..e35eb28083 100644 --- a/files/fr/web/css/color_value/index.html +++ b/files/fr/web/css/color_value/index.html @@ -10,24 +10,24 @@ original_slug: Web/CSS/Type_color --- <div>{{CSSRef}}</div> -<p>Le type de données CSS <strong><code><color></code></strong> permet de représenter des couleurs dans <a class="external" href="https://fr.wikipedia.org/wiki/SRGB">l'espace de couleurs sRGB</a>. Une couleur pourra être décrite de trois façons :</p> +<p>Le type de données CSS <strong><code><color></code></strong> permet de représenter des couleurs dans <a href="https://fr.wikipedia.org/wiki/SRGB">l'espace de couleurs sRGB</a>. Une couleur pourra être décrite de trois façons :</p> <ul> <li>grâce à un mot-clé (comme <code>blue</code> ou <code>transparent</code> par exemple)</li> <li>en utilisant <a href="https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal">le système de coordonnées cubiques RGB</a> (grâce à la notation #-hexadecimal ou aux notations fonctionnelles <code>rgb()</code> et <code>rgba()</code>)</li> - <li>en utilisant <a class="external" href="https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re">le système de coordonnées cylindriques HSL</a> (grâce aux notations fonctionnelles <code>hsl()</code> et <code>hsla()</code>)</li> + <li>en utilisant <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re">le système de coordonnées cylindriques HSL</a> (grâce aux notations fonctionnelles <code>hsl()</code> et <code>hsla()</code>)</li> </ul> <p>En plus de la couleur exprimée dans l'espace RGB, une valeur <code><color></code> contient également un <a href="https://fr.wikipedia.org/wiki/Alpha_blending">canal alpha</a> qui décrit la transparence de l'image et donc la façon dont cette image se <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">compose</a> avec son arrière-plan.</p> <div class="note"> -<p><strong>Note :</strong> Cet article décrit le type de donnée CSS <code><color></code> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire <a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs à des éléments HTML grâce à CSS</a>.</p> +<p><strong>Note :</strong> Cet article décrit le type de donnée CSS <code><color></code> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire <a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs à des éléments HTML grâce à CSS</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> <div class="note"> -<p>Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge <a href="https://fr.wikipedia.org/wiki/Profil_ICC">le profil de couleurs</a> de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.</p> +<p><strong>Note :</strong> Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge <a href="https://fr.wikipedia.org/wiki/Profil_ICC">le profil de couleurs</a> de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.</p> </div> <p>Il existe plusieurs méthodes pour décrire une valeur <code><color></code>.</p> @@ -65,7 +65,7 @@ original_slug: Web/CSS/Type_color <li>Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.</li> </ul> -<table id="colors_table"> +<table> <thead> <tr> <th scope="col">Spécification</th> @@ -981,7 +981,8 @@ original_slug: Web/CSS/Type_color <p><strong>Note :</strong> Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">la spécification W3C indique que <code>transparent</code> devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha</a>. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur <code>alpha</code> de 0.</p> </div> -<div class="note"><strong>Note historique :</strong> Le mot-clé <code>transparent</code> n'était pas une valeur de type <code><color></code> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via <a href="https://fr.wikipedia.org/wiki/Alpha_blending">les canaux alpha</a>, <code>transparent</code> a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <code><color></code> est nécessaire (la propriété {{cssxref("color")}} par exemple).</div> +<div class="note"> + <p><strong>Note :</strong> Historiquement, le mot-clé <code>transparent</code> n'était pas une valeur de type <code><color></code> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via <a href="https://fr.wikipedia.org/wiki/Alpha_blending">les canaux alpha</a>, <code>transparent</code> a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <code><color></code> est nécessaire (la propriété {{cssxref("color")}} par exemple).</p></div> <h3 id="Le_mot-clé_currentColor">Le mot-clé <code>currentColor</code></h3> @@ -1018,7 +1019,7 @@ original_slug: Web/CSS/Type_color <p>{{EmbedLiveSample('Exemple_live_n°2')}}</p> </div> -<h3 id="Les_couleurs_RGB"><a id="rgb" name="rgb">Les couleurs RGB</a></h3> +<h3 id="Les_couleurs_RGB">Les couleurs RGB</h3> <p>Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.</p> @@ -1080,7 +1081,7 @@ rgba(1e2, .5e1, .5e0, +.25e2%) rgba(255 0 0 / 0.4) /* 40% opacité - rouge */ rgba(255 0 0 / 40%) /* 40% opacité - rouge */</pre> -<h3 id="Les_couleurs_HSL"><a id="hsl" name="hsl">Les couleurs HSL</a></h3> +<h3 id="Les_couleurs_HSL">Les couleurs HSL</h3> <p>Les couleurs peuvent également être définies selon le modèle HSL (pour <em>Hue-Saturation-Lightness</em> qui signifie teinte-saturation-clarté).</p> @@ -1113,7 +1114,7 @@ rgba(255 0 0 / 40%) /* 40% opacité - rouge */</pre> <h5 id="HSL">HSL</h5> -<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0, 100%,50%) /* red */ +<pre class="brush: css">hsl(0, 100%,50%) /* red */ hsl(30, 100%,50%) hsl(60, 100%,50%) hsl(90, 100%,50%) @@ -1155,7 +1156,7 @@ hsl(240 100% 50% / 5%) /* 5% opaque blue with percentage value for alpha */ <h5 id="HSLa">HSLa</h5> -<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240,100%,50%,0.05) /* 5% opaque blue */ +<pre class="brush: css">hsla(240,100%,50%,0.05) /* 5% opaque blue */ hsla(240,100%,50%, 0.4) /* 40% opaque blue */ hsla(240,100%,50%, 0.7) /* 70% opaque blue */ hsla(240,100%,50%, 1) /* full opaque blue */ @@ -1176,7 +1177,7 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre> <p>Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).</p> -<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> +<dl> <dt>ActiveBorder</dt> <dd>La bordure de la fenêtre active.</dd> <dt>ActiveCaption</dt> @@ -1237,7 +1238,7 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre> <h3 id="Ajouts_propres_à_Mozilla_pour_les_couleurs_système">Ajouts propres à Mozilla pour les couleurs système</h3> -<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> +<dl> <dt>-moz-ButtonDefault</dt> <dd>La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.</dd> <dt>-moz-ButtonHoverFace</dt> @@ -1249,70 +1250,59 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre> <dt>-moz-CellHighlightText</dt> <dd>La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec <code>-moz-CellHighlight</code> comme couleur d'arrière-plan. Voir aussi <code>-moz-html-CellHighlightText</code>.</dd> <dt>-moz-Combobox</dt> - <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec <code>-moz-ComboboxText</code> comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-Field</code> à la place.</dd> + <dd> La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec <code>-moz-ComboboxText</code> comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-Field</code> à la place.</dd> <dt>-moz-ComboboxText</dt> - <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec <code>-moz-Combobox</code> comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-FieldText</code> à la place.</dd> + <dd> La couleur du texte pour les listes déroulantes. Devrait être utilisée avec <code>-moz-Combobox</code> comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-FieldText</code> à la place.</dd> <dt>-moz-Dialog</dt> <dd>La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-DialogText</code> comme couleur de premier-plan.</dd> <dt>-moz-DialogText</dt> <dd>La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-Dialog</code> comme couleur d'arrière-plan.</dd> <dt>-moz-dragtargetzone</dt> <dt>-moz-EvenTreeRow</dt> - <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-OddTreeRow</code>.</dd> + <dd> La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-OddTreeRow</code>.</dd> <dt>-moz-Field</dt> <dd>La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec <code>-moz-FieldText</code> comme couleur de premier-plan.</dd> <dt>-moz-FieldText</dt> <dd>La couleur du texte pour les champs texte. Devrait être utilisée avec <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, ou <code>-moz-OddTreeRow</code> comme couleur d'arrière-plan.</dd> <dt>-moz-html-CellHighlight</dt> - <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlightText</code> comme couleur de premier-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlight</code>.</dd> + <dd> La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlightText</code> comme couleur de premier-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlight</code>.</dd> <dt>-moz-html-CellHighlightText</dt> - <dd>{{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlight</code> comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlightText</code>.</dd> - <dt>-moz-mac-accentdarkestshadow</dt> - <dt>-moz-mac-accentdarkshadow</dt> - <dt>-moz-mac-accentface</dt> - <dt>-moz-mac-accentlightesthighlight</dt> - <dt>-moz-mac-accentlightshadow</dt> - <dt>-moz-mac-accentregularhighlight</dt> - <dt>-moz-mac-accentregularshadow</dt> - <dt>-moz-mac-chrome-active</dt> - <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> - <dt>-moz-mac-chrome-inactive</dt> - <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> - <dt>-moz-mac-focusring</dt> - <dt>-moz-mac-menuselect</dt> - <dt>-moz-mac-menushadow</dt> - <dt>-moz-mac-menutextselect</dt> - <dt>-moz-MenuHover</dt> + <dd> La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlight</code> comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlightText</code>.</dd> + <dt>-moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow</dt> + <dd><p>Couleurs d'accentuation.</p></dd> + <dt>-moz-mac-chrome-active, -moz-mac-chrome-inactive</dt> + <dd>Couleurs pour les éléments de chrome actifs/inactifs</dd> + <dt>-moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover</dt> <dd>La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à <code>Highlight</code>. Devrait être utilisée avec <code>-moz-MenuHoverText</code> ou <code>-moz-MenuBarHoverText</code> comme couleur de premier-plan.</dd> <dt>-moz-MenuHoverText</dt> <dd>La couleur du texte pour les éléments de menu survolés. Généralement similaire à <code>HighlightText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd> <dt>-moz-MenuBarText</dt> - <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à <code>MenuText</code>. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd> + <dd> La couleur du texte dans les barres de menu. Généralement similaire à <code>MenuText</code>. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd> <dt>-moz-MenuBarHoverText</dt> <dd>La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à <code>-moz-MenuHoverText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd> <dt>-moz-nativehyperlinktext</dt> - <dd>{{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.</dd> + <dd> La couleur par défaut de la plate-forme pour les hyperliens.</dd> <dt>-moz-OddTreeRow</dt> - <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-EvenTreeRow</code>.</dd> + <dd> La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-EvenTreeRow</code>.</dd> <dt>-moz-win-accentcolor</dt> - <dd>{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.</dd> + <dd> Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.</dd> <dt>-moz-win-accentcolortext</dt> - <dd>{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.</dd> + <dd> Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.</dd> <dt>-moz-win-communicationstext</dt> - <dd>{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd> + <dd> Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("appearance")}}: -moz-win-communications-toolbox;</code>.</dd> <dt>-moz-win-mediatext</dt> - <dd>{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd> + <dd> Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("appearance")}}: -moz-win-media-toolbox</code>.</dd> </dl> <h3 id="Ajout_de_Mozilla_pour_les_couleurs_liées_aux_préférences">Ajout de Mozilla pour les couleurs liées aux préférences</h3> -<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;"> +<dl> <dt>-moz-activehyperlinktext</dt> <dd>La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd> <dt>-moz-default-background-color</dt> - <dd>{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.</dd> + <dd> La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.</dd> <dt>-moz-default-color</dt> - <dd>{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.</dd> + <dd> La couleur choisie par l'utilisateur pour la couleur du texte.</dd> <dt>-moz-hyperlinktext</dt> <dd>La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd> <dt>-moz-visitedhyperlinktext</dt> @@ -1321,11 +1311,11 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre> <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs de type <code><color></code> peuvent être interpolées afin de créer des animations ou des dégradés (type <code><gradient></code>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans <a class="external" href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">l'espace de couleurs alpha sRGBA prémultiplié</a> afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon <a href="/fr/docs/Web/CSS/timing-function">la fonction de temporisation</a> associée à l'animation.</p> +<p>Les valeurs de type <code><color></code> peuvent être interpolées afin de créer des animations ou des dégradés (type <code><gradient></code>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">l'espace de couleurs alpha sRGBA prémultiplié</a> afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon <a href="/fr/docs/Web/CSS/easing-function">la fonction de temporisation</a> associée à l'animation.</p> <h2 id="Accessibilité">Accessibilité</h2> -<p>La recommandation du W3C : <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Ies couleurs et le contraste</a> pour plus d'informations).</p> +<p>La recommandation du W3C : <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast">Ies couleurs et le contraste</a> pour plus d'informations).</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/column-count/index.html b/files/fr/web/css/column-count/index.html index 5bc759d2f4..372e04db1d 100644 --- a/files/fr/web/css/column-count/index.html +++ b/files/fr/web/css/column-count/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-count <div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/column-fill/index.html b/files/fr/web/css/column-fill/index.html index c2d4e37d2c..9d27ef3d0e 100644 --- a/files/fr/web/css/column-fill/index.html +++ b/files/fr/web/css/column-fill/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-fill <div>{{EmbedInteractiveExample("pages/css/column-fill.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/column-gap/index.html b/files/fr/web/css/column-gap/index.html index 2a0e75cfe3..d59b181788 100644 --- a/files/fr/web/css/column-gap/index.html +++ b/files/fr/web/css/column-gap/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/column-gap <div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété <code>column-gap</code> était initialement définie dans le module de spécification <a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>Multi-column Layout</em> (disposition en colonnes)</a>. Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em>. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.</p> <div class="note"> @@ -125,7 +123,7 @@ column-gap: unset; <h4 id="CSS_3">CSS</h4> -<pre class="brush: css; highlight[6]">#grid { +<pre class="brush: css">#grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); @@ -138,11 +136,9 @@ column-gap: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">#grid { +<pre class="brush: css hidden">#grid { grid-column-gap: 20px; }</pre> -</div> <h4 id="Résultat_3">Résultat</h4> diff --git a/files/fr/web/css/column-rule-color/index.html b/files/fr/web/css/column-rule-color/index.html index bfcd701946..c3d4c6938b 100644 --- a/files/fr/web/css/column-rule-color/index.html +++ b/files/fr/web/css/column-rule-color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-color <div>{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de couleur */ diff --git a/files/fr/web/css/column-rule-style/index.html b/files/fr/web/css/column-rule-style/index.html index ef4d7763fc..70bab31e69 100644 --- a/files/fr/web/css/column-rule-style/index.html +++ b/files/fr/web/css/column-rule-style/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-style <div>{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/column-rule-width/index.html b/files/fr/web/css/column-rule-width/index.html index 9794388667..27b3b4397a 100644 --- a/files/fr/web/css/column-rule-width/index.html +++ b/files/fr/web/css/column-rule-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-width <div>{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/column-rule/index.html b/files/fr/web/css/column-rule/index.html index 3e63b413ed..9ac19f4c6f 100644 --- a/files/fr/web/css/column-rule/index.html +++ b/files/fr/web/css/column-rule/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule <div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est une propriété raccourcie qui permet de définir {{cssxref("column-rule-width")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-color")}} (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).</p> <div class="note"> @@ -56,14 +54,12 @@ column-rule: unset; <h3 id="HTML">HTML</h3> -<div id="htmlOutputWrapper"> -<pre class="brush: html" id="htmlOutput"><div id="col_rul"> +<pre class="brush: html"><div id="col_rul"> <p> column one </p> <p> column two </p> <p> column three </p> </div> </pre> -</div> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/css/column-span/index.html b/files/fr/web/css/column-span/index.html index fe0ca74b74..ab7508ea5b 100644 --- a/files/fr/web/css/column-span/index.html +++ b/files/fr/web/css/column-span/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-span <div>{{EmbedInteractiveExample("pages/css/column-span.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ column-span: none; column-span: all; diff --git a/files/fr/web/css/column-width/index.html b/files/fr/web/css/column-width/index.html index 52dc069f9c..ebc538bee6 100644 --- a/files/fr/web/css/column-width/index.html +++ b/files/fr/web/css/column-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-width <div>{{EmbedInteractiveExample("pages/css/column-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px. Ce réglage permet donc d'obtenir des effets qui s'adaptent aux différentes tailles d'écrans. Manipulée avec la propriété {{cssxref("column-count")}} qui a la précédence, il est nécessaire de définir toutes les valeurs de longueur pour avoir une largeur de colonne CSS exacte. Pour du texte horizontal, ces propriétés sont {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} et {{cssxref('column-rule-width')}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/columns/index.html b/files/fr/web/css/columns/index.html index 8faef4d595..f13537bfe4 100644 --- a/files/fr/web/css/columns/index.html +++ b/files/fr/web/css/columns/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/columns <div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/compositing_and_blending/index.html b/files/fr/web/css/compositing_and_blending/index.html index 3c62524882..721ca17ac9 100644 --- a/files/fr/web/css/compositing_and_blending/index.html +++ b/files/fr/web/css/compositing_and_blending/index.html @@ -17,22 +17,17 @@ translation_of: Web/CSS/Compositing_and_Blending <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("background-blend-mode")}}</li> <li>{{cssxref("isolation")}}</li> <li>{{cssxref("mix-blend-mode")}}</li> - <li> </li> </ul> -</div> <h3 id="Types_de_donnée">Types de donnée</h3> -<div class="index"> <ul> <li>{{cssxref("<blend-mode>")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/contain/index.html b/files/fr/web/css/contain/index.html index b98788d18f..e08a63ec08 100644 --- a/files/fr/web/css/contain/index.html +++ b/files/fr/web/css/contain/index.html @@ -29,7 +29,7 @@ contain: unset; <p>Cette propriété s'avère utile pour les pages qui contiennent de nombreux composants indépendants et permet de limiter la portée des règles sur le reste de la page.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Lorsqu'elle est appliquée avec une valeur <code>paint</code>, <code>strict</code> ou <code>content</code>, cette propriété crée :</p> <ul> diff --git a/files/fr/web/css/containing_block/index.html b/files/fr/web/css/containing_block/index.html index 538fa642c6..8e3bff8fb9 100644 --- a/files/fr/web/css/containing_block/index.html +++ b/files/fr/web/css/containing_block/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur --- <div>{{CSSRef}}</div> -<p class="summary">Le <strong>bloc englobant (<em>containing block</em>)</strong> affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">zone de contenu</a> de l'ancêtre de <a href="/fr/docs/Web/HTML/Éléments_en_bloc">bloc</a> le plus proche mais cette règle n'est pas absolue. <span class="seoSummary">Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.</span></p> +<p>Le <strong>bloc englobant (<em>containing block</em>)</strong> affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#les_propri%c3%a9t%c3%a9s_des_bo%c3%aetes">zone de contenu</a> de l'ancêtre de <a href="/fr/docs/Web/HTML/Block-level_elements">bloc</a> le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.</p> <p>Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :</p> @@ -21,7 +21,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur <li>La zone de marge (<em>margin area</em>)</li> </ol> -<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> +<p><img alt="Diagram of the box model" src="box-model.png"></p> <div class="note"> <p><strong>Note :</strong> Voir <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">cet article pour découvrir le modèle de boîtes</a> en CSS.</p> @@ -70,7 +70,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur <p>Le code HTML utilisé pour les exemples suivants sera :</p> -<pre class="brush: html notranslate"><body> +<pre class="brush: html"><body> <section> <p>Et voici un paragraphe !</p> </section> @@ -81,16 +81,14 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur <p>Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html hidden"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } @@ -116,16 +114,14 @@ p { <p>Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}}<strong> </strong>car <code><section></code> n'est pas un conteneur de bloc en raison de <code>display: inline</code> et il ne crée pas de contexte de formatage.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } @@ -147,16 +143,14 @@ p { <p>Ici, le bloc englobant du paragraphe est <code><section></code> car la propriété <code>position</code> de ce dernier vaut <code>absolute</code>. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait <code>border-box</code>).</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html hidden"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } @@ -186,16 +180,14 @@ p { <p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>fixed</code>. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le <em>viewport</em> pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html hidden"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } @@ -223,16 +215,14 @@ p { <p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>absolute</code>. Son bloc englobant est donc <code><section></code> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas <code>none</code>.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html hidden"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } diff --git a/files/fr/web/css/content/index.html b/files/fr/web/css/content/index.html index 6e2af97e48..cd5ad04b5f 100644 --- a/files/fr/web/css/content/index.html +++ b/files/fr/web/css/content/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/content --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés anonymes</a>.</em></p> +<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés anonymes</a>.</em></p> <pre class="brush: css no-line-numbers">/* Des mots-clés qui ne peuvent pas être mélangés avec d'autres valeurs */ @@ -60,11 +60,9 @@ content: unset; <dt>{{cssxref("<string>")}}</dt> <dd>Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (<code>\000A9</code> représentera par exemple le symbole ©).</dd> <dt>{{cssxref("<image>")}}</dt> - <dd>Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element", "element()")}} et qui indique le contenu à afficher.</dd> - <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("<counter>")}})</dt> - <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("counter")}} or {{cssxref("counters")}}.</dd> - <dd>La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut).</dd> - <dd>La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/counter">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd> + <dd>Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.</dd> + <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})</dt> + <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut). La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd> <dt><code>attr(X)</code></dt> <dd>Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.</dd> <dt><code>open-quote</code> | <code>close-quote</code></dt> @@ -216,7 +214,7 @@ li { <h2 id="Accessibilité">Accessibilité</h2> -<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p> +<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p> <ul> <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)</a></li> diff --git a/files/fr/web/css/counter()/index.html b/files/fr/web/css/counter()/index.html index a5ca778b1b..073e209928 100644 --- a/files/fr/web/css/counter()/index.html +++ b/files/fr/web/css/counter()/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/counter() --- <div>{{CSSRef}}</div> -<p>La fonction CSS <code><strong>counter</strong></code><strong><code>()</code></strong> renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("<string>")}} est attendue.</p> +<p>La fonction CSS <code><strong>counter</strong></code><strong><code>()</code></strong> renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("<string>")}} est attendue.</p> <pre class="notranslate">/* Usage simple */ counter(nomcompteur); @@ -18,12 +18,12 @@ counter(nomcompteur); /* Modifier le type d'affichage du compteur */ counter(nomcompteur, upper-roman)</pre> -<p>Un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur</a> CSS n'a aucun effet visible en lui-même. C'est la fonction <code>counter()</code> (ainsi que <code>counters()</code>) qui permet d'utiliser la chaîne de caractère ou l'image résultante.</p> +<p>Un <a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">compteur</a> CSS n'a aucun effet visible en lui-même. C'est la fonction <code>counter()</code> (ainsi que <code>counters()</code>) qui permet d'utiliser la chaîne de caractère ou l'image résultante.</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> La fonction <code>counter()</code> peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.</p> +<div class="note"> +<p><strong>Note :</strong> La fonction <code>counter()</code> peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.</p> -<p>Veillez à consulter <a href="#Browser_compatibility">le tableau de compatibilité des navigateurs</a> avant d'utiliser ces fonctionnalités en production.</p> +<p>Veillez à consulter <a href="#browser_compatibility">le tableau de compatibilité des navigateurs</a> avant d'utiliser ces fonctionnalités en production.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -33,8 +33,8 @@ counter(nomcompteur, upper-roman)</pre> <dl> <dt>{{cssxref("<custom-ident>")}}</dt> <dd>Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd> - <dt><code style="white-space: nowrap;"><counter-style></code></dt> - <dd>Un nom de style de compteur ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. Le nom d'un style de compteur peut indiquer un compteur <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien</a> ou un autre <a href="/fr/docs/Web/CSS/CSS_Counter_Styles">style de compteur prédéfini</a>. Si cette valeur n'est pas fournie, le style par défaut est décimal.</dd> + <dt><code><counter-style></code></dt> + <dd>Un nom de style de compteur ou une fonction <a href="/fr/docs/Web/CSS/symbols()"><code>symbols()</code></a>. Le nom d'un style de compteur peut indiquer un compteur <a href="/fr/docs/Web/CSS/list-style-type#valeurs">alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien</a> ou un autre <a href="/fr/docs/Web/CSS/CSS_Counter_Styles">style de compteur prédéfini</a>. Si cette valeur n'est pas fournie, le style par défaut est décimal.</dd> <dt><code>none</code></dt> <dd>Représente la chaîne de caractère vide.</dd> </dl> @@ -49,7 +49,7 @@ counter(nomcompteur, upper-roman)</pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><ol> +<pre class="brush: html;"><ol> <li></li> <li></li> <li></li> @@ -57,7 +57,7 @@ counter(nomcompteur, upper-roman)</pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[2] notranslate">ol { +<pre class="brush: css">ol { counter-reset: listCounter; } li { @@ -76,7 +76,7 @@ li::after { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li></li> <li></li> <li></li> @@ -84,7 +84,7 @@ li::after { <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">ol { +<pre class="brush: css">ol { counter-reset: count; } @@ -132,9 +132,9 @@ li::after { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Utiliser les compteurs CSS</a></li> <li>{{cssxref("counter-reset")}}</li> <li>{{cssxref("counter-increment")}}</li> <li>{{cssxref("@counter-style")}}</li> - <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counters">counters()</a></code></li> + <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counters()">counters()</a></code></li> </ul> diff --git a/files/fr/web/css/counter-increment/index.html b/files/fr/web/css/counter-increment/index.html index 9757170c1d..d9e0aa20db 100644 --- a/files/fr/web/css/counter-increment/index.html +++ b/files/fr/web/css/counter-increment/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/counter-increment <div>{{EmbedInteractiveExample("pages/css/counter-increment.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété {{cssxref("counter-reset")}}.</p> </div> diff --git a/files/fr/web/css/counter-reset/index.html b/files/fr/web/css/counter-reset/index.html index a36bb40929..1b46b41b63 100644 --- a/files/fr/web/css/counter-reset/index.html +++ b/files/fr/web/css/counter-reset/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/counter-reset <div>{{EmbedInteractiveExample("pages/css/counter-reset.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS {{cssxref("counter-increment")}}.</p> </div> diff --git a/files/fr/web/css/counters()/index.html b/files/fr/web/css/counters()/index.html index d0ecac78bc..6f78f5f900 100644 --- a/files/fr/web/css/counters()/index.html +++ b/files/fr/web/css/counters()/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/counters() <li><code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code></li> </ul> -<p>Cette fonction est généralement utilisée sur des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> mais peut théoriquement être utilisée à tout endroit où une valeur <code><a href="/fr/docs/Web/CSS/string"><string></a></code> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera <code>decimal</code>).</p> +<p>Cette fonction est généralement utilisée sur des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> mais peut théoriquement être utilisée à tout endroit où une valeur <code><a href="/fr/docs/Web/CSS/string"><string></a></code> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera <code>decimal</code>).</p> <pre class="notranslate">/* Utilisation simple - style decimal par défaut */ counters(countername, '-'); @@ -26,7 +26,7 @@ counters(countername, '.', upper-roman)</pre> <p>Un compteur n'est pas visible en tant que tel. Les fonctions <code>counters()</code> et <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code> doivent être utilisées pour créer du contenu.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Bien que la fonction <code>counters()</code> puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale.</p> <p>Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.</p> @@ -39,8 +39,8 @@ counters(countername, '.', upper-roman)</pre> <dl> <dt>{{cssxref("<custom-ident>")}}</dt> <dd>Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd> - <dt><code style="white-space: nowrap;"><counter-style></code></dt> - <dd>Un style de compteur (cf. <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">les valeurs décrites pour <code>list-style-type</code></a>) ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. En absence de valeur, le style utilisé sera <code>decimal</code>.</dd> + <dt><code><counter-style></code></dt> + <dd>Un style de compteur (cf. <a href="/fr/docs/Web/CSS/list-style-type#valeurs">les valeurs décrites pour <code>list-style-type</code></a>) ou une fonction <a href="/fr/docs/Web/CSS/symbols()"><code>symbols()</code></a>. En absence de valeur, le style utilisé sera <code>decimal</code>.</dd> <dt>{{cssxref("<string>")}}</dt> <dd>Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. <code>\000A9</code> représentera par exemple le symbole copyright (©).</dd> <dt><code>none</code></dt> @@ -57,7 +57,7 @@ counters(countername, '.', upper-roman)</pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><ol> +<pre class="brush: html;"><ol> <li> <ol> <li></li> @@ -83,7 +83,7 @@ counters(countername, '.', upper-roman)</pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[2] notranslate">ol { +<pre class="brush: css">ol { counter-reset: listCounter; } li { @@ -104,7 +104,7 @@ li::before { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><ol> +<pre class="brush: html;"><ol> <li> <ol> <li></li> @@ -130,7 +130,7 @@ li::before { <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; highlight[2] notranslate">ol { +<pre class="brush: css">ol { counter-reset: count; } li { @@ -178,7 +178,7 @@ li::before { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Utiliser les compteurs CSS</a></li> <li>{{cssxref("counter-reset")}}</li> <li>{{cssxref("counter-increment")}}</li> <li>{{cssxref("@counter-style")}}</li> diff --git a/files/fr/web/css/cross-fade()/index.html b/files/fr/web/css/cross-fade()/index.html index 454b03cc02..452ff95ab5 100644 --- a/files/fr/web/css/cross-fade()/index.html +++ b/files/fr/web/css/cross-fade()/index.html @@ -12,11 +12,11 @@ translation_of: Web/CSS/cross-fade() <p>La fonction CSS <strong><code>cross-fade()</code></strong> peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p> +<div class="warning"> +<p><strong>Attention :</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p> </div> -<h2 id="Syntaxe_spécification"><a id="Syntaxe" name="Syntaxe">Syntaxe (spécification)</a></h2> +<h2 id="Syntaxe_spécification">Syntaxe (spécification)</h2> <p>La fonction <code>cross-fade()</code> prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.</p> @@ -26,7 +26,7 @@ translation_of: Web/CSS/cross-fade() <p>Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.</p> -<pre class="brush: css notranslate">cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ cross-fade(url(white.png) 25%, url(black.png) 75%); /* 25% blanche, 75% noire*/ cross-fade(url(white.png) 50%, url(black.png) 50%); /* 50% blanche, 50% noire */ cross-fade(url(white.png) 75%, url(black.png) 25%); /* 75% blanche, 25% noire */ @@ -38,7 +38,7 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et <p>Les lignes précédentes peuvent ainsi s'écrire également :</p> -<pre class="brush: css notranslate">cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ cross-fade(url(white.png) 25%, url(black.png)); /* 25% blanche, 75% noire*/ cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */ cross-fade(url(white.png) 75%, url(black.png)); /* 75% blanche, 25% noire */ @@ -50,22 +50,17 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et ver <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> -<div class="hidden">La syntaxe formelle décrite sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à proposer une<em>pull request</em> sur <a href="https://github.com/mdn/data">https://github.com/mdn/data</a>.</div> - -{{csssyntax}} - -<ul> -</ul> +<p>{{csssyntax}}</p> <h2 id="Exemples">Exemples</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="div"></div></pre> +<pre class="brush: html"><div id="div"></div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4-6] notranslate">#div { +<pre class="brush: css">#div { width: 300px; height: 300px; background-image: cross-fade( @@ -79,11 +74,11 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et ver <h2 id="Ancienne_syntaxe_implémentations">Ancienne syntaxe (implémentations)</h2> -<pre class="syntaxbox notranslate">cross-fade( <image, <image>, <percentage> )</pre> +<pre class="syntaxbox">cross-fade( <image, <image>, <percentage> )</pre> -<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#Syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p> +<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p> -<pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ cross-fade(url(white.png), url(black.png), 25%); /* 25% blanche, 75% noire */ cross-fade(url(white.png), url(black.png), 50%); /* 50% blanche, 50% noire */ cross-fade(url(white.png), url(black.png), 75%); /* 75% blanche, 25% noire */ @@ -98,7 +93,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; highlight[4-11] notranslate">.crossfade { +<pre class="brush: css">.crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( @@ -113,7 +108,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="crossfade"></div></pre> +<pre class="brush: html"><div class="crossfade"></div></pre> <h4 id="Résultat_2">Résultat</h4> @@ -158,7 +153,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <li>{{cssxref("url")}}</li> <li>{{cssxref("_image", "image()")}}</li> <li>{{cssxref("image-set")}}</li> - <li>{{cssxref("element")}}</li> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS" title="Using gradients">Utiliser les dégradés CSS</a></li> + <li>{{cssxref("element()")}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients" title="Using gradients">Utiliser les dégradés CSS</a></li> <li>Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},</li> </ul> diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html index 0824678ff8..7f33e6daf9 100644 --- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animation <div>{{CSSRef}}{{obsolete_header}}</div> <div class="warning"> -<p><strong>Attention !</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p> +<p><strong>Attention :</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p> </div> <p>Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, <a href="https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">basé sur ce billet de Christian Heilmann</a>, illustre une technique pour détecter la prise en charge des animations CSS.</p> @@ -96,5 +96,5 @@ if( animation === false ) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Les animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Les animations CSS</a></li> </ul> diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html index 393e33754d..a0db694124 100644 --- a/files/fr/web/css/css_animations/index.html +++ b/files/fr/web/css/css_animations/index.html @@ -15,7 +15,6 @@ original_slug: Web/CSS/Animations_CSS <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("animation")}}</li> <li>{{cssxref("animation-delay")}}</li> @@ -27,15 +26,12 @@ original_slug: Web/CSS/Animations_CSS <li>{{cssxref("animation-play-state")}}</li> <li>{{cssxref("animation-timing-function")}}</li> </ul> -</div> <h3 id="Règles_CSS">Règles @ CSS</h3> -<div class="index"> <ul> <li>{{cssxref("@keyframes")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html index adb261195e..011e1c6e3a 100644 --- a/files/fr/web/css/css_animations/tips/index.html +++ b/files/fr/web/css/css_animations/tips/index.html @@ -22,8 +22,7 @@ original_slug: Web/CSS/Animations_CSS/Conseils <p>Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).</p> -<div class="hidden"> -<pre class="brush: css">.runButton { +<pre class="brush: css hidden">.runButton { cursor: pointer; width: 300px; border: 1px solid black; @@ -36,7 +35,6 @@ original_slug: Web/CSS/Animations_CSS/Conseils background-color: darkgreen; font: 14px "Open Sans", "Arial", sans-serif; }</pre> -</div> <pre class="brush: css">@keyframes colorchange { 0% { background: yellow } diff --git a/files/fr/web/css/css_animations/using_css_animations/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html index ab83e1e420..2c0364c3f4 100644 --- a/files/fr/web/css/css_animations/using_css_animations/index.html +++ b/files/fr/web/css/css_animations/using_css_animations/index.html @@ -56,7 +56,9 @@ original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS <h2 id="Exemples">Exemples</h2> -<div class="note"><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</div> +<div class="note"> + <p><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</p> +</div> <h3 id="Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur">Utiliser une animation pour que le texte traverse la fenêtre du navigateur</h3> @@ -231,7 +233,7 @@ her in a languid, sleepy voice.</p> }</pre> <div class="note"> -<p><strong>Note </strong>: Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p> +<p><strong>Note :</strong> Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p> </div> <h3 id="Utiliser_plusieurs_valeurs_pour_différentes_animations">Utiliser plusieurs valeurs pour différentes animations</h3> @@ -358,7 +360,7 @@ element.className = "slidein"; <ul> <li>{{domxref("AnimationEvent")}}</li> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Manipuler les transitions CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Détecter la prise en charge des animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Manipuler les transitions CSS</a></li> <li><a href="https://www.cssdebutant.com">CSS</a></li> </ul> diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html index 9aa3cd49f6..c598a24870 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -9,12 +9,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p> -<div class="hidden"> -<h2 id="Border_Image_Generator" name="Border_Image_Generator">Générateur border-image</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"> <div id="container"> +<pre class="brush: html hidden"> <div id="container"> <div id="gallery"> <div id="image-gallery"> @@ -152,9 +147,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator </div> </div></pre> -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* GRID OF TWELVE +<pre class="brush: css hidden">/* GRID OF TWELVE * ========================================================================== */ .span_12 { @@ -1217,9 +1210,7 @@ body[data-move='Y'] { </pre> -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js">'use strict'; +<pre class="brush: js hidden">'use strict'; /** * UI-SlidersManager @@ -2622,6 +2613,5 @@ var BorderImage = (function BorderImage() { })(); </pre> -</div> <p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p> diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html index 993940bcdc..0cb8e25181 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -9,12 +9,9 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p> -<div class="hidden"> -<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> +<h2>border-radius-generator</h2> -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><div id="container"> +<pre class="brush: html hidden"><div id="container"> <div class="group section"> <div id="preview" class="col span_12"> <div id="subject"> @@ -103,9 +100,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator </div> </pre> -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css">/* GRID OF TEN +<pre class="brush: css hidden">/* GRID OF TEN * ========================================================================== */ .span_12 { @@ -818,9 +813,7 @@ body { </pre> -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> - -<pre class="brush: js"><code class="language-js">'use strict'; +<pre class="brush: js hidden"><code class="language-js">'use strict'; /** @@ -1596,6 +1589,5 @@ var BorderRadius = (function BorderRadius() { </code></pre> -</div> <p>{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}</p> diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html index 78e9288be3..bc0470ae50 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -9,12 +9,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- <p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p> -<div class="hidden"> -<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><div id="container"> +<pre class="brush: html hidden"><div id="container"> <div class="group section"> <div id="layer_manager"> <div class="group section"> @@ -213,9 +208,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator </div> </pre> -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* GRID OF TWELVE +<pre class="brush: css hidden">/* GRID OF TWELVE * ========================================================================== */ .span_12 { @@ -1175,9 +1168,7 @@ body { </pre> -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js"><code class="language-js"> +<pre class="brush: js hidden"><code class="language-js"> 'use strict'; @@ -2877,7 +2868,6 @@ var BoxShadow = (function BoxShadow() { </code></pre> -</div> <div>{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}</div> diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html index 3180021066..bac2b33946 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("background")}}</li> <li>{{cssxref("background-attachment")}}</li> @@ -63,7 +62,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders <li>{{cssxref("border-width")}}</li> <li>{{cssxref("box-shadow")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index 14ce7bad58..6a92d4d7e5 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -17,11 +17,11 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images <p>Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.</p> -<p><img alt="" src="https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png" style="height: 636px; width: 636px;"></p> +<p><img alt="" src="logo-quantum.9c5e96634f92.png"></p> <p>On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :</p> -<pre class="brush: css; highlight:[8]">.square { +<pre class="brush: css">.square { width: 300px; height: 300px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); @@ -43,15 +43,15 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images <p>L'image suivante montre le résultat obtenu.</p> -<p><img alt="Logo de Firefox étité" src="https://mdn.mozillademos.org/files/16630/s.codepen.io_Richienb_debug_LoNxGp_PNkvYGvgGyXA.png" style="height: 636px; width: 636px;"></p> +<p><img alt="Logo de Firefox étité" src="s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png"></p> <h2 id="Agrandir_une_image">Agrandir une image</h2> <p>On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.</p> -<p><img alt="Logo MDN à l'échelle" src="https://mdn.mozillademos.org/files/16631/favicon57.de33179910ae.1.1.png" style="height: 636px; width: 636px;"></p> +<p><img alt="Logo MDN à l'échelle" src="favicon57.de33179910ae.1.1.png"></p> -<pre class="brush: css; highlight:[5]">.square2 { +<pre class="brush: css">.square2 { width: 300px; height: 300px; background-image: url(favicon.png); @@ -74,15 +74,13 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images <p>Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur <code>contain</code> en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).</p> -<figure> <p>{{EmbedLiveSample("contain", "100%", "220")}}</p> -</figure> <pre class="brush:html"><div class="bgSizeContain"> <p>Redimensionnez la fenêtre de votre navigateur.</p> </div></pre> -<pre class="brush:css;highlight:[4]">.bgSizeContain { +<pre class="brush:css">.bgSizeContain { height: 200px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; @@ -102,7 +100,7 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images <p>Redimensionnez la fenêtre de votre navigateur.</p> </div></pre> -<pre class="brush:css;highlight:[4]">.bgSizeCover { +<pre class="brush:css">.bgSizeCover { height: 200px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; diff --git a/files/fr/web/css/css_basic_user_interface/index.html b/files/fr/web/css/css_basic_user_interface/index.html index 2e2abcc1f1..b8e3ba66e4 100644 --- a/files/fr/web/css/css_basic_user_interface/index.html +++ b/files/fr/web/css/css_basic_user_interface/index.html @@ -17,7 +17,6 @@ translation_of: Web/CSS/CSS_Basic_User_Interface <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("box-sizing")}}</li> @@ -36,7 +35,6 @@ translation_of: Web/CSS/CSS_Basic_User_Interface <li>{{CSSxRef("text-overflow")}}</li> <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index c1b95b6eb2..d9cfe6891d 100644 --- a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -16,7 +16,7 @@ original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propri <p>La syntaxe de base (CSS 2.1) pour cette propriété est :</p> -<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> {{CSSxRef("<url>")}} , <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}}</pre> +<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> {{CSSxRef("<url>")}} , <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}}</pre> <p>Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme <code>auto</code> ou <code>pointer</code>.</p> @@ -27,9 +27,9 @@ original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propri <p>En utilisant cette règle, le moteur essaiera d'abord de charger <code>toto.cur</code>. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de <code>truc.gif</code> qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur <code>auto</code> sera utilisé.</p> -<p>Le support de la <a class="external" href="https://www.w3.org/TR/css3-ui/#cursor">syntaxe</a> CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.</p> +<p>Le support de la <a href="https://www.w3.org/TR/css3-ui/#cursor">syntaxe</a> CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.</p> -<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> {{CSSxRef("<uri>")}} <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> <x> <y> <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">?</a> , <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}} +<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> {{CSSxRef("<uri>")}} <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> <x> <y> <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">?</a> , <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}} </pre> <p>Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:</p> diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html index 9487c666d5..f7fc54380d 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_abs --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> +<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> <div class="note"> <p><strong>Note :</strong> À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.</p> diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index f644790b67..2eb9626f5a 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (<em>flexbox</em>). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> +<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (<em>flexbox</em>). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> <h2 id="Exemple_simple">Exemple simple</h2> @@ -81,7 +81,6 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("justify-content")}}</li> <li>{{cssxref("align-content")}}</li> @@ -94,16 +93,13 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li> <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html index 7efe8c5be7..8e6f9623b5 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> +<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> <h2 id="Exemple_simple">Exemple simple</h2> @@ -25,7 +25,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <p>L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15962/Inline_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img alt="" src="inline_axis.png"></p> <p>Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par <code>justify-</code> : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.</p> @@ -33,7 +33,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <p>Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par <code>align-</code> : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15961/Block_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img alt="" src="block_axis.png"></p> <h2 id="Alignement_individuel">Alignement individuel</h2> @@ -66,12 +66,12 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <li>{{cssxref("row-gap")}}</li> <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> - <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("row-gap")}}</li> <li>{{cssxref("grid-column-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> + <li>{{cssxref("gap")}}</li> </ul> -<p>La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification <em>Box Alignment</em> et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.</p> +<p>La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification <em>Box Alignment</em> et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.</p> <p>À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe <code>grid-</code>) afin d'assurer une meilleure compatibilité.</p> @@ -79,7 +79,6 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("justify-content")}}</li> <li>{{cssxref("align-content")}}</li> @@ -94,21 +93,18 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> - <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li> - <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li> + <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li> + <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner les boîtes dans une disposition en grille</a></li> </ul> <h2 id="Ressources_externes">Ressources externes</h2> diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html index 81fa6692ae..f6195db8dc 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module <em>Multi-Column Layout</em>. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> +<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module <em>Multi-Column Layout</em>. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> <p>Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.</p> @@ -33,20 +33,16 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("justify-content")}}</li> <li>{{cssxref("align-content")}}</li> <li>{{cssxref("column-gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li> <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li> <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li> </ul> -</div> diff --git a/files/fr/web/css/css_box_alignment/index.html b/files/fr/web/css/css_box_alignment/index.html index e0787aca03..18feaec140 100644 --- a/files/fr/web/css/css_box_alignment/index.html +++ b/files/fr/web/css/css_box_alignment/index.html @@ -9,21 +9,21 @@ translation_of: Web/CSS/CSS_Box_Alignment --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em>CSS Box Alignment</em> (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.</p> +<p>Le module de spécification <em>CSS Box Alignment</em> (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.</p> <div class="note"> -<p><strong>Note : </strong>La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.</p> +<p><strong>Note :</strong> La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.</p> </div> <h2 id="Anciennes_méthodes_d'alignement">Anciennes méthodes d'alignement</h2> <p>Par le passé, CSS disposait de peu d'outils pour l'alignement. Le texte pouvait être aligné grâce à {{cssxref("text-align")}}, les blocs pouvaient être centrés avec des marges ({{cssxref("margin")}}) automatique et les tableaux ou éléments en affichage <em>inline-block</em> pouvaient tirer parti de {{cssxref("vertical-align")}}. Désormais, l'alignement du texte est couvert par les modules <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> et <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a> et, pour la première fois, avec le module <em>Box Alignment</em>, on dispose d'outils complets pour l'alignement vertical et horizontal.</p> -<p>Si vous connaissez déjà <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles (<em>flexbox</em>)</a>, vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification <em>Box Alignment</em> est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.</p> +<p>Si vous connaissez déjà <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles (<em>flexbox</em>)</a>, vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification <em>Box Alignment</em> est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.</p> <h2 id="Exemples_simples">Exemples simples</h2> -<p>Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">en grille</a> ou utilisant <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles</a>.</p> +<p>Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">en grille</a> ou utilisant <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a>.</p> <h3 id="Alignement_pour_une_disposition_en_grille">Alignement pour une disposition en grille</h3> @@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Lorsqu'on utilise les propriétés d'alignement, on aligne le contenu selon deux axes : l'axe en ligne (<em>inline axis</em>) et l'axe de bloc (<em>block axis</em>). L'axe en ligne correspond à l'axe selon lequel les mots sont écrits pour ce mode d'écriture. En français, par exemple, l'axe en ligne est un axe horizontal dirigé de la gauche vers la droite. L'axe de bloc est orthogonal à l'axe en ligne et suit la direction selon laquelle les blocs de texte sont disposés les uns à la suite des autres.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p> +<p><img alt="" src="two-axes.png"></p> <p>Lorsqu'on aligne des objets le long de l'axe en ligne, on utilisera les propriétés qui commencent par <code>justify-</code>:</p> @@ -79,7 +79,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p> +<p><img alt="" src="align-container-subjects.png"></p> <h3 id="L'alignement_de_recours_(fallback)">L'alignement de recours (<em>fallback</em>)</h3> @@ -117,7 +117,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>On voit ici que ces deux exemples utilisent <code>justify-content: start</code> mais que l'emplacement des sujets varie selon le mode d'écriture.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p> +<p><img alt="" src="writing-mode-start.png"></p> <h3 id="Alignement_selon_la_ligne_de_base">Alignement selon la ligne de base</h3> @@ -146,11 +146,11 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Ainsi, si des objets flexibles sont alignés avec <code>flex-start</code> et qu'on travaille dans un mode d'écriture horizontal de gauche à droite et de haut en bas (comme le français) avec <code>flex-direction</code> qui vaut <code>row</code>, les sujets commenceront à gauche et l'espace disponible sera affiché à droite après que les sujets aient été placés.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p> +<p><img alt="" src="justify-content-start.png"></p> <p>Si on utilise <code>justify-content: space-between</code> sur le conteneur flexible, l'espace disponible sera alors réparti entre les objets.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p> +<p><img alt="" src="justify-content-space-between.png"></p> <p>Pour que ces mots-clés aient un effet, il est nécessaire qu'il reste de l'espace supplémentaire. S'il n'y a plus d'espace, aucune distribution ne pourra être effectuée.</p> @@ -176,12 +176,12 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p> -<p>Dans cet exemple, on utilise la propriété {{cssxref("grid-gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par <code>grid-</code> et certains navigateurs ne prennent encore en charge que ces versions préfixées :</p> +<p>Dans cet exemple, on utilise la propriété {{cssxref("gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par <code>grid-</code> et certains navigateurs ne prennent encore en charge que ces versions préfixées :</p> <ul> - <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("row-gap")}}</li> <li>{{cssxref("grid-column-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> + <li>{{cssxref("gap")}}</li> </ul> <p>Ces versions préfixées seront maintenues comme des alias des propriétés non-préfixées. Toutefois, il est toujours possible de les dédoubler comme on le fait avec les propriétés préfixées des différents éditeurs : déclarer la propriété <code>grid-gap</code> puis <code>gap</code> avec la même valeur.</p> @@ -203,7 +203,6 @@ translation_of: Web/CSS/CSS_Box_Alignment <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("justify-content")}}</li> <li>{{cssxref("align-content")}}</li> @@ -218,26 +217,23 @@ translation_of: Web/CSS/CSS_Box_Alignment <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> - <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li> - <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li> + <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li> + <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li> <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li> <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li> <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> <ul> - <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base de Flexbox</a></em></li> - <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexible</a></em></li> - <li>Guide CSS sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></em></li> + <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de base de Flexbox</a></em></li> + <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner les éléments d'un conteneur flexible</a></em></li> + <li>Guide CSS sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner les boîtes dans une disposition en grille</a></em></li> </ul> <h2 id="Ressources_externes">Ressources externes</h2> diff --git a/files/fr/web/css/css_box_model/index.html b/files/fr/web/css/css_box_model/index.html index 53493637fa..61ad9dfd61 100644 --- a/files/fr/web/css/css_box_model/index.html +++ b/files/fr/web/css/css_box_model/index.html @@ -20,17 +20,14 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS <h4 id="Les_propriétés_qui_définissent_le_flux_du_contenu_dans_une_boîte">Les propriétés qui définissent le flux du contenu dans une boîte</h4> -<div class="index"> <ul> <li>{{cssxref("overflow")}}</li> <li>{{cssxref("overflow-x")}}</li> <li>{{cssxref("overflow-y")}}</li> </ul> -</div> <h4 id="Les_propriétés_qui_définissent_la_taille_d'une_boîte">Les propriétés qui définissent la taille d'une boîte</h4> -<div class="index"> <ul> <li>{{cssxref("height")}}</li> <li>{{cssxref("width")}}</li> @@ -39,11 +36,9 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS <li>{{cssxref("min-height")}}</li> <li>{{cssxref("min-width")}}</li> </ul> -</div> <h4 id="Les_propriétés_qui_définissent_les_marges_d'une_boîte">Les propriétés qui définissent les marges d'une boîte</h4> -<div class="index"> <ul> <li>{{cssxref("margin")}}</li> <li>{{cssxref("margin-bottom")}}</li> @@ -52,11 +47,9 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS <li>{{cssxref("margin-top")}}</li> <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li> </ul> -</div> <h4 id="Les_propriétés_qui_définissent_le_remplissage_(padding)_d'une_boîte">Les propriétés qui définissent le remplissage (<em>padding</em>) d'une boîte</h4> -<div class="index"> <ul> <li>{{cssxref("padding")}}</li> <li>{{cssxref("padding-bottom")}}</li> @@ -64,16 +57,13 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS <li>{{cssxref("padding-right")}}</li> <li>{{cssxref("padding-top")}}</li> </ul> -</div> <h4 id="Les_autres_propriétés">Les autres propriétés</h4> -<div class="index"> <ul> <li>{{cssxref("box-shadow")}}</li> <li>{{cssxref("visibility")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_charsets/index.html b/files/fr/web/css/css_charsets/index.html index 46991607c2..07d2f1c593 100644 --- a/files/fr/web/css/css_charsets/index.html +++ b/files/fr/web/css/css_charsets/index.html @@ -17,11 +17,9 @@ original_slug: Web/CSS/Jeux_de_caractères_CSS <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@charset")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_color/index.html b/files/fr/web/css/css_color/index.html index eb61cf41cd..f07f716fe6 100644 --- a/files/fr/web/css/css_color/index.html +++ b/files/fr/web/css/css_color/index.html @@ -18,21 +18,17 @@ translation_of: Web/CSS/CSS_Color <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("color")}}</li> <li>{{cssxref("opacity")}}</li> <li>{{cssxref("color-adjust")}}</li> </ul> -</div> <h3 id="Types_de_données">Types de données</h3> -<div class="index"> <ul> <li>{{cssxref("<color>")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.html b/files/fr/web/css/css_colors/color_picker_tool/index.html index 1996401a8b..0715ba2707 100644 --- a/files/fr/web/css/css_colors/color_picker_tool/index.html +++ b/files/fr/web/css/css_colors/color_picker_tool/index.html @@ -7,12 +7,7 @@ tags: translation_of: Web/CSS/CSS_Colors/Color_picker_tool original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs --- -<div class="hidden"> -<h2 id="ColorPIcker_Tool" name="ColorPIcker_Tool">ColorPIcker Tool</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"> <div id="container"> +<pre class="brush: html hidden"> <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> @@ -37,11 +32,7 @@ original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs </div> </div> -</pre> - -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* +<pre class="brush: css hidden">/* * COLOR PICKER TOOL */ diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html index 4b69af66e0..344caf8221 100644 --- a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes --- <div>{{CSSRef}}</div> -<p class="summary">La disposition sur plusieurs colonnes (« <em>Multiple-column Layout</em> » ou « <em>multicol</em> » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.</p> +<p>La disposition sur plusieurs colonnes (« <em>Multiple-column Layout</em> » ou « <em>multicol</em> » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.</p> <h2 id="Concepts_et_terminologie">Concepts et terminologie</h2> diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html index 96f2191770..fd6bd631ba 100644 --- a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification <em>CSS Fragmentation</em>. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.</p> +<p>Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification <em>CSS Fragmentation</em>. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.</p> <h2 id="Quelques_notions_de_bases_sur_la_fragmentation">Quelques notions de bases sur la fragmentation</h2> diff --git a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html index 1cb00b72cd..e37d560b61 100644 --- a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html +++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p> +<p>Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p> <h2 id="Le_dépassement_dans_les_boîtes_des_colonnes">Le dépassement dans les boîtes des colonnes</h2> @@ -19,7 +19,7 @@ original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes <p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16095/image-overflow-multicol.png" style="height: 328px; width: 800px;"></p> +<p><img alt="" src="image-overflow-multicol.png"></p> <p>Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et <code>max-width: 100%</code> pour y parvenir.</p> diff --git a/files/fr/web/css/css_columns/index.html b/files/fr/web/css/css_columns/index.html index b66e0686ea..80a7ed7f0a 100644 --- a/files/fr/web/css/css_columns/index.html +++ b/files/fr/web/css/css_columns/index.html @@ -26,7 +26,6 @@ translation_of: Web/CSS/CSS_Columns <h3 id="Propriétés_relatives_à_la_disposition_en_colonnes">Propriétés relatives à la disposition en colonnes</h3> -<div class="index"> <ul> <li>{{cssxref("column-count")}}</li> <li>{{cssxref("column-fill")}}</li> @@ -39,11 +38,9 @@ translation_of: Web/CSS/CSS_Columns <li>{{cssxref("column-width")}}</li> <li>{{cssxref("columns")}}</li> </ul> -</div> <h3 id="Propriétés_relatives_à_la_fragmentation">Propriétés relatives à la fragmentation</h3> -<div class="index"> <ul> <li>{{cssxref("break-after")}}</li> <li>{{cssxref("break-before")}}</li> @@ -51,7 +48,6 @@ translation_of: Web/CSS/CSS_Columns <li>{{cssxref("orphans")}}</li> <li>{{cssxref("widows")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_columns/spanning_columns/index.html b/files/fr/web/css/css_columns/spanning_columns/index.html index fe5533f9ab..9aa5652293 100644 --- a/files/fr/web/css/css_columns/spanning_columns/index.html +++ b/files/fr/web/css/css_columns/spanning_columns/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p> +<p>Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p> <div class="note"> <p><strong>Note :</strong> Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.</p> diff --git a/files/fr/web/css/css_columns/styling_columns/index.html b/files/fr/web/css/css_columns/styling_columns/index.html index 9cf822a190..58cf3879e6 100644 --- a/files/fr/web/css/css_columns/styling_columns/index.html +++ b/files/fr/web/css/css_columns/styling_columns/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.</p> +<p>Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.</p> <h2 id="Peut-on_mettre_en_forme_les_boîtes_des_colonnes">Peut-on mettre en forme les boîtes des colonnes ?</h2> diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.html b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html index b704ab6a8b..4dd83dfefd 100644 --- a/files/fr/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html @@ -31,7 +31,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h5 id="HTML">HTML</h5> -<div id="column_count"> <pre class="brush: html"><div id="col"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, @@ -52,7 +51,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes </p> </div> </pre> -</div> <h5 id="Résultat">Résultat</h5> @@ -66,16 +64,14 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h5 id="CSS_2">CSS</h5> -<div id="column_width"> <pre class="brush: css">#wid { column-width: 100px; } </pre> -</div> + <h5 id="HTML_2">HTML</h5> -<div id="column_count"> <pre class="brush: html"><div id="wid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna @@ -87,7 +83,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes deserunt mollit anim id est laborum </div> </pre> -</div> <h5 id="Résultat_2">Résultat</h5> @@ -103,16 +98,13 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h5 id="CSS_3">CSS</h5> -<div id="column_short"> <pre class="brush: css">#col_short { columns: 12em; } </pre> -</div> <h5 id="HTML_3">HTML</h5> -<div id="column_count"> <pre class="brush: html"><div id="col_short"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna @@ -124,7 +116,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes deserunt mollit anim id est laborum </div> </pre> -</div> <h5 id="Résultat_3">Résultat</h5> @@ -132,21 +123,17 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <p>De même, on pourra remplacer la déclaration <code>column-count: 4</code> avec ce bloc :</p> -<div id="4_columns"> <pre class="brush: css">#columns_4{ columns: 4; } </pre> -</div> <p>Enfin, pour synthétiser les instructions <code>column-width:8em</code> et <code>column-count:12</code>, on pourra utiliser les instructions suivantes :</p> -<div id="12_columns"> <pre class="brush: css">#columns_12 { columns: 12 8em; } </pre> -</div> <h3 id="Équilibrage_de_la_hauteur">Équilibrage de la hauteur</h3> @@ -169,7 +156,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h5 id="HTML_4">HTML</h5> -<div id="col_gap"> <pre class="brush: html"><div id="column_gap"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna @@ -181,7 +167,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes deserunt mollit anim id est laborum </div> </pre> -</div> <h5 id="Résultat_4">Résultat</h5> @@ -198,5 +183,5 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">https://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li> + <li><a href="https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html">https://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li> </ul> diff --git a/files/fr/web/css/css_conditional_rules/index.html b/files/fr/web/css/css_conditional_rules/index.html index bf46148fad..70fad97d1c 100644 --- a/files/fr/web/css/css_conditional_rules/index.html +++ b/files/fr/web/css/css_conditional_rules/index.html @@ -16,14 +16,12 @@ translation_of: Web/CSS/CSS_Conditional_Rules <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@document")}}</li> <li>{{cssxref("@media")}}</li> <li>{{cssxref("@supports")}}</li> <li>{{cssxref("@import")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_containment/index.html b/files/fr/web/css/css_containment/index.html index f4914d7997..a6869b2050 100644 --- a/files/fr/web/css/css_containment/index.html +++ b/files/fr/web/css/css_containment/index.html @@ -89,7 +89,7 @@ original_slug: Web/CSS/Compartimentation_CSS <p>En utilisant <code>contain: style</code>, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La valeur <code>style</code> est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).</p> </div> diff --git a/files/fr/web/css/css_counter_styles/index.html b/files/fr/web/css/css_counter_styles/index.html index 3dc28e2c2d..c09546d721 100644 --- a/files/fr/web/css/css_counter_styles/index.html +++ b/files/fr/web/css/css_counter_styles/index.html @@ -16,38 +16,33 @@ translation_of: Web/CSS/CSS_Counter_Styles <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("counter-increment")}}</li> <li>{{cssxref("counter-reset")}}</li> </ul> -</div> <h3 id="Règles">Règles @</h3> -<dl> - <dt>{{cssxref("@counter-style")}}</dt> - <dd> - <div class="index"> - <ul> - <li>{{cssxref("@counter-style/system","system")}}</li> - <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li> - <li>{{cssxref("@counter-style/negative", "negative")}}</li> - <li>{{cssxref("@counter-style/prefix", "prefix")}}</li> - <li>{{cssxref("@counter-style/suffix", "suffix")}}</li> - <li>{{cssxref("@counter-style/range", "range")}}</li> - <li>{{cssxref("@counter-style/pad", "pad")}}</li> - <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li> - <li>{{cssxref("@counter-style/fallback", "fallback")}}</li> - </ul> - </div> - </dd> -</dl> +<ul> + <li>{{cssxref("@counter-style")}} + <ul> + <li>{{cssxref("@counter-style/system","system")}}</li> + <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li> + <li>{{cssxref("@counter-style/negative", "negative")}}</li> + <li>{{cssxref("@counter-style/prefix", "prefix")}}</li> + <li>{{cssxref("@counter-style/suffix", "suffix")}}</li> + <li>{{cssxref("@counter-style/range", "range")}}</li> + <li>{{cssxref("@counter-style/pad", "pad")}}</li> + <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li> + <li>{{cssxref("@counter-style/fallback", "fallback")}}</li> + </ul> + </li> +</ul> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="/fr/docs/Web/CSS/Compteurs_CSS">Manipuler les compteurs CSS</a></dt> + <dt><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Manipuler les compteurs CSS</a></dt> <dd>Cet article décrit comment utiliser les compteurs CSS afin de numéroter des éléments HTML et de réaliser des comptages complexes.</dd> </dl> diff --git a/files/fr/web/css/css_device_adaptation/index.html b/files/fr/web/css/css_device_adaptation/index.html index 94f10a4ba4..7044575f90 100644 --- a/files/fr/web/css/css_device_adaptation/index.html +++ b/files/fr/web/css/css_device_adaptation/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/CSS_Device_Adaptation <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@viewport")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_display/index.html b/files/fr/web/css/css_display/index.html index e1106b1422..18278b09b9 100644 --- a/files/fr/web/css/css_display/index.html +++ b/files/fr/web/css/css_display/index.html @@ -16,15 +16,12 @@ translation_of: Web/CSS/CSS_Display <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("display")}}</li> </ul> -</div> <h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3> -<div class="index"> <ul> <li>{{CSSxRef("<display-outside>")}}</li> <li>{{CSSxRef("<display-inside>")}}</li> @@ -33,7 +30,6 @@ translation_of: Web/CSS/CSS_Display <li>{{CSSxRef("<display-internal>")}}</li> <li>{{CSSxRef("<display-legacy>")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 11feda660f..228aad4a9b 100644 --- a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -1,6 +1,6 @@ --- title: Aligner des éléments dans un conteneur flexible -slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +slug: Web/CSS/css_flexible_box_layout/aligning_items_in_a_flex_container tags: - CSS - Flex @@ -13,11 +13,11 @@ original_slug: >- --- <p>{{CSSRef}}</p> -<p class="summary">Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.</p> +<p>Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.</p> <p>Afin de centrer notre boîte, nous allons utiliser la propriété <code>align-items</code> afin d'aligner l'objet sur l'axe secondaire (<em>cross axis</em> en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété <code>justify-content</code> est quant à elle utilisée pour aligner l'objet sur l'axe principal (<em>main axis</em> en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).</p> -<p><img alt="Un élément contenant une autre boîte centrée à l'intérieur" src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> +<p><img alt="Un élément contenant une autre boîte centrée à l'intérieur" src="align1.png"></p> <p> </p> @@ -39,7 +39,7 @@ original_slug: >- <p>Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.</p> <div class="note"> -<p><strong>Note</strong> : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.</p> +<p><strong>Note :</strong> Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.</p> </div> <h2 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h2> @@ -48,9 +48,9 @@ original_slug: >- <p>Prenons un exemple simple : nous ajoutons <code>display: flex</code> à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.</p> -<p><img alt="Trois objets dont un avec un texte plus long qui le rend plus grand que les autres" src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> +<p><img alt="Trois objets dont un avec un texte plus long qui le rend plus grand que les autres" src="align2.png"></p> -<p><img alt="Trois objets étirés pour mesurer 200 pixels de haut" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> +<p><img alt="Trois objets étirés pour mesurer 200 pixels de haut" src="align3.png"></p> <p>Les éléments obtiennent la même hauteur à cause de la valeur initiale de <code>align-items</code> qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est <code>stretch</code> (qui indique que les objets du conteneur doivent être étirés sur l'axe).</p> @@ -80,11 +80,11 @@ original_slug: >- <p>Jusqu'à présent, les exemples fonctionnaient avec <code>flex-direction</code> valant <code>row</code> et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.</p> -<p><img alt="Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical.." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> +<p><img alt="Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical.." src="align4.png"></p> <p>Si on passe <code>flex-direction</code> à <code>column</code>, <code>align-items</code> et <code>align-self</code> aligneront les éléments à gauche et à droite.</p> -<p><img alt="Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> +<p><img alt="Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal." src="align5.png"></p> <p>Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que <code>flex-direction</code> vaut ici <code>column</code>.</p> @@ -119,7 +119,7 @@ original_slug: >- <p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p> <div class="note"> -<p><strong>Note</strong> : La valeur <code>space-evenly</code> n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.</p> +<p><strong>Note :</strong> La valeur <code>space-evenly</code> n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.</p> </div> <p>Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.</p> @@ -130,7 +130,7 @@ original_slug: >- <p>Dans l'exemple initial avec <code>display: flex</code> appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de <code>justify-content</code> qui est <code>flex-start</code>. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.</p> -<p><img alt="Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> +<p><img alt="Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments." src="align6.png"></p> <p>La propriété <code>justify-content</code> prend en charge les mêmes valeurs que <code>align-content</code>.</p> @@ -156,11 +156,11 @@ original_slug: >- <p>Rappelons ici qu'avec ces méthodes d'alignement, <code>flex-start</code> et <code>flex-end</code> respectent le mode d'écriture utilisé. Si on utilise <code>justify-content</code> avec la valeur <code>start</code> pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.</p> -<p><img alt="Trois éléments alignés sur la gauche" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Trois éléments alignés sur la gauche" src="basics5.png"></p> <p>Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.</p> -<p><img alt="Trois éléments alignés sur la droite" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> +<p><img alt="Trois éléments alignés sur la droite" src="basics6.png"></p> <p>Dans l'exemple qui suit, on indique explicitement la valeur <code>rtl</code> pour la propriété <code>display</code> afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de <code>justify-content</code> afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.</p> @@ -176,17 +176,17 @@ original_slug: >- <p>Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. <code>flex-start</code> correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.</p> -<p><img alt="Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite" src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite" src="align8.png"></p> <p>On peut changer l'axe avec <code>flex-direction: column</code>. Dans ce cas, <code>flex-start</code> correspondra à l'emplacement du début du premier paragraphe d'un texte.</p> -<p><img alt="Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas" src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> +<p><img alt="Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas" src="align10.png"></p> <p>Si on utilise <code>flex-direction</code> avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). <code>flex-start</code> correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.</p> -<p><img alt="Un diagramme illustrant la ligne de début à droite et celle de fin à gauche" src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Un diagramme illustrant la ligne de début à droite et celle de fin à gauche" src="align9.png"></p> -<p><img alt="Un diagramme illustrant la ligne de début en bas et celle de fin en haut" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> +<p><img alt="Un diagramme illustrant la ligne de début en bas et celle de fin en haut" src="align11.png"></p> <h2 id="Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour aligner sur l'axe principal</h2> @@ -194,7 +194,7 @@ original_slug: >- <p>Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme <code>justify-self</code>… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier <code>justify-self</code> sur l'élément <em>d</em>, cela changerait également l'alignement de l'élément <em>e</em> qui suit, ce qui pourrait ou non être voulu.</p> -<p><img alt="Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> +<p><img alt="Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite." src="align7.png"></p> <p>Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant <code>margin-left: auto</code>. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.</p> @@ -208,12 +208,12 @@ original_slug: >- <p>Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés <code>column-gap</code> et <code>row-gap</code> décrites dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">le module de grille CSS (<em>CSS Grid</em>)</a>. L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés <code>gap</code> pour les dispositions flexibles.</p> -<p>Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (<em>CSS Grid Layout</em>). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">grâce à cet article</a>. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : <em><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a></em>.</p> +<p>Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (<em>CSS Grid Layout</em>). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">grâce à cet article</a>. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : <em><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a></em>.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module<em>CSS Box Alignment</em></a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">L'alignement des boîtes avec une grille CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">L'alignement des boîtes avec une grille CSS</a></li> </ul> diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index f3ed3dce07..4583fc1934 100644 --- a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins --- <div>{{CSSRef}}</div> -<p class="summary">Voici un ensemble de <em>mixins</em> pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.</p> +<p>Voici un ensemble de <em>mixins</em> pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.</p> <p>Dans ces <em>mixins</em>, on utilisera :</p> @@ -45,7 +45,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-containers">Spécifications</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flexbox { display: -webkit-box; display: -moz-box; @@ -56,9 +55,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins // Exemple d'utilisation %flexbox { @include flexbox; }</pre> -</div> -<div class="highlight"> <pre class="brush: css">@mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; @@ -68,7 +65,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins } %inline-flex { @include inline-flex; }</pre> -</div> <h3 id="Direction_des_boîtes_flexibles">Direction des boîtes flexibles</h3> @@ -79,7 +75,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-direction($value: row) { @if $value == row-reverse { -webkit-box-direction: reverse; @@ -109,7 +104,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins // Version plus courte : @mixin flex-dir($args...) { @include flex-direction($args...); }</pre> -</div> <h3 id="flex-wrap"><code>flex-wrap</code></h3> @@ -120,7 +114,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-wrap($value: nowrap) { // No Webkit/FF Box fallback. -webkit-flex-wrap: $value; @@ -131,7 +124,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins } flex-wrap: $value; }</pre> -</div> <h3 id="flex-flow"><code>flex-flow</code></h3> @@ -142,14 +134,12 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-flow($values: (row nowrap)) { // No Webkit/FF Box fallback. -webkit-flex-flow: $values; -ms-flex-flow: $values; flex-flow: $values; }</pre> -</div> <h3 id="order"><code>order</code></h3> @@ -160,7 +150,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#order-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin order($int: 0) { -webkit-box-ordinal-group: $int + 1; -moz-box-ordinal-group: $int + 1; @@ -168,7 +157,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -ms-flex-order: $int; order: $int; }</pre> -</div> <h3 id="flex-grow"><code>flex-grow</code></h3> @@ -179,7 +167,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-grow($int: 1) { -webkit-box-flex: $int; -moz-box-flex: $int; @@ -187,7 +174,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -ms-flex: $int; flex-grow: $int; }</pre> -</div> <h3 id="flex-shrink"><code>flex-shrink</code></h3> @@ -198,14 +184,12 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-shrink($int: 0) { -webkit-flex-shrink: $int; -moz-flex-shrink: $int; -ms-flex: $int; flex-shrink: $int; }</pre> -</div> <h3 id="flex-basis"><code>flex-basis</code></h3> @@ -216,12 +200,10 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-basis($value: auto) { -webkit-flex-basis: $value; flex-basis: $value; }</pre> -</div> <h3 id="flex"><code>flex</code></h3> @@ -232,7 +214,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) { // Définir une variable pour l'utiliser @@ -251,7 +232,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -ms-flex: $fg $fs $fb; flex: $fg $fs $fb; }</pre> -</div> <h3 id="justify-content"><code>justify-content</code></h3> @@ -266,7 +246,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin justify-content($value: flex-start) { @if $value == flex-start { -webkit-box-pack: start; @@ -292,7 +271,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins } // Version plus courte : @mixin flex-just($args...) { @include justify-content($args...); }</pre> -</div> <h3 id="align-items"><code>align-items</code></h3> @@ -303,7 +281,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin align-items($value: stretch) { @if $value == flex-start { -webkit-box-align: start; @@ -321,7 +298,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -webkit-align-items: $value; align-items: $value; }</pre> -</div> <h3 id="align-self"><code>align-self</code></h3> @@ -330,7 +306,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin align-self($value: auto) { // No Webkit Box Fallback. -webkit-align-self: $value; @@ -343,7 +318,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins } align-self: $value; }</pre> -</div> <h3 id="align-content"><code>align-content</code></h3> @@ -354,7 +328,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#align-content-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin align-content($value: stretch) { // No Webkit Box Fallback. -webkit-align-content: $value; @@ -366,5 +339,4 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -ms-flex-line-pack: $value; } align-content: $value; -}</pre> -</div> +}</pre>
\ No newline at end of file diff --git a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 4ae046089b..5aac168f3d 100644 --- a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox --- <div>{{CSSRef}}</div> -<p class="summary">Le module des boîtes flexibles, aussi appelé « <em>flexbox</em> », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des <em>flexbox</em> que nous approfondirons ensuite dans d'autres articles.</p> +<p>Le module des boîtes flexibles, aussi appelé « <em>flexbox</em> », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des <em>flexbox</em> que nous approfondirons ensuite dans d'autres articles.</p> <p>Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les <em>flexbox</em> gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">la disposition en grille (CSS Grid)</a> qui contrôle à la fois les colonnes et les lignes.</p> @@ -33,21 +33,21 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox <p>Si on choisit la valeur <code>row</code> ou <code>row-reverse</code>, l'axe principal sera aligné avec la direction « en ligne » (<em>inline</em> direction) (c'est la direction logique qui suit le sens d'écriture du document).</p> -<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="basics1.png"></p> <p>Si on choisit la valeur <code>column</code> ou <code>column-reverse</code>, l'axe principal suivra la direction de bloc (<em>block direction</em>) et progressera le long de l'axe perpendiculaire au sens d'écriture.</p> -<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="basics2.png"></p> <h3 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h3> <p>L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si <code>flex-direction</code> vaut <code>row</code> ou <code>row-reverse</code>, l'axe secondaire suivra l'axe des colonnes.</p> -<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="basics3.png"></p> <p>Si l'axe principale est <code>column</code> ou <code>column-reverse</code>, l'axe secondaire suivra celui des lignes (horizontales).</p> -<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="basics4.png"></p> <p>Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.</p> @@ -59,11 +59,11 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox <p>Si <code>flex-direction</code> vaut <code>row</code> et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.</p> -<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Working in English the start edge is on the left." src="basics5.png"></p> <p>Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.</p> -<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> +<p><img alt="The start edge in a RTL language is on the right." src="basics6.png"></p> <p>Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.</p> @@ -132,7 +132,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox <p>Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.</p> -<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> +<p><img alt="This flex container has available space after laying out the items." src="basics7.png"></p> <p>Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés <code>flex-</code> qui s'appliquent aux éléments.</p> @@ -233,4 +233,4 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox <h2 id="Prochaines_étapes">Prochaines étapes</h2> -<p>Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux <em>flexbox</em>. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">comment cette spécification s'articule avec les autres modules CSS</a>.</p> +<p>Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux <em>flexbox</em>. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">comment cette spécification s'articule avec les autres modules CSS</a>.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html index 4565ac8844..c2d689cf0e 100644 --- a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -16,7 +16,7 @@ original_slug: >- --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.</p> +<p>Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.</p> <h2 id="Un_premier_aperçu">Un premier aperçu</h2> @@ -35,7 +35,7 @@ original_slug: >- } </pre> -<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de base relatifs aux boîtes flexibles</a>, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.</p> +<p>Dans l'article sur <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">les concepts de base relatifs aux boîtes flexibles</a>, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.</p> <h2 id="Les_concepts_majeurs_relatifs_à_l'axe_principal">Les concepts majeurs relatifs à l'axe principal</h2> @@ -55,7 +55,7 @@ original_slug: >- <p>Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :</p> -<p><img alt="Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p> +<p><img alt="Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse." src="ratios-size.png"></p> <p>Pour la suite de cet article, gardez à l'esprit l'impact de <code>min-content</code> et <code>max-content</code> lorsque nous verrons les propriétés <code>flex-grow</code> et <code>flex-shrink</code>.</p> @@ -63,11 +63,11 @@ original_slug: >- <p>Pour étudier ces propriétés, nous devons définir le concept d'<strong>espace libre positif et négatif</strong>. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut <code>row</code> et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.</p> -<p><img alt="Une image illustrant l'espace restant après que les éléments aient été affichés." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> +<p><img alt="Une image illustrant l'espace restant après que les éléments aient été affichés." src="basics7.png"></p> <p>L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.</p> -<p><img alt="Les objets dépassent du conteneur." src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p> +<p><img alt="Les objets dépassent du conteneur." src="ratios1.png"></p> <p>C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.</p> @@ -101,11 +101,11 @@ original_slug: >- <p>Dans ce cas, <code>flex-basis</code> vaut <code>auto</code> et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille <code>max-content</code> des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :</p> -<p><img alt="Une image illustrant l'espace libre positif avec une zone hachurée." src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p> +<p><img alt="Une image illustrant l'espace libre positif avec une zone hachurée." src="ratios2.png"></p> <p>On utilise ici une valeur <code>flex-basis</code> égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :</p> -<p><img alt="L'espace positif est réparti entre les éléments." src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p> +<p><img alt="L'espace positif est réparti entre les éléments." src="ratios3.png"></p> <p>Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :</p> @@ -197,6 +197,6 @@ original_slug: >- <h3 id="Les_autres_façons_de_distribuer_l'espace">Les autres façons de distribuer l'espace</h3> -<p>Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">le guide sur l'alignement</a>. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.</p> +<p>Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">le guide sur l'alignement</a>. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.</p> <p>Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/index.html b/files/fr/web/css/css_flexible_box_layout/index.html index 46576643ce..a460f31765 100644 --- a/files/fr/web/css/css_flexible_box_layout/index.html +++ b/files/fr/web/css/css_flexible_box_layout/index.html @@ -23,7 +23,6 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("flex")}}</li> <li>{{cssxref("flex-basis")}}</li> @@ -34,13 +33,11 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout <li>{{cssxref("flex-wrap")}}</li> <li>{{cssxref("order")}}</li> </ul> -</div> <h3 id="Propriétés_relatives_à_l'alignement">Propriétés relatives à l'alignement</h3> <p>Les propriétés <code>align-content</code>, <code>align-self</code>, <code>align-items</code> et <code>justify-content</code> étaient initialement définies dans la spécification Flexbox mais sont désormais définies dans la spécification sur l'alignement des boîtes et la spécification Flexbox fait référence à cette nouvelle spécification pour les définitions à jour. Des propriétés d'alignement additionnelles ont également été définies dans le module de spécification <em>Box Alignment</em>.</p> -<div class="index"> <ul> <li>{{cssxref("align-content")}}</li> <li>{{cssxref("align-items")}}</li> @@ -52,11 +49,9 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossary/Flexbox">Flexbox / boîte flexible</a></li> <li><a href="/fr/docs/Glossary/Flex_Container">Conteneur flexible</a></li> @@ -64,7 +59,6 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li> <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 17420014c9..b962f9eb69 100644 --- a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -15,7 +15,7 @@ original_slug: >- --- <p>{{CSSRef}}</p> -<p class="summary">Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut <code>row</code> ou de nouvelles colonnes si <code>flex-direction</code> vaut <code>column</code>. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une disposition en grille (<em>CSS Grid</em>)</a>.</p> +<p>Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut <code>row</code> ou de nouvelles colonnes si <code>flex-direction</code> vaut <code>column</code>. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une disposition en grille (<em>CSS Grid</em>)</a>.</p> <h2 id="Créer_des_passages_à_la_ligne">Créer des passages à la ligne</h2> @@ -82,7 +82,7 @@ original_slug: >- <p>Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec <code>visibility: collapse</code> et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire <code>visibility: collapse</code> ou qu'on modifie la valeur de <code>visible</code>, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.</p> <div class="note"> -<p><strong>Note </strong>: Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent <code>collapse</code> comme équivalent à <code>hidden</code>.</p> +<p><strong>Note :</strong> Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent <code>collapse</code> comme équivalent à <code>hidden</code>.</p> </div> <p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p> diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html index c50e95a958..5fc57819e1 100644 --- a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles --- <p>{{CSSRef}}</p> -<p class="summary">Les nouvelles méthodes de disposition telles que les boîtes flexibles (<em>flexbox</em>) et la grille CSS (<em>CSS Grid</em>) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.</p> +<p>Les nouvelles méthodes de disposition telles que les boîtes flexibles (<em>flexbox</em>) et la grille CSS (<em>CSS Grid</em>) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.</p> <h2 id="Inverser_l'affichage_des_éléments">Inverser l'affichage des éléments</h2> @@ -29,19 +29,19 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles <p>Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.</p> -<p><img alt="Les objets sont affichés sur une ligne horizontale qui commence à gauche." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p> +<p><img alt="Les objets sont affichés sur une ligne horizontale qui commence à gauche." src="basics1.png"></p> -<p><img alt="Les objets sont affichés sur une colonne qui commence en haut." src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> +<p><img alt="Les objets sont affichés sur une colonne qui commence en haut." src="align10.png"></p> <p>Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.</p> -<p><img alt="Les éléments sont affichés dans l'ordre inverse et commencent à droite." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Les éléments sont affichés dans l'ordre inverse et commencent à droite." src="align9.png"></p> -<p><img alt="Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> +<p><img alt="Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas." src="align11.png"></p> <p>Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment <code>row</code> et <code>row-reverse</code> fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), <code>row</code> correspondrait au côté droit et <code>row-reverse</code> au côté gauche.</p> -<p><img alt="Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p> +<p><img alt="Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse." src="order-rtl.png"></p> <p>Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'<em>affichage</em> est inversé. Sur ce sujet, la spécification explique :</p> @@ -58,7 +58,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles </blockquote> <div class="note"> -<p><strong>Note </strong>: Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.</p> +<p><strong>Note :</strong> Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.</p> </div> <p>Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de <code>flex-direction</code>, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.</p> @@ -93,7 +93,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles <li>Quatrième élément selon la source : <code>order: 3</code></li> </ul> -<p><img alt="Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p> +<p><img alt="Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé." src="order-property.png"></p> <p>Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de <code>flex-direction</code> pour utiliser <code>row-reverse</code> — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.</p> @@ -119,7 +119,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles <ul> <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Une déconnexion entre les boîtes flexibles et la navigation au clavier (en anglais)</a></li> - <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)</a></li> + <li><a href="https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)</a></li> <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">Le conflit entre l'ordre <em>responsive</em> et le focus clavier (en anglais)</a></li> </ul> @@ -129,7 +129,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles <p>Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un <em>design</em> comme celui-ci.</p> -<p><img alt="Un composant avec une date, un titre puis un contenu." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p> +<p><img alt="Un composant avec une date, un titre puis un contenu." src="order-card.png"></p> <p>Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété <code>order</code>.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html index a1b391b7ac..d48ee13ef4 100644 --- a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html +++ b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -14,10 +14,10 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres --- <div>{{CSSRef}}</div> -<p class="summary">Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.</p> +<p>Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.</p> <div class="note"> -<p><strong>Note </strong>: Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.</p> +<p><strong>Note :</strong> Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.</p> </div> <h2 id="Le_module_d'alignement_des_boîtes_(Box_Alignment)">Le module d'alignement des boîtes (<em>Box Alignment</em>)</h2> @@ -40,7 +40,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <h2 id="Les_modes_d'écritures_(Writing_Modes)">Les modes d'écritures (<em>Writing Modes</em>)</h2> -<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de bases relatifs aux <em>flexbox</em></a>, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes</a> qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions <strong>de bloc</strong> et <strong>en ligne</strong> qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.</p> +<p>Dans l'article sur <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">les concepts de bases relatifs aux <em>flexbox</em></a>, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes</a> qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions <strong>de bloc</strong> et <strong>en ligne</strong> qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.</p> <p>On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez <a href="https://24ways.org/2016/css-writing-modes/">consulter cet article</a> pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.</p> @@ -58,7 +58,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p> -<p>Actuellement, seul Firefox prend en charge <code>sideways-rl</code> et <code>sideways-lr</code>. Il existe également certains problèmes relatifs à <code>writing-mode</code> et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Compatibilité_des_navigateurs">les informations de compatibilité pour la propriété <code>writing-mode</code></a>. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !</p> +<p>Actuellement, seul Firefox prend en charge <code>sideways-rl</code> et <code>sideways-lr</code>. Il existe également certains problèmes relatifs à <code>writing-mode</code> et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#compatibilité_des_navigateurs">les informations de compatibilité pour la propriété <code>writing-mode</code></a>. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !</p> <p>On notera que la propriété <code>writing-mode</code> CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut <code>dir</code> et <code>lang</code> sur l'élément <code>html</code> afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.</p> @@ -66,7 +66,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <p>La spécification sur les boîtes flexibles contient <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">une définition</a> de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.</p> -<p>Un élément avec <code>display: flex</code> se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">les marges des conteneurs ne fusionneront pas</a>.</p> +<p>Un élément avec <code>display: flex</code> se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">les marges des conteneurs ne fusionneront pas</a>.</p> <p>Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (<em>cleared</em>) et qu'il devient flexible car son élément parent reçoit <code>display: flex</code>, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec <code>inline-block</code> ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.</p> @@ -98,7 +98,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <p>De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.</p> -<p>Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">cet article à propos des relations entre la grille CSS et les autres méthodes de disposition</a>. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.</p> +<p>Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">cet article à propos des relations entre la grille CSS et les autres méthodes de disposition</a>. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.</p> <h2 id="Les_boîtes_flexibles_et_display_contents">Les boîtes flexibles et <code>display: contents</code></h2> @@ -117,7 +117,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <p>On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.</p> <div class="warning"> -<p><strong>Attention !</strong> Utiliser <code>display: contents</code> entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé <code>display: none</code>). La valeur <code>contents</code> doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).</p> +<p><strong>Attention :</strong> Utiliser <code>display: contents</code> entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé <code>display: none</code>). La valeur <code>contents</code> doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).</p> </div> <p>En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire <code>display: contents</code> dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index fdb4d31770..78a2dc9952 100644 --- a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -11,11 +11,11 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox --- <p>{{CSSRef}}</p> -<p class="summary">Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.</p> +<p>Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.</p> <h2 id="Pourquoi_choisir_les_boîtes_flexibles">Pourquoi choisir les boîtes flexibles ?</h2> -<p>Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">l'article sur les relations entre <em>flexbox</em> et les autres méthodes de disposition</a> où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.</p> +<p>Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">l'article sur les relations entre <em>flexbox</em> et les autres méthodes de disposition</a> où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.</p> <p>Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.</p> @@ -27,7 +27,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox <h3 id="L'espace_distribué_en_dehors_des_éléments">L'espace distribué en dehors des éléments</h3> -<p>Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a>, qui décrit comment aligner des objets sur l'axe principal.</p> +<p>Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a>, qui décrit comment aligner des objets sur l'axe principal.</p> <p>Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit <code>justify-content: space-between</code> afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur <code>space-around</code> ou, lorsqu'elle est prise en charge, la valeur <code>space-evenly</code>. On peut également utiliser <code>flex-start</code> afin de placer l'espace après les éléments ou encore <code>flex-end</code> pour placer l'espace avant les éléments voire <code>center</code> afin de centrer les éléments.</p> @@ -35,7 +35,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox <h3 id="L'espace_distribué_au_sein_des_éléments">L'espace distribué au sein des éléments</h3> -<p>On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p> +<p>On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p> <p>Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera <code>flex: auto</code> qui correspond à la notation raccourcie de <code>flex: 1 1 auto</code> — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.</p> @@ -47,7 +47,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox <p>Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.</p> -<p>Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible#Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour l'alignement sur l'axe principal</a>. Les éléments sont alignés le long de l'axe principal avec <code>flex-start</code>, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.</p> +<p>Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour l'alignement sur l'axe principal</a>. Les éléments sont alignés le long de l'axe principal avec <code>flex-start</code>, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.</p> <p>Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés <code>gap</code> de la spécification sur l'alignement des boîtes (<em>Box Alignment</em>) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.</p> @@ -67,7 +67,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox <p>Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.</p> -<p><img alt="Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> +<p><img alt="Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas." src="flex-cards.png"></p> <p>On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}<code>: column</code>. Ensuite, on affecte un coefficient <code>flex: 1</code> à la zone du contenu (ce qui correspond à la notation raccourcie <code>flex: 1 1 0</code>) : l'élément pourra s'étirer ou se rétrécir avec une base <code>0</code>. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété <code>flex</code>, on peut voir le pied remonter pour être inscrit directement après le contenu.</p> @@ -103,7 +103,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox flex: 1; }</pre> -<p>On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser <code>flex: 1</code> pour le côté avec l'image et <code>flex: 3</code> pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base <code>flex-basis</code> <code>0</code> et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de <code>flex-grow</code>. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p> +<p>On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser <code>flex: 1</code> pour le côté avec l'image et <code>flex: 3</code> pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base <code>flex-basis</code> <code>0</code> et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de <code>flex-grow</code>. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p> <pre class="brush: css">.media .content { flex: 3; diff --git a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index aa81bb277c..f4e278deeb 100644 --- a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html +++ b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.</p> +<p>Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.</p> <p>Le flux normal est défini par <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">la spécification CSS 2.1</a> qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (<em>block</em>) ou en ligne (<em>inline</em>) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.</p> @@ -34,11 +34,11 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no <p>Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p> +<p><img alt="" src="mdn-horizontal.png"></p> <p>Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p> +<p><img alt="" src="mdn-vertical.png"></p> <p>Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.</p> @@ -62,12 +62,12 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no <p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p> -<p>Pour en savoir plus à propos de la fusion des marges, vous pouvez lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article dédié à la fusion des marges</a>.</p> +<p>Pour en savoir plus à propos de la fusion des marges, vous pouvez lire <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">l'article dédié à la fusion des marges</a>.</p> <div class="note"> <p><strong>Note :</strong> Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p> +<p><img alt="" src="box-model.png"></p> </div> <h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_en_ligne">Les éléments qui participent à un contexte de formatage en ligne</h2> @@ -84,7 +84,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no <p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p> -<p>Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter <a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">le guide sur le modèle de formatage visuel</a>.</p> +<p>Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter <a href="/fr/docs/Web/CSS/Visual_formatting_model">le guide sur le modèle de formatage visuel</a>.</p> <h2 id="La_propriété_display_et_la_disposition_de_flux">La propriété <code>display</code> et la disposition de flux</h2> @@ -122,8 +122,8 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Le module de spécification <em>CSS Basic Box Model</em> qui définit les propriétés de base pour le modèle de boîte</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Apprendre - le fonctionnement du flux normal</a></li> - <li><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Les éléments HTML en ligne</a></li> - <li><a href="/fr/docs/Web/HTML/Éléments_en_bloc">Les éléments HTML de bloc</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Model">Le module de spécification <em>CSS Basic Box Model</em> qui définit les propriétés de base pour le modèle de boîte</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Apprendre - le fonctionnement du flux normal</a></li> + <li><a href="/fr/docs/Web/HTML/Inline_elements">Les éléments HTML en ligne</a></li> + <li><a href="/fr/docs/Web/HTML/Block-level_elements">Les éléments HTML de bloc</a></li> </ul> diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html index e657b8106c..a1c3966d64 100644 --- a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement --- <div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div> -<p class="summary">Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.</p> +<p>Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.</p> <h2 id="Qu'est-ce_que_le_dépassement">Qu'est-ce que le dépassement ?</h2> diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html index 26ad17b532..2291678c48 100644 --- a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -8,7 +8,7 @@ tags: translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture --- -<p class="summary">La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p> +<p>La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p> <p>Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux <a href="#Ressources_externes">ressources externes</a> ainsi qu'à la section <a href="#Voir_aussi">Voir aussi</a> en fin de page.</p> @@ -76,13 +76,13 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture <p>Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.</p> -<h2 id="Voir_aussi_2"><a id="Voir_aussi" name="Voir_aussi">Voir aussi</a></h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écritures</a></li> </ul> -<h2 id="Ressources_externes_2"><a id="Ressources_externes" name="Ressources_externes">Ressources externes</a></h2> +<h2 id="Ressources_externes">Ressources externes</h2> <ul> <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes (en anglais)</a></em> par Jen Simmons sur <em>24 Ways</em></li> diff --git a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index c9bb3ac9b3..5a796df22f 100644 --- a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html +++ b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors --- <div>{{CSSRef}}</div> -<p class="summary">Dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">le précédent guide</a>, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.</p> +<p>Dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">le précédent guide</a>, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.</p> <p>Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément <code>strong</code>. Le titre et les paragraphes sont des éléments de blocs et l'élément <code>strong</code> est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type <code>display</code> externe qui vaut <code>block</code>.</p> diff --git a/files/fr/web/css/css_flow_layout/index.html b/files/fr/web/css/css_flow_layout/index.html index 236f7b9341..c4932f195c 100644 --- a/files/fr/web/css/css_flow_layout/index.html +++ b/files/fr/web/css/css_flow_layout/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Flow_Layout --- <div>{{CSSRef}}</div> -<p class="summary">Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p> +<p>Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p> <p>Avec un flux normal, les <strong>éléments en ligne (<em>inline elements</em>)</strong> sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">le mode d'écriture</a> du document. Les <strong>éléments de bloc (<em>block elements</em>)</strong> sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.</p> diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index db1a7ee0d7..6478b943bc 100644 --- a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage --- <div>{{CSSRef}}</div> -<p class="summary">Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.</p> +<p>Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.</p> <p>Sur une page web, tout s'inscrit dans un <strong>contexte de formatage</strong>, une zone qui a été définie pour être organisée d'une certaine façon. Un <strong>contexte de formatage en bloc</strong> (ou <em>block formatting context</em> (<abbr title="Block Formatting Context">BFC</abbr>)) organisera ses éléments fils selon une disposition en bloc, un <strong>contexte de formatage flexible</strong> organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.</p> diff --git a/files/fr/web/css/css_fonts/index.html b/files/fr/web/css/css_fonts/index.html index ac5fb425fd..76d002b94e 100644 --- a/files/fr/web/css/css_fonts/index.html +++ b/files/fr/web/css/css_fonts/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/CSS_Fonts <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; @@ -31,7 +31,7 @@ translation_of: Web/CSS/CSS_Fonts <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux événements extraordinaires. Tandis qu’elle regardait encore l’endroit que le Chat venait de quitter, il reparut tout à coup. @@ -49,7 +49,6 @@ translation_of: Web/CSS/CSS_Fonts <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("font")}}</li> <li>{{cssxref("font-family")}}</li> @@ -73,37 +72,22 @@ translation_of: Web/CSS/CSS_Fonts <li>{{cssxref("font-weight")}}</li> <li>{{cssxref("line-height")}}</li> </ul> -</div> <h3 id="Règles">Règles @</h3> -<dl> - <dt>{{cssxref("@font-face")}}</dt> - <dd> - <div class="index"> - <ul> - <li>{{cssxref("@font-face/font-family", "font-family")}}</li> - <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li> - <li>{{cssxref("@font-face/font-style", "font-style")}}</li> - <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> - <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> - <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> - <li>{{cssxref("@font-face/src", "src")}}</li> - <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> +<ul> + <li>{{cssxref("@font-face")}}</li> + <li>{{cssxref("@font-feature-values")}}</li> </ul> - </div> - </dd> - <dt>{{cssxref("@font-feature-values")}}</dt> -</dl> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Mise en forme du texte et utilisation des polices</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals">Mise en forme du texte et utilisation des polices</a></dt> <dd>Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType">Guide sur les caractéristiques de police OpenType</a></dt> + <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">Guide sur les caractéristiques de police OpenType</a></dt> <dd>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></dt> + <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></dt> <dd>Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.</dd> </dl> diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html index 58699af2b5..ed04d4ca73 100644 --- a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html @@ -11,14 +11,14 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType --- <div>{{CSSRef}}</div> -<p class="summary">Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (<em>kerning</em> en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</p> +<p>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (<em>kerning</em> en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</p> <p>Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.</p> <p>En plus des caractéristiques communément utilisées telles que les ligatures ou <a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">les chiffres elzéviriens</a>, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.</p> <div class="warning"> -<p><strong>Attention !</strong> Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise <code>font-feature-settings</code> pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.</p> +<p><strong>Attention :</strong> Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise <code>font-feature-settings</code> pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.</p> </div> <h2 id="Découvrir_la_disponibilité_des_caractéristiques_pour_certaines_polices">Découvrir la disponibilité des caractéristiques pour certaines polices</h2> @@ -38,7 +38,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType <p>Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné</p> <blockquote> -<p>Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. <cite><em>Tim Brown, Directeur de la typographie chez Adobe</em>.</cite></p> +<p>Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. <em>Tim Brown, Directeur de la typographie chez Adobe</em>.</p> </blockquote> <h3 id="Au-delà_du_style_le_contenu_même">Au-delà du style : le contenu même</h3> @@ -153,7 +153,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType <h2 id="Utiliser_font-feature-settings">Utiliser <code>font-feature-settings</code></h2> -<p>La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser <a href="/en-US/docs/Web/CSS/Using_CSS_variables">des propriétés CSS personnalisées</a> afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.</p> +<p>La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">des propriétés CSS personnalisées</a> afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.</p> <p>Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.</p> @@ -170,10 +170,10 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType font-feature-settings: "liga" 0, "dlig" 0; }</pre> -<h4 class="brush: css" id="En_savoir_plus_sur_les_codes_des_caractéristiques_font-feature-settings">En savoir plus sur les codes des caractéristiques <code>font-feature-settings</code></h4> +<h4 id="En_savoir_plus_sur_les_codes_des_caractéristiques_font-feature-settings">En savoir plus sur les codes des caractéristiques <code>font-feature-settings</code></h4> <ul> - <li class="brush: css"><a href="https://sparanoid.com/lab/opentype-features/">Une démonstration des caractéristiques OpenType</a></li> + <li><a href="https://sparanoid.com/lab/opentype-features/">Une démonstration des caractéristiques OpenType</a></li> <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">La liste des caractéristiques OpenType sur Wikipédia</a></li> </ul> diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.html b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html index 737e6179c1..487a4b1948 100644 --- a/files/fr/web/css/css_fonts/variable_fonts_guide/index.html +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html @@ -11,10 +11,10 @@ original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables --- <div>{{CSSRef}}</div> -<p class="summary"><strong>Les polices variables</strong> sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.</p> +<p><strong>Les polices variables</strong> sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.</p> <div class="warning"> -<p><strong>Attention ! </strong>Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.</p> +<p><strong>Attention :</strong> Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.</p> </div> <h2 id="Qu'est-ce_qu'une_police_variable">Qu'est-ce qu'une police variable ?</h2> @@ -71,7 +71,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables <p><code>wght</code> correspondra à l'axe enregistré du même nom et <code>GRAD</code> à un axe spécifique.</p> </li> <li> - <p>Si on a défini des valeurs avec <code>font-variation-settings</code> et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant <a href="/fr/docs/Web/CSS/Les_variables_CSS">des propriétés CSS personnalisées</a> pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).</p> + <p>Si on a défini des valeurs avec <code>font-variation-settings</code> et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant <a href="/fr/docs/Web/CSS/Using_CSS_custom_properties">des propriétés CSS personnalisées</a> pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).</p> </li> </ol> diff --git a/files/fr/web/css/css_fragmentation/index.html b/files/fr/web/css/css_fragmentation/index.html index e6e860fb54..31f3a1c63d 100644 --- a/files/fr/web/css/css_fragmentation/index.html +++ b/files/fr/web/css/css_fragmentation/index.html @@ -17,7 +17,6 @@ translation_of: Web/CSS/CSS_Fragmentation <h2 id="Référence">Référence</h2> -<div class="index"> <ul> <li>{{cssxref("box-decoration-break")}}</li> <li>{{cssxref("break-after")}}</li> @@ -26,7 +25,6 @@ translation_of: Web/CSS/CSS_Fragmentation <li>{{cssxref("orphans")}}</li> <li>{{cssxref("widows")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_generated_content/index.html b/files/fr/web/css/css_generated_content/index.html index 09d0a27ed9..1892fb99c2 100644 --- a/files/fr/web/css/css_generated_content/index.html +++ b/files/fr/web/css/css_generated_content/index.html @@ -16,12 +16,10 @@ translation_of: Web/CSS/CSS_Generated_Content <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("content")}}</li> <li>{{cssxref("quotes")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index 42060519b3..2fe6ab6f2c 100644 --- a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -16,9 +16,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.</p> -<div id="placement_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} + +<h2 id="Placement_automatique">Placement automatique</h2> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -34,7 +35,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -52,7 +52,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS </div> </pre> -<p>{{EmbedLiveSample('placement_1', '500', '230')}}</p> +<p>{{EmbedLiveSample('Placement_automatique', '500', '230')}}</p> </div> <h2 id="Définir_des_règles_pour_le_placement_automatique">Définir des règles pour le placement automatique</h2> @@ -65,9 +65,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété <code>grid-auto-rows</code>. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :</p> -<div id="placement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -83,7 +81,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -102,14 +99,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_2', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_de_la_grille_implicite', '500', '330')}}</p> +<h3 id="Dimensionner_les_lignes_avec_minmax">Dimensionner les lignes avec minmax()</h3> <p>On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.</p> -<div id="placement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -125,7 +120,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -151,14 +145,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_3', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_avec_minmax', '500', '330')}}</p> + +<h3 id="Dimensionner_les_lignes_avec_une_liste_de_pistes">Dimensionner les lignes avec une liste de pistes</h3> <p>On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de <code>200px</code>. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.</p> -<div id="placement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -174,7 +167,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -196,8 +188,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_4', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_avec_une_liste_de_pistes', '500', '330')}}</p> + <h3 id="Utiliser_le_placement_automatique_pour_les_colonnes">Utiliser le placement automatique pour les colonnes</h3> @@ -205,7 +197,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.</p> -<div id="placement_5"> <pre class="brush: css">.wrapper { display: grid; grid-template-rows: repeat(3, 200px); @@ -215,8 +206,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -232,7 +222,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -246,8 +235,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS </div> </pre> -<p>{{EmbedLiveSample('placement_5', '500', '640')}}</p> -</div> +<p>{{EmbedLiveSample('Utiliser_le_placement_automatique_pour_les_colonnes', '500', '640')}}</p> <h2 id="Lordre_des_éléments_placés_automatiquement">L'ordre des éléments placés automatiquement</h2> @@ -261,9 +249,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.</p> -<div id="placement_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -279,7 +265,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -313,8 +298,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_6', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('Les_éléments_avec_des_propriétés_de_placement', '500', '450')}}</p> <h3 id="Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes">Gérer les éléments qui s'étalent sur plusieurs pistes</h3> @@ -322,9 +306,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.</p> -<div id="placement_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -339,7 +321,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -378,8 +359,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_7', '500', '770')}}</p> -</div> +<p>{{EmbedLiveSample('Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes', '500', '770')}}</p> <h3 id="Combler_les_espaces">Combler les espaces</h3> @@ -389,9 +369,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (<em>tab order</em>) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilit%C3%A9">un article sur l'accessibilité</a>.</p> -<div id="placement_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -406,7 +384,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -446,8 +423,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_8', '500', '730')}}</p> -</div> +<p>{{EmbedLiveSample('Combler_les_espaces', '500', '730')}}</p> <h3 id="Les_éléments_anonymes_de_la_grille">Les éléments anonymes de la grille</h3> @@ -467,7 +443,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe <code>landscape</code> l'élément s'étend sur deux colonnes). On utilise ensuite <code>grid-auto-flow: dense</code> afin de créer une grille dense.</p> -<div id="placement_9"> <pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); @@ -506,14 +481,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS </ul> </pre> -<p>{{EmbedLiveSample('placement_9', '500', '1300')}}</p> -</div> +<p>{{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}}</p> <p>Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément <code>dt</code> démarre sur la première ligne et que l'élément <code>dd</code> sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.</p> -<div id="placement_10"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="Autre_exemple">Autre exemple</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -521,7 +495,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS background-color: #fff4e6; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <dl> @@ -554,12 +527,11 @@ dd { } </pre> -<p>{{EmbedLiveSample('placement_10', '500', '230')}}</p> +<p>{{EmbedLiveSample('Autre_exemple', '500', '230')}}</p> <div class="note"> <p><strong>Note :</strong> Voir <a href="https://www.sitepoint.com/understanding-masonry-layout/">cet article de SitePoint</a> à propos de la disposition en briques pour d'autres cas d'utilisation.</p> </div> -</div> <h2 id="Quest-ce_que_le_placement_automatique_ne_permet_pas_de_réaliser_actuellement">Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?</h2> diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg Binary files differnew file mode 100644 index 0000000000..04c2b6663a --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg Binary files differnew file mode 100644 index 0000000000..c2cf49bfae --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index d4dac05318..800c04293b 100644 --- a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -40,7 +40,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.</p> -<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p> +<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p> <h2 id="Le_conteneur">Le conteneur</h2> @@ -64,8 +64,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -79,13 +78,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Le_conteneur', '200', '330') }}</p> <p>Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspecteur de grille</a> dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur <code>grid</code>. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.</p> -<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14791/Screen%20Shot%202017-03-17%20at%2014.47.48.png" style="height: 551px; width: 846px;"></p> +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="screen_shot_2017-03-17_at_14.47.48.png"></p> <p>Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.</p> @@ -95,13 +93,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une <em>piste</em> est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 400px; width: 600px;"></p> +<p><img alt="" src="1_grid_track.png"></p> <p>On peut ajouter la propriété <code>grid-template-columns</code> à notre exemple précédent, pour définir la taille des colonnes.</p> <p>Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.</p> -<div id="grid_first"> <pre class="brush: html"><div class="wrapper"> <div>Un</div> <div>Deux</div> @@ -117,8 +114,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -132,16 +128,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> -</div> + <h3 id="L'unité_fr">L'unité fr</h3> <p>Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, <code>fr</code>, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.</p> -<div id="fr_unit_ls"> <pre class="brush: html"><div class="wrapper"> <div>Un</div> <div>Deux</div> @@ -157,8 +151,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -172,10 +165,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> -<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> -</div> +<p>{{ EmbedLiveSample("L'unité_fr", '220', '140') }}</p> <p>L'exemple suivant crée une grille avec une colonne de <code>2fr</code>, et deux colonnes de <code>1fr</code>. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.</p> @@ -251,8 +242,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -266,7 +256,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}</p> @@ -274,7 +263,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.</p> -<p>La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p> +<p>La fonction {{cssxref("minmax()", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p> <pre class="brush: css">.wrapper { display: grid; @@ -283,8 +272,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -297,7 +285,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base padding: 1em; color: #d9480f; }</pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -317,7 +304,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.</p> -<p><img alt="Grid Lines" src="https://mdn.mozillademos.org/files/14793/GRID2.jpg" style="height: 456px; width: 764px;"></p> +<p><img alt="Grid Lines" src="grid2.jpg"></p> <p>Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.</p> @@ -356,8 +343,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -371,7 +357,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> + <p>{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}</p> @@ -381,17 +367,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Une <em>cellule</em> est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.</p> -<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 400px; width: 600px;"></p> +<p><img alt="The first cell of the grid highlighted" src="1_grid_cell.png"></p> <h2 id="Les_zones">Les zones</h2> <p>Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une <em>zone</em>. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.</p> -<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 400px; width: 600px;"></p> +<p><img alt="A grid area" src="1_grid_area.png"></p> <h2 id="Les_gouttières">Les gouttières</h2> -<p>Les <em>gouttière</em><em>s</em> entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.</p> +<p>Les <em>gouttière</em><em>s</em> entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}, ou de la propriété raccourcie {{cssxref("gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.</p> <pre class="brush: css">.wrapper { display: grid; @@ -402,7 +388,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </pre> <div class="note"> -<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p> +<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.</p> <p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p> </div> @@ -416,8 +402,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -431,7 +416,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Les_gouttières') }}</p> @@ -441,7 +425,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.</p> -<div id="nesting"> <pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> @@ -455,7 +438,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> </pre> -<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14795/grid3.jpg" style="height: 512px; width: 900px;"></p> +<p><img alt="Nested grid in flow" src="grid3.jpg"></p> <p>En définissant la propriété <code>display:grid</code> sur l'élément <code>box1</code>, il devient lui-même une grille et ses enfants se positionnent sur cette grille.</p> @@ -469,8 +452,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -490,12 +472,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p> +<p>{{ EmbedLiveSample('Grilles_imbriquées', '600', '340') }}</p> -<p>Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.</p> +<p>Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.</p> <h3 id="Sous-grille">Sous-grille</h3> @@ -517,7 +497,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.</p> -<div id="l_ex"> <pre class="brush: html"><div class="wrapper"> <div class="box box1">Un</div> <div class="box box2">Deux</div> @@ -545,8 +524,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -560,10 +538,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> +<p>{{ EmbedLiveSample('Superposer_les_éléments_avec_z-index', '230', '420') }}</p> <p>L'élément <code>box2</code> est maintenant superposé avec <code>box1</code>, et comme il arrive après dans le code source il s'affiche par-dessus.</p> @@ -591,8 +567,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="box box1">Un</div> <div class="box box2">Deux</div> <div class="box box3">Trois</div> @@ -601,7 +576,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> </pre> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -615,7 +590,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}</p> diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png Binary files differnew file mode 100644 index 0000000000..33e4a5efab --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png Binary files differnew file mode 100644 index 0000000000..d0d2ce3199 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 7830f9ab48..6721ff8c67 100644 --- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}</p> -<p>Si vous connaissez <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles (flexbox)</a> vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p> +<p>Si vous connaissez <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles (flexbox)</a> vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p> <p>Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.</p> @@ -22,11 +22,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Lorsqu'on manipule une grille, on dispose de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (<em>block layout</em>). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.</p> -<p><img src="https://mdn.mozillademos.org/files/14725/7_Block_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img src="7_block_axis.png"></p> <p><strong>L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.</strong></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img alt="" src="7_inline_axis.png"></p> <p>Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.</p> @@ -34,6 +34,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.</p> +<h3 id="utiliser_align-items">Utiliser align-items</h3> + <p>Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :</p> <ul> @@ -48,9 +50,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <li><code>last baseline</code></li> </ul> -<div id="alignment_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -66,7 +66,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -102,18 +101,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_1', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_align-items', '500', '450')}}</p> <p>Lorsqu'on utilise <code>align-self: start</code>, la hauteur de chaque <code><div></code> sera déterminée par le contenu du <code><div></code>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <code><div></code> sera étiré afin de remplir la zone de la grille.</p> <p>La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant <code>align-self</code> pour les objets.</p> +<h3 id="utiliser_align-self">Utiliser align-self</h3> + <p>Dans le prochain exemple, on utilise la propriété <code>align-self</code> afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour <code>align-self</code> : l'objet est étiré. Le deuxième objet utilise la valeur <code>start</code>, le troisième utilise <code>end</code> et le quatrième utilise <code>center</code>.</p> -<div id="alignment_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -129,7 +127,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -167,8 +164,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_2', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_align-self', '500', '450')}}</p> <h3 id="Gestion_des_objets_avec_un_ratio_intrinsèque">Gestion des objets avec un ratio intrinsèque</h3> @@ -196,9 +192,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Là encore, la valeur par défaut <code>stretch</code> pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.</p> -<div id="alignment_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -214,7 +208,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -251,9 +244,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <div class="item4">Objet 4</div> </div> </pre> - +Justifier_les_objets_sur_laxe_en_ligne_inline_axis <p>{{EmbedLiveSample('alignment_3', '500', '450')}}</p> -</div> <p>Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.</p> @@ -267,9 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>En combinant les propriétés <code>align-</code><code>*</code> et <code>justify-*</code>, on peut facilement centrer un objet sur sa zone de grille.</p> -<div id="alignment_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -285,7 +275,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -308,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_4', '500', '480')}}</p> -</div> +<p>{{EmbedLiveSample('Centrer_un_objet_sur_une_zone', '500', '480')}}</p> <h2 id="Aligner_les_pistes_dune_grille_sur_laxe_de_bloc">Aligner les pistes d'une grille sur l'axe de bloc</h2> @@ -337,9 +325,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>La propriété <code>align-content</code> s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est <code>start</code> : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.</p> -<div id="alignment_5"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="alignement_par_defaut">Alignement par défaut</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -355,7 +343,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -391,14 +378,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_5', '500', '520')}}</p> -</div> +<p>{{EmbedLiveSample('alignement_par_defaut', '500', '520')}}</p> + +<h3 id="align-content_end">Utiliser align-content: end</h3> <p>Si on ajoute <code>align-content</code> avec la valeur <code>end</code> sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.</p> -<div id="alignment_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -414,7 +400,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -451,14 +436,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_6', '500', '520')}}</p> -</div> +<p>{{EmbedLiveSample('align-content_end', '500', '520')}}</p> + +<h3 id="align-content_end_space-between">Utiliser align-content: space-between</h3> <p>Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : <code>space-between</code>, <code>space-around</code> et <code>space-evenly</code> qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec <code>space-between</code> pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.</p> -<div id="alignment_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -474,7 +458,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -511,14 +494,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_7', '500', '1570')}}</p> -</div> +<p>{{EmbedLiveSample('align-content_end_space-between', '500', '1570')}}</p> <p>On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.</p> <p>Dans l'image qui suit, on a a placé une grille en utilisant <code>align-content: start</code> et une autre grille qui utilise <code>align-content: space-between</code>. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.</p> -<p><img src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> +<p><img src="7_space-between.png"></p> <h2 id="Justifier_les_pistes_sur_laxe_des_lignes">Justifier les pistes sur l'axe des lignes</h2> @@ -526,9 +508,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur <code>space-around</code>. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.</p> -<div id="alignment_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -544,7 +524,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -582,8 +561,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_8', '500', '500')}}</p> -</div> +<p>{{EmbedLiveSample('Justifier_les_pistes_sur_laxe_des_lignes', '500', '500')}}</p> <h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2> @@ -591,9 +569,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec <code>auto</code>. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).</p> -<div id="alignment_9"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -609,7 +585,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -646,12 +621,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_9', '500', '500')}}</p> -</div> +<p>{{EmbedLiveSample('Alignement_et_marges_automatiques', '500', '500')}}</p> <p>On peut voir comment l'objet est aligné grâce à <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles dans Firefox</a>.</p> -<p><img src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p> +<p><img src="7_auto_margins.png"></p> <h2 id="Lalignement_et_les_modes_décriture">L'alignement et les modes d'écriture</h2> diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html index 6071aa815d..1b93e665ec 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -59,7 +59,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progre <p>Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.</p> -<div id="enhancement_1"> <pre class="brush: css">* {box-sizing: border-box;} img { max-width: 100%; @@ -103,22 +102,21 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_1', '500', '180')}}</p> -</div> +<p>{{EmbedLiveSample('Effectuer_la_transition_depuis_une_disposition_flottante', '500', '180')}}</p> <p>Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.</p> -<p><img alt="A simple example of overriding a floated layout using grid." src="https://mdn.mozillademos.org/files/14743/10-float-simple-override.png" style="height: 308px; width: 1620px;"></p> +<p><img alt="A simple example of overriding a floated layout using grid." src="10-float-simple-override.png"></p> <h3 id="Utiliser_les_requêtes_de_fonctionnalité_(feature_queries)">Utiliser les requêtes de fonctionnalité (<em>feature queries</em>)</h3> <p>L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.</p> +<h4 id="un_exemple_plus_complexe">Un exemple plus complexe</h4> + <p>Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.</p> -<div id="enhancement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -135,7 +133,6 @@ img { color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper ul { overflow: hidden; @@ -180,22 +177,23 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_2', '550', '400')}}</p> -</div> +<p>{{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}}</p> <p>Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.</p> -<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="https://mdn.mozillademos.org/files/14745/10-floated-cards.png" style="height: 536px; width: 550px;"></p> +<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="10-floated-cards.png"></p> <p>Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…</p> <p>Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.</p> -<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="https://mdn.mozillademos.org/files/14747/10-float-width-problem.png" style="height: 721px; width: 550px;"></p> +<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="10-float-width-problem.png"></p> <p>Si on réinitialise la largeur avec <code>auto</code>, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce <a href="/fr/docs/Web/CSS/@supports">aux requêtes de fonctionnalité CSS</a>, on peut le faire directement en CSS.</p> -<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.</p> +<h4 id="une_solution_avec_les_requetes_de_fonctionnalité">Une solution avec les requêtes de fonctionnalité</h4> + +<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Media_Queries">requêtes de média</a> qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.</p> <pre class="brush: css">@supports (display: grid) { .wrapper { @@ -208,11 +206,9 @@ img { <p>La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.</p> -<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre.</p> +<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre.</p> -<div id="enhancement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -229,7 +225,6 @@ img { color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper ul { overflow: hidden; @@ -287,8 +282,7 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_3', '550', '480')}}</p> -</div> +<p>{{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}}</p> <h2 id="Surcharger_les_autres_valeurs_pour_display">Surcharger les autres valeurs pour <code>display</code></h2> @@ -296,9 +290,7 @@ img { <p>Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger <code>display: inline-block</code>. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par <code>inline-block</code>, ils deviendront des objets de la grille et <code>inline-block</code> ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété <code>vertical-align</code> sur les éléments lorsqu'on utilise le mode <code>inline-block</code>, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.</p> -<div id="enhancement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -316,7 +308,7 @@ img { color: #d9480f; } </pre> -</div> + <pre class="brush: css">.wrapper ul { margin: 0 -10px; @@ -374,8 +366,7 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_4', '500', '480')}}</p> -</div> +<p>{{EmbedLiveSample('Surcharger_les_autres_valeurs_pour_display', '500', '480')}}</p> <p>Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé <code>grid-gap</code> plutôt que des marges et des marges négatives pour créer les « gouttières ».</p> diff --git a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html index ccde0b5c42..2270ae2deb 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -47,9 +47,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité <p>Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.</p> -<div id="accessibility_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -65,7 +63,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -88,8 +85,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité </div> </pre> -<p>{{EmbedLiveSample('accessibility_1', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Un_ré-ordonnancement_visuel_et_non_logique', '500', '330')}}</p> <p>Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.</p> diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index b8ec3a91d3..d43798fd7f 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -42,7 +42,7 @@ original_slug: >- <p>Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise <code>text-align</code> avec <code>left</code> et on ajoute <code>dir="rtl"</code> sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec <code>text-align value: left</code>, l'alignement reste à gauche.</p> -<p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p> +<p><img alt="A simple example of text direction." src="8_direction_simple_example.png"></p> <p>Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.</p> @@ -54,7 +54,7 @@ original_slug: >- <p>Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (<em>block axis</em> en anglais) et l'axe en ligne (<em>inline axis</em>). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes <em>logiques</em> sont très utiles et on comprend mieux leurs rôles sur la grille.</p> -<p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p> +<p><img alt="An image showing the default direction of the Block and Inline Axes." src="8-horizontal-tb.png"></p> <h2 id="Les_modes_d'écriture_CSS">Les modes d'écriture CSS</h2> @@ -74,9 +74,7 @@ original_slug: >- <p>Sur le Web, c'est la valeur <code>horizontal-tb</code> qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut <code>horizontal-tb</code> et le second utilise la valeur <code>vertical-rl</code>. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (<em>inline</em>) est donc l'axe vertical.</p> -<div id="writing_1"> -<div class="hidden"> -<pre class="brush: css">.wrapper > p { +<pre class="brush: css hidden">.wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; @@ -86,7 +84,6 @@ original_slug: >- max-width: 300px; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p> @@ -94,18 +91,17 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_1', '500', '420')}}</p> -</div> +<p>{{EmbedLiveSample("writing-mode", '500', '420')}}</p> <h2 id="La_gestion_des_modes_d'écriture_avec_une_grille">La gestion des modes d'écriture avec une grille</h2> <p>Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.</p> +<h3 id="Mode_d'écriture_par_défaut">Mode d'écriture par défaut</h3> + <p>Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.</p> -<div id="writing_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -121,7 +117,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -140,14 +135,13 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_2', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}}</p> + +<h3 id="definir_writing-mode">Définir writing-mode</h3> <p>Si on ajoute <code>writing-mode: vertical-lr</code> au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.</p> -<div id="writing_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -163,7 +157,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { writing-mode: vertical-lr; @@ -183,10 +176,9 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_3', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("definir_writing-mode", '500', '330')}}</p> -<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="https://mdn.mozillademos.org/files/14737/8-vertical-lr.png" style="height: 360px; width: 257px;"></p> +<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="8-vertical-lr.png"></p> <h2 id="L'utilisation_de_valeurs_logiques_pour_l'alignement">L'utilisation de valeurs logiques pour l'alignement</h2> @@ -194,9 +186,7 @@ original_slug: >- <p>Dans le prochain exemple, on aligne des objets dans une grille pour laquelle <code>writing-mode: vertical-lr</code>. Les valeurs <code>start</code> et <code>end</code> fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.</p> -<div id="writing_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -212,7 +202,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { writing-mode: vertical-lr; @@ -248,8 +237,7 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_4', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}}</p> <p>Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de <code>vertical-lr</code> à <code>vertical-rl</code> pour changer de mode d'écriture.</p> @@ -269,9 +257,9 @@ original_slug: >- <li>L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.</li> </ul> -<div id="writing_5"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite">Placement sur les lignes pour du texte de gauche à droite</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -314,14 +302,13 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_5', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}}</p> + +<h3 id="placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche">Placement sur les lignes pour du texte de droite à gauche</h3> <p>Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur <code>rtl</code> pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.</p> -<div id="writing_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -337,7 +324,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { direction: rtl; @@ -365,8 +351,7 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_6', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}}</p> <p>On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.</p> @@ -398,7 +383,6 @@ original_slug: >- <p>Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.</p> -<div id="writing_7"> <pre class="brush: css">.wrapper { display: grid; grid-gap: 20px; @@ -435,12 +419,11 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_7', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}}</p> <h2 id="Les_valeurs_physiques_et_les_grilles_CSS">Les valeurs physiques et les grilles CSS</h2> -<p>On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">l'alignement des boîtes et les grilles</a>, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.</p> +<p>On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">l'alignement des boîtes et les grilles</a>, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.</p> <p>Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode <code>ltr</code> à un mode <code>rtl</code>.</p> diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html index 259dd33bbc..2b45f2fac6 100644 --- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p> -<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">le guide précédent</a>, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des <em>zones</em> de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !</p> +<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">le guide précédent</a>, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des <em>zones</em> de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !</p> <h2 id="Donner_un_nom_à_une_zone_de_grille">Donner un nom à une zone de grille</h2> @@ -26,7 +26,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>Ici, on définit les quatre lignes qui entourent la zone en question :</p> -<p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p> +<p><img alt="The Grid Area defined by lines" src="4_area.png"></p> <p>On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :</p> @@ -37,11 +37,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <li>Le contenu principale (<em>content</em>)</li> </ul> -<p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p> +<p><img alt="An image showing a simple two column layout with header and footer" src="4_layout.png"></p> <p>Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :</p> -<div id="Grid_Area_1"> <pre class="brush: css">.header { grid-area: hd; } @@ -69,8 +68,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -88,7 +86,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="header">En-tête</div> @@ -97,8 +94,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <div class="footer">Pied de page</div> </div></pre> -<p>{{EmbedLiveSample('Grid_Area_1', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}</p> <p>Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.</p> @@ -120,8 +116,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -139,7 +134,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -159,7 +153,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <div class="footer">Pied de page</div> </div></pre> -<p>{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}</p> +<p>{{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}</p> <p>Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.</p> @@ -183,8 +177,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -202,7 +195,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -215,16 +207,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="header">En-tête</div> <div class="sidebar">Barre latérale</div> <div class="content">Contenu</div> <div class="footer">Pied de page</div> </div></pre> -</div> -<p>{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}</p> +<p>{{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}</p> <p>La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.</p> @@ -236,8 +226,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -255,7 +244,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.header { grid-area: hd; @@ -302,14 +290,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="header">En-tête</div> <div class="sidebar">Barre latérale</div> <div class="content">Contenu</div> <div class="footer">Pied de page</div> </div></pre> -</div> <p>{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}</p> @@ -317,15 +303,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.</p> +<h3 id="Exemple_d'objet_média">Exemple d'objet média</h3> + <p>Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.</p> -<p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p> +<p><img alt="Images showing an example media object design" src="4_media_objects.png"></p> <p>Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec <code>1fr</code> et celle pour le texte reçoit <code>3fr</code>. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser <code>1fr</code> pour la zone du texte. Cette colonne de <code>1fr</code> aurait alors occupé le reste de l'espace.</p> <p>Pour la zone dédiée à l'image, on crée une zone de grille intitulée <code>img</code> et pour le texte, on crée une seconde zone intitulée <code>content</code>. Ensuite, on utilise ces noms pour créer l'organisation via la propriété <code>grid-template-areas</code>.</p> -<div id="Media_1"> <pre class="brush: css">* {box-sizing: border-box;} .media { @@ -361,14 +348,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille </div> </div></pre> -<p>{{EmbedLiveSample('Media_1', '300', '200')}}</p> -</div> +<p>{{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}</p> <h3 id="Afficher_l'image_de_l'autre_côté">Afficher l'image de l'autre côté</h3> <p>Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure <code>1fr</code> est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.</p> -<div id="Media_2"> <pre class="brush: css">* {box-sizing: border-box;} .media { @@ -409,8 +394,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille </div> </div></pre> -<p>{{EmbedLiveSample('Media_2', '300', '200') }}</p> -</div> +<p>{{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}</p> <h2 id="Les_propriétés_raccourcies_pour_les_grilles_CSS">Les propriétés raccourcies pour les grilles CSS</h2> @@ -463,7 +447,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <li>{{cssxref("grid-auto-flow")}}</li> </ul> -<p>Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p> +<p>Cette propriété réinitialise également la propriété {{cssxref("gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p> <p>On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :</p> diff --git a/files/fr/web/css/css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/index.html index b097f662db..6d622ed3af 100644 --- a/files/fr/web/css/css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/index.html @@ -18,8 +18,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <p>Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; @@ -32,7 +31,6 @@ translation_of: Web/CSS/CSS_Grid_Layout padding: 1em; color: #d9480f; }</pre> -</div> <h3 id="HTML">HTML</h3> @@ -85,7 +83,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("grid-template-columns")}}</li> <li>{{cssxref("grid-template-rows")}}</li> @@ -106,17 +103,14 @@ translation_of: Web/CSS/CSS_Grid_Layout <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Fonctions_CSS">Fonctions CSS</h3> -<div class="index"> <ul> <li>{{cssxref("repeat", "repeat()")}}</li> <li>{{cssxref("minmax", "minmax()")}}</li> <li>{{cssxref("fit-content", "fit-content()")}}</li> </ul> -</div> <h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3> @@ -124,7 +118,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <h3 id="Termes_définis_dans_le_glossaire">Termes définis dans le glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossaire/Grid">Grille</a></li> <li><a href="/fr/docs/Glossaire/Grid_Lines">Lignes</a></li> @@ -136,11 +129,9 @@ translation_of: Web/CSS/CSS_Grid_Layout <li><a href="/fr/docs/Glossaire/Grid_Rows">Ligne horizontale </a></li> <li><a href="/fr/docs/Glossaire/Grid_Column">Colonnes</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> -<div class="index"> <ul> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Placer les éléments sur les lignes d'une grille CSS</a></li> @@ -155,7 +146,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Construire des dispositions courantes avec des grilles CSS</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Les sous-grilles (<em>subgrid</em>)</a></li> </ul> -</div> <h2 id="Ressources_externes">Ressources externes</h2> diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index a7fbb6e569..d31fb16a38 100644 --- a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -19,9 +19,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Lorsqu'on définit une grille avec <code>grid-template-rows</code> et <code>grid-template-columns</code>, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.</p> -<div id="example_named_lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -37,7 +35,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <p>Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici <code>content-start</code> et <code>content-end</code>), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.</p> @@ -79,8 +76,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('example_named_lines', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Nommer_des_lignes_lorsqu'on_définit_une_grille", '500', '330')}}</p> + <p>Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition <em>responsive</em> où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les <em>media queries</em>.</p> @@ -94,9 +91,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes <code>-start</code> et <code>-end</code> pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise <code>content-start</code> et <code>content-end</code> pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée <code>content</code> qu'on peut également manipuler</p> -<div id="implicit_areas_from_lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -112,7 +107,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <p>On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée <code>content</code>.</p> @@ -133,8 +127,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées", '500', '330')}}</p> <p>Il n'est pas nécessaire de définir l'emplacement de cette zone avec <code>grid-template-areas</code> car les lignes suffisent à créer la zone et à la placer.</p> @@ -166,13 +159,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, <code>sd-end</code> et <code>main-start</code> font référence à la même ligne verticale).</p> -<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p> +<p><img alt="An image showing the implicit line names created by our grid areas." src="5_multiple_lines_from_areas.png"></p> <p>On peut positionner <code>overlay</code> grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :</p> -<div id="implicit_lines_from_area"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -188,7 +179,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -231,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Définir_des_lignes_implicites_à_l'aide_de_zones_nommées", '500', '330')}}</p> <p>Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.</p> @@ -240,11 +229,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec <code>repeat()</code> car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec <code>repeat()</code>, vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.</p> +<h3 id="une_grille_à_12_colonnes_avec_repeat">Une grille à 12 colonnes avec repeat()</h3> + <p>Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (<code>1fr</code>), on définit un nom : <code>[col-start]</code>. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées <code>col-start</code> et qui mesureront chacune <code>1fr</code> de large.</p> -<div id="multiple_lines_same_name"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -260,7 +249,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -286,12 +274,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div> </div></pre> -<p>{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("une_grille_à_12_colonnes_avec_repeat", '500', '330')}}</p> <p>Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :</p> -<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p> +<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="5_named_lines1.png"></p> + +<h3 id="Définir_des_lignes_nommées_avec_une_liste_de_piste">Définir des lignes nommées avec une liste de piste</h3> <p>La syntaxe <code>repeat()</code> permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (<code>1fr</code>), intitulée <code>col1-start</code>, et qui est suivie par une colonne plus large (<code>3fr</code>), intitulée <code>col2-start</code>.</p> @@ -316,9 +305,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé <code>span</code> pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.</p> -<div id="span_line_number"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -334,7 +321,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -355,14 +341,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('span_line_number', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Définir_des_lignes_nommées_avec_une_liste_de_piste', '500', '330')}}</p> + +<h3 id="cadre_d_une_grille_à_12_colonnes">Cadre d'une grille à 12 colonnes</h3> <p>Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.</p> <p>Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des <em>frameworks</em> tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le <em>framework</em> importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel <em>framework</em> se résume à :</p> -<div class="three_column"> <pre class="brush: css">.wrapper { display: grid; grid-gap: 10px; @@ -372,8 +358,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -389,7 +374,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <header class="main-header">Je suis l'en-tête</header> @@ -420,12 +404,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril } </pre> -<p>{{EmbedLiveSample('three_column', '500', '330')}}</p> +<p>{{ EmbedLiveSample('cadre_d_une_grille_à_12_colonnes', '500', '330') }}</p> <p>Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :</p> -<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p> -</div> +<p><img alt="The layout with the grid highlighted." src="5_named_lines2.png"></p> + <p>Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent <code>1fr</code>. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !</p> diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 96ba332efb..08aff7df63 100644 --- a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -16,7 +16,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">l'article sur les concepts de base</a>, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.</p> -<p>Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain guide</a>.</p> +<p>Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes">un prochain guide</a>.</p> <h2 id="Un_exemple_simple">Un exemple simple</h2> @@ -24,10 +24,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles de Firefox</a>, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.</p> -<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> +<p><img alt="Our Grid highlighted in DevTools" src="3_hilighted_grid.png"></p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -43,7 +42,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -66,7 +64,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :</p> -<div id="Line_Number"> <pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 2; @@ -75,12 +72,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">un prochain guide</a> mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.</p> +<p>Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">un prochain guide</a> mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.</p> <p>On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -99,7 +95,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -129,16 +124,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>{{EmbedLiveSample('Line_Number', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne", '300', '330')}}</p> + -<div id="Grid_Shorthands"> <h2 id="Les_propriétés_raccourcies_grid-column_et_grid-row">Les propriétés raccourcies <code>grid-column</code> et <code>grid-row</code></h2> <p>On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -157,7 +150,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -185,16 +177,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Les_propriétés_raccourcies_grid-column_et_grid-row', '300', '330')}}</p> -<h3 id="La_taille_par_défaut">La taille par défaut</h3> +<h2 id="La_taille_par_défaut">La taille par défaut</h2> <p>Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre <code>grid-column-end</code> ou <code>grid-row-end</code>. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :</p> -<div id="End_Lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -213,7 +202,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -244,14 +232,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>{{EmbedLiveSample('End_Lines', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('La_taille_par_défaut', '300', '330')}}</p> + +<h3 id="Tailles_par_défaut_avec_les_propriétés_raccourcies">Tailles par défaut avec les propriétés raccourcies</h3> <p>Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).</p> -<div id="New_Shorthand"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -270,7 +257,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -298,8 +284,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>{{EmbedLiveSample('New_Shorthand', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Tailles_par_défaut_avec_les_propriétés_raccourcies', '300', '330')}}</p> <h2 id="La_propriété_grid-area">La propriété <code>grid-area</code></h2> @@ -312,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <li><code>grid-column-end</code></li> </ul> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -332,7 +316,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -358,7 +341,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}</p> -<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p> +<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p> <ul> <li><code>block-start</code></li> @@ -377,8 +360,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -397,7 +379,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -446,18 +427,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <h2 id="Les_gouttières">Les gouttières</h2> -<p>La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.</p> +<p>La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.</p> <div class="note"> -<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p> +<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.</p> <p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p> </div> <p>Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -476,7 +456,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -515,7 +494,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <h3 id="Les_propriétés_raccourcies_pour_les_gouttières">Les propriétés raccourcies pour les gouttières</h3> -<p>Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p> +<p>Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p> <pre class="brush: css">.wrapper { display: grid; @@ -531,8 +510,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -551,7 +529,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index ca59709909..b7af0ce06d 100644 --- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -15,21 +15,19 @@ original_slug: >- <p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p> -<p>Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">les zones nommées d'une grille</a>, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.</p> +<p>Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">les zones nommées d'une grille</a>, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.</p> <h2 id="Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas">Une disposition adaptative avec une à trois colonnes en utilisant <code>grid-template-areas</code></h2> <p>De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit <em>responsive</em>, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.</p> -<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> +<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="11-responsive-areas.png"></p> -<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">dans l'article correspondant</a></em>.</p> +<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">dans l'article correspondant</a></em>.</p> <p>Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.</p> -<div id="layout_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 1024px; @@ -50,7 +48,6 @@ nav ul { padding: 0; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <header class="main-head">L'en-tête</header> @@ -114,7 +111,7 @@ nav ul { } </pre> -<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Requêtes_média">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p> +<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Media_Queries">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p> <pre class="brush: css">@media (min-width: 500px) { .wrapper { @@ -155,8 +152,7 @@ nav ul { <p>Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.</p> -<p>{{EmbedLiveSample('layout_1', '800', '430')}}</p> -</div> +<p>{{EmbedLiveSample('Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas', '800', '430')}}</p> <p>Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc <code>ad</code> dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.</p> @@ -164,9 +160,7 @@ nav ul { <p>Si vous travaillez avec un <em>framework</em> ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure <code>1fr</code>-unit et commence par une ligne intitulée <code>col-start</code>. Autrement dit, on aura 12 colonnes intitulées <code>col-start</code>.</p> -<div id="layout_2"> -<div class="hidden"> -<pre class="brush: css">.wrapper { +<pre class="brush: css hidden">.wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em Helvetica, arial, sans-serif; @@ -178,7 +172,6 @@ nav ul { padding: 10px; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -216,24 +209,21 @@ nav ul { } </pre> -<p>{{EmbedLiveSample('layout_2', '800', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Une_disposition_flexible_avec_12_colonnes', '800', '330')}}</p> -<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nomméees_sur_une_grille">le guide sur le nommage des lignes</a>, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.</p> +<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">le guide sur le nommage des lignes</a>, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.</p> <p>Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé <code>span</code> pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille de Firefox</a> qui indique de façon claire comment les objets sont placés.</p> -<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p> +<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="11-grid-inspector-12col.png"></p> <p>Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant <em>stricte</em>, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.</p> -<h3 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h3> +<h2 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h2> <p>Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :</p> -<div id="layout_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 1024px; @@ -254,7 +244,6 @@ nav ul { padding: 0; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <header class="main-head">L'en-tête</header> @@ -350,22 +339,20 @@ nav ul { } </pre> -<p>{{EmbedLiveSample('layout_3', '800', '430')}}</p> -</div> +<p>{{EmbedLiveSample('Construire_une_disposition_avec_ce_système_à_12_colonnes', '800', '430')}}</p> <p>On peut à nouveau profiter de <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille</a> pour voir comment se compose effectivement notre disposition :</p> -<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p> +<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="11-grid-inspector-12col-layout.png"></p> <p>On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..</p> <h2 id="Une_liste_produit_utilisant_le_placement_automatique">Une liste produit utilisant le placement automatique</h2> -<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p> +<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de <a href="/fr/docs/Web/CSS/Media_Queries">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p> <p>Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.</p> -<div id="layout_4"> <pre class="brush: html"><ul class="listing"> <li> <h2>Produit n°1</h2> @@ -398,8 +385,7 @@ nav ul { </ul> </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} img {max-width: 100%; display: block;} body { font: 1.2em Helvetica, arial, sans-serif; @@ -418,7 +404,6 @@ h2 { padding: 20px; } </pre> -</div> <p>Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction <code>minmax()</code> avec la notation <code>repeat</code> pour la propriété <code>grid-template-columns</code> qui permet de dimensionner les pistes.</p> @@ -454,18 +439,17 @@ h2 { <p>Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.</p> -<p>{{EmbedLiveSample('layout_4', '800', '900')}}</p> -</div> +<p>{{EmbedLiveSample('Une_liste_produit_utilisant_le_placement_automatique', '800', '900')}}</p> + +<h2 id="empecher_les_espaces_avec_dense">Empêcher les espaces avec dense</h2> <p>Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe <code>wide</code> sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur <code>span 2</code>. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :</p> -<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 1664px; width: 1640px;"></p> +<p><img alt="The layout has gaps as there is not space to layout a two track item." src="11-grid-auto-flow-sparse.png"></p> <p>Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}<code>: dense </code>sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (<em>tab order</em>) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.</p> -<div id="layout_5"> -<div class="hidden"> -<pre class="brush: html"><ul class="listing"> +<pre class="brush: html hidden"><ul class="listing"> <li> <h2>Item One</h2> <div class="body"><p>The content of this listing item goes here.</p></div> @@ -497,7 +481,7 @@ h2 { </ul> </pre> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} img {max-width: 100%; display: block;} body { font: 1.2em Helvetica, arial, sans-serif; @@ -529,7 +513,6 @@ h2 { padding: 10px; } </pre> -</div> <pre class="brush: css">.listing { list-style: none; @@ -544,10 +527,9 @@ h2 { } </pre> -<p>{{EmbedLiveSample('layout_5', '800', '900')}}</p> +<p>{{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}}</p> <p>Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.</p> -</div> <h2 id="Aller_plus_loin">Aller plus loin</h2> diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 6cfbf09b73..f32d5cd4b9 100644 --- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <h2 id="Les_grilles_et_les_boîtes_flexibles_flexbox">Les grilles et les boîtes flexibles (<em>flexbox</em>)</h2> -<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles CSS</a>, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.</p> +<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles CSS</a>, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.</p> <h3 id="Disposition_sur_une_dimension_ou_sur_deux_dimensions">Disposition sur une dimension ou sur deux dimensions</h3> @@ -20,9 +20,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver <code>flex-basis</code>.</p> -<div id="onedtwod"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -38,7 +36,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -58,9 +55,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d flex: 1 1 150px; } </pre> -</div> -<p>{{EmbedLiveSample('onedtwod', '500', '230')}}</p> +<p>{{EmbedLiveSample('Disposition_sur_une_dimension_ou_sur_deux_dimensions', '500', '230')}}</p> <p>On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.</p> @@ -70,9 +66,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes <code>1fr</code>. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.</p> -<div class="Two_Dimensional_With_Grid"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -88,7 +82,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -105,7 +98,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d } </pre> -</div> <p>{{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}</p> <p>Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :</p> @@ -133,8 +125,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut <code>flex-end</code> pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur <code>box1</code> afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à <code>box2</code> afin que <code>box1</code> soit alignée avec le début du conteneur flexible.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -150,7 +141,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -178,8 +168,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à <code>start</code> et <code>end</code> plutôt que par rapport à <code>flex-start</code> et <code>flex-end</code>. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -195,7 +184,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -233,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans l'exemple qui suit, on utilise le mot-clé <code>auto-fill</code> à la place d'un entier dans la fonction <code>repeat</code> et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -250,7 +237,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -273,8 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec <code>minmax</code>. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de <code>1fr</code>. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum <code>1fr</code> afin de répartir l'espace restant entre les objets.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -290,7 +275,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -319,8 +303,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a <code>position:</code> <code>relative</code> et devient donc le contexte de positionnement pour cet objet.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -336,7 +319,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -379,7 +361,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire <code>position:</code> <code>relative</code> dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le <em>viewport</em>) :</p> -<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> +<p><img alt="Image of grid container as parent" src="2_abspos_example.png"></p> <p>Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.</p> @@ -389,8 +371,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>On indique que <code>.box3</code> a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -406,7 +387,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -458,9 +438,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Si on utilise <code>display:</code> <code>contents</code> sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.</p> -<div id="Display_Contents_Before"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3>Utiliser display contents avant</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -482,7 +462,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d padding: 1em; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box box1"> @@ -509,14 +488,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d </pre> -<p>{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}}</p> +<h3>Utiliser display contents après</h3> + <p>Si on ajoute <code>display:</code> <code>contents</code> aux règles qui ciblent <code>box1</code>, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.</p> -<div id="Display_Contents_After"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -538,7 +516,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d padding: 1em; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box box1"> @@ -565,8 +542,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d } </pre> -<p>{{EmbedLiveSample('Display_Contents_After', '400', '330')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}}</p> <p>Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (<em>subgrids</em>) lorsqu'elles seront implémentées. Vous pouvez également utiliser <code>display:</code> <code>contents</code> de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.</p> diff --git a/files/fr/web/css/css_grid_layout/subgrid/index.html b/files/fr/web/css/css_grid_layout/subgrid/index.html index 10eee83ae2..bfd9bb1b1b 100644 --- a/files/fr/web/css/css_grid_layout/subgrid/index.html +++ b/files/fr/web/css/css_grid_layout/subgrid/index.html @@ -12,8 +12,8 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <p>La valeur <code><strong>subgrid</strong></code> a été ajoutée par le module de spécification <em>CSS Grid Layout</em> de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p> </div> <h2 id="Une_introduction_à_subgrid">Une introduction à <code>subgrid</code></h2> @@ -72,7 +72,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <p>Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.</p> -<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p> +<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="gap.png"></p> <h2 id="Les_lignes_nommées">Les lignes nommées</h2> @@ -106,7 +106,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <tr> <td>{{SpecName("CSS Grid 2")}}</td> <td>{{Spec2("CSS Grid 2")}}</td> - <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td> + <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td> </tr> </tbody> </table> @@ -114,5 +114,5 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">Les concepts de bases des grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille">Les concepts de bases des grilles CSS</a></li> </ul> diff --git a/files/fr/web/css/css_images/index.html b/files/fr/web/css/css_images/index.html index 1bc5acf7c8..71e61e5b8d 100644 --- a/files/fr/web/css/css_images/index.html +++ b/files/fr/web/css/css_images/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Images <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{CSSxRef("image-orientation")}}</li> <li>{{CSSxRef("image-rendering")}}</li> @@ -24,11 +23,9 @@ translation_of: Web/CSS/CSS_Images <li>{{CSSxRef("object-fit")}}</li> <li>{{CSSxRef("object-position")}}</li> </ul> -</div> <h3 id="Fonctions">Fonctions</h3> -<div class="index"> <ul> <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li> <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li> @@ -41,16 +38,13 @@ translation_of: Web/CSS/CSS_Images <li>{{CSSxRef("_image", "image()")}}</li> <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li> </ul> -</div> <h3 id="Types_de_données">Types de données</h3> -<div class="index"> <ul> <li>{{cssxref("<image>")}}</li> <li>{{cssxref("<gradient>")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_images/using_css_gradients/index.html b/files/fr/web/css/css_images/using_css_gradients/index.html index 5b836a6e21..6826ef0070 100644 --- a/files/fr/web/css/css_images/using_css_gradients/index.html +++ b/files/fr/web/css/css_images/using_css_gradients/index.html @@ -115,7 +115,7 @@ div { <p>L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, <code>0deg</code> crée un dégradé vertical de bas en haut, tandis que <code>90deg</code> génère un dégradé horizontal de la gauche vers la droite :</p> -<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p> +<p><img src="linear_red_angles.png"></p> <pre class="brush: css">background: linear-gradient(<angle>, red, white);</pre> @@ -233,15 +233,13 @@ div { <p>Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à <code>50%</code>:</p> -<div class="hidden"> -<pre class="brush: html"><div class="striped"></div> +<pre class="brush: html hidden"><div class="striped"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.striped { background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); @@ -253,17 +251,15 @@ div { <p>Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.</p> -<div class="hidden"> -<pre class="brush: html"><div class="multiposition-stops"></div> +<pre class="brush: html hidden"><div class="multiposition-stops"></div> <div class="multiposition-stop2"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; }</pre> -</div> <pre class="brush: css">.multiposition-stops { background: linear-gradient(to left, @@ -289,17 +285,15 @@ div { <p>Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.</p> -<div class="hidden"> -<pre class="brush: html"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> +<pre class="brush: html hidden"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; }</pre> -</div> <pre class="brush: css">.colorhint-gradient { background: linear-gradient(to top, black, 20%, cyan); @@ -350,15 +344,13 @@ div { <p>De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.</p> -<div class="hidden"> -<pre class="brush: html"><div class="simple-radial"></div> +<pre class="brush: html hidden"><div class="simple-radial"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.simple-radial { background: radial-gradient(red, blue); @@ -371,15 +363,13 @@ div { <p>À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-gradient"></div> +<pre class="brush: html hidden"><div class="radial-gradient"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.radial-gradient { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); @@ -392,15 +382,13 @@ div { <p>La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-gradient"></div> +<pre class="brush: html hidden"><div class="radial-gradient"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 240px; }</pre> -</div> <pre class="brush: css">.radial-gradient { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); @@ -417,15 +405,13 @@ div { <p>Dans l'exemple qui suit, on utilise la valeur <code>closest-side</code> pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-ellipse-side"></div> +<pre class="brush: html hidden"><div class="radial-ellipse-side"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 240px; height: 100px; }</pre> -</div> <pre class="brush: css">.radial-ellipse-side { background: radial-gradient(ellipse closest-side, @@ -439,15 +425,13 @@ div { <p>Cet exemple ressemble fortement au précédent mais on utilise ici <code>farthest-corner</code> qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-ellipse-far"></div> +<pre class="brush: html hidden"><div class="radial-ellipse-far"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 240px; height: 100px; }</pre> -</div> <pre class="brush: css">.radial-ellipse-far { background: radial-gradient(ellipse farthest-corner, @@ -461,15 +445,13 @@ div { <p>Pour cet exemple, on utilise <code>closest-side</code> qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-circle-close"></div> +<pre class="brush: html hidden"><div class="radial-circle-close"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 240px; height: 120px; }</pre> -</div> <pre class="brush: css">.radial-circle-close { background: radial-gradient(circle closest-side, @@ -483,15 +465,13 @@ div { <p>À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.</p> -<div class="hidden"> -<pre class="brush: html"><div class="stacked-radial"></div> +<pre class="brush: html hidden"><div class="stacked-radial"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 200px; height: 200px; }</pre> -</div> <pre class="brush: css">.stacked-radial { background: @@ -523,15 +503,13 @@ div { <p>Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :</p> -<div class="hidden"> -<pre class="brush: html"><div class="simple-conic"></div> +<pre class="brush: html hidden"><div class="simple-conic"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.simple-conic { background: conic-gradient(red, blue); @@ -546,15 +524,13 @@ div { <p>À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé <code>at</code>.</p> -<div class="hidden"> -<pre class="brush: html"><div class="conic-gradient"></div> +<pre class="brush: html hidden"><div class="conic-gradient"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.conic-gradient { background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); @@ -567,15 +543,13 @@ div { <div> <h3 id="Modifier_l’angle">Modifier l’angle</h3> -<div class="hidden"> -<pre class="brush: html"><div class="conic-gradient"></div> +<pre class="brush: html hidden"><div class="conic-gradient"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.conic-gradient { background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple); @@ -595,15 +569,13 @@ div { <p>Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.</p> -<div class="hidden"> -<pre class="brush: html"><div class="repeating-linear"></div> +<pre class="brush: html hidden"><div class="repeating-linear"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.repeating-linear { background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px); @@ -614,15 +586,13 @@ div { <h3 id="Répéter_plusieurs_dégradés_linéaires">Répéter plusieurs dégradés linéaires</h3> -<div class="hidden"> -<pre class="brush: html"><div class="multi-repeating-linear"></div> +<pre class="brush: html hidden"><div class="multi-repeating-linear"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 600px; height: 400px; }</pre> -</div> <pre class="brush: css">.multi-repeating-linear { background: @@ -646,14 +616,12 @@ div { <h3 id="Créer_un_tartan">Créer un tartan</h3> -<div class="hidden"> -<pre class="brush: html"><div class="plaid-gradient"></div></pre> +<pre class="brush: html hidden"><div class="plaid-gradient"></div></pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 200px; height: 200px; }</pre> -</div> <pre class="brush: css">.plaid-gradient { background: @@ -682,15 +650,13 @@ div { <p>Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.</p> -<div class="hidden"> -<pre class="brush: html"><div class="repeating-radial"></div> +<pre class="brush: html hidden"><div class="repeating-radial"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.repeating-radial { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); @@ -701,15 +667,13 @@ div { <h3 id="Répéter_plusieurs_dégradés_radiaux">Répéter plusieurs dégradés radiaux</h3> -<div class="hidden"> -<pre class="brush: html"><div class="multi-target"></div> +<pre class="brush: html hidden"><div class="multi-target"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 250px; height: 150px; }</pre> -</div> <pre class="brush: css">.multi-target { background: @@ -743,6 +707,6 @@ div { <li>{{cssxref("background")}}, {{cssxref("background-image")}}</li> </ul> </li> - <li><a class="external" href="https://lea.verou.me/css3patterns/">Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou</a></li> + <li><a href="https://lea.verou.me/css3patterns/">Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou</a></li> <li><a href="https://cssgenerator.org/gradient-css-generator.html">Un générateur de dégradé CSS</a></li> </ul> diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html index 632152b9d6..019656613c 100644 --- a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -18,21 +18,21 @@ original_slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes <p>Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.</p> -<p><img alt="" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p> +<p><img alt="" src="consistent-list-indentation-figure1.gif"></p> <p>La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (<em>padding</em>) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :</p> -<p><img alt="" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif" style="height: 100px; width: 200px;"></p> +<p><img alt="" src="consistent-list-indentation-figure2.gif"></p> <p>À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon <a href="/fr/docs/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le modèle de boîtes CSS</a>, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (<em>padding</em>). On obtient donc ce résultat :</p> -<p><img alt="" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p> +<p><img alt="" src="consistent-list-indentation-figure3.gif"></p> <p>Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément <code>ul</code>. Puisqu'il n'a pas de remplissage (<em>padding</em>), cette limite épouse étroitement celles des trois éléments de la liste.</p> <p>On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :</p> -<p><img alt="" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p> +<p><img alt="" src="consistent-list-indentation-figure4.gif"></p> <p>Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément <code>ul</code>, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments <code>li</code>. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque <code>li</code>.</p> @@ -61,12 +61,12 @@ original_slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes <p>Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément <code>ul</code>. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément <code>ul</code>, nous obtenons le résultat qui suit :</p> -<p><img alt="" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p> +<p><img alt="" src="consistent-list-indentation-figure5.gif"></p> <p>De son côté, Gecko applique un <em>padding</em> gauche de 40 pixels à cet élément <code>ul</code>. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :</p> <p><br> - <img alt="" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif" style="height: 102px; width: 242px;"></p> + <img alt="" src="consistent-list-indentation-figure6.gif"></p> <p>Comme nous pouvons le voir, les marqueurs restent attachés aux éléments <code>li</code>, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément <code>ul</code> est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément <code>ul</code></p> diff --git a/files/fr/web/css/css_lists_and_counters/index.html b/files/fr/web/css/css_lists_and_counters/index.html index 40b79a5e95..44ea497254 100644 --- a/files/fr/web/css/css_lists_and_counters/index.html +++ b/files/fr/web/css/css_lists_and_counters/index.html @@ -15,14 +15,12 @@ original_slug: Web/CSS/CSS_Lists <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("list-style-image")}}</li> <li>{{cssxref("list-style-type")}}</li> <li>{{cssxref("list-style-position")}}</li> <li>{{cssxref("list-style")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_logical_properties/basic_concepts/index.html b/files/fr/web/css/css_logical_properties/basic_concepts/index.html index 0df0049658..82079917e4 100644 --- a/files/fr/web/css/css_logical_properties/basic_concepts/index.html +++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base --- <div>{{CSSRef}}</div> -<p class="summary">La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.</p> +<p>La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.</p> <h2 id="Quel_intérêt_pour_les_propriétés_logiques">Quel intérêt pour les propriétés logiques ?</h2> @@ -18,21 +18,21 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base <p>Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : <code>justify-self: start</code> aligne l'élément au début de l'axe en ligne et <code>align-self: start</code> aligne l'élément au début de l'axe de bloc.</p> -<p><img alt="A grid in a horizontal writing mode" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> +<p><img alt="A grid in a horizontal writing mode" src="grid-horizontal-width-sm.png"></p> <p>Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur <code>vertical-rl</code>, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.</p> -<p><img alt="A grid in vertical writing mode." src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> +<p><img alt="A grid in vertical writing mode." src="grid-vertical-width-sm.png"></p> <p>Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que <code>width</code>, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.</p> -<p><img alt="A grid layout in vertical writing mode" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p> +<p><img alt="A grid layout in vertical writing mode" src="grid-vertical-inline-size-small.png"></p> <p>Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété <code>writing-mode</code> pour la passer de <code>vertical-rl</code> à <code>horizontal-tb</code> sur le sélecteur <code>.box</code> afin d'observer la façon dont les différentes propriétés modifient la disposition.</p> <p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p> -<p><span style="letter-spacing: -0.00278rem;">Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.</span></p> +<p>Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.</p> <h2 id="Axe_de_bloc_et_axe_en_ligne">Axe de bloc et axe en ligne</h2> @@ -44,20 +44,20 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base <p>Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :</p> -<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p> +<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="mdn-horizontal.png"></p> <p>Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :</p> -<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p> +<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="mdn-vertical.png"></p> <h2 id="Prise_en_charge_des_navigateurs">Prise en charge des navigateurs</h2> -<p>Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#Reference">de référence pour ces propriétés sur MDN</a>, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).</p> +<p>Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#reference">de référence pour ces propriétés sur MDN</a>, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).</p> <p>On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.</p> -<div class="blockIndicator note"> -<p><strong>Note : </strong>Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom <code>margin</code> pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'<em>issue</em> GitHub <a href="https://github.com/w3c/csswg-drafts/issues/1282">n°1282</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom <code>margin</code> pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'<em>issue</em> GitHub <a href="https://github.com/w3c/csswg-drafts/issues/1282">n°1282</a>.</p> </div> <h3 id="Tester_la_compatibilité_des_navigateurs">Tester la compatibilité des navigateurs</h3> @@ -69,8 +69,8 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes pour une disposition en grille</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes pour une disposition flexible</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">L'alignement des boîtes pour une disposition en grille</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes pour une disposition flexible</a></li> <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Comprendre les propriétés et les valeurs logiques</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">Les modes d'écriture</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Les modes d'écriture</a></li> </ul> diff --git a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html index dbb69adc26..e7105dad8a 100644 --- a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html +++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_ --- <div>{{CSSRef}}</div> -<p class="summary"><a href="https://drafts.csswg.org/css-logical/">La spécification sur les propriétés et valeurs logiques</a> définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une <a href="/fr/docs/Web/CSS/CSS_Positioning">disposition positionnée</a>. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.</p> +<p><a href="https://drafts.csswg.org/css-logical/">La spécification sur les propriétés et valeurs logiques</a> définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une <a href="/fr/docs/Web/CSS/CSS_Positioning">disposition positionnée</a>. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.</p> <h2 id="Correspondance_entre_les_propriétés_et_les_valeurs">Correspondance entre les propriétés et les valeurs</h2> @@ -129,7 +129,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_ <li>{{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc</li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.</p> </div> diff --git a/files/fr/web/css/css_logical_properties/index.html b/files/fr/web/css/css_logical_properties/index.html index bf77e064c1..7d671c63ed 100644 --- a/files/fr/web/css/css_logical_properties/index.html +++ b/files/fr/web/css/css_logical_properties/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Logical_Properties --- <div>{{CSSRef}}</div> -<p class="summary"><em><strong>CSS Logical Properties</strong></em> (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : <em>block</em> et <em>inline</em>, perpendiculaires, qui dépendent du sens de l'orientation du document.</p> +<p><em><strong>CSS Logical Properties</strong></em> (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : <em>block</em> et <em>inline</em>, perpendiculaires, qui dépendent du sens de l'orientation du document.</p> <p>Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.</p> @@ -20,9 +20,9 @@ translation_of: Web/CSS/CSS_Logical_Properties <p>Les propriétés et valeurs logiques utilisent les termes abstraits <em>bloc</em> (<em>block</em>) ou ligne (<em>inline</em>) afin de décrire leur direction. La signification physique de ces termes dépend du <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">mode d'écriture</a>.</p> <dl> - <dt><a id="block-dimension" name="block-dimension">Dimension de bloc</a></dt> + <dt>Dimension de bloc</dt> <dd>C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).</dd> - <dt><a name="inline-dimension">Dimension en ligne</a></dt> + <dt>Dimension en ligne</dt> <dd>C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).</dd> </dl> @@ -30,7 +30,6 @@ translation_of: Web/CSS/CSS_Logical_Properties <h3 id="Propriétés_relatives_au_dimensionnement">Propriétés relatives au dimensionnement</h3> -<div class="index"> <ul> <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li> @@ -39,11 +38,9 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li> </ul> -</div> <h3 id="Propriétés_relatives_aux_marges_bordures_et_remplissages">Propriétés relatives aux marges, bordures et remplissages</h3> -<div class="index"> <ul> <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li> @@ -57,7 +54,7 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("border-color")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li> @@ -74,16 +71,16 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("border-style")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> + <li>{{CSSxRef("border-width")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> + <li>{{CSSxRef("margin")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("padding")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li> @@ -91,14 +88,12 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li> </ul> -</div> <h3 id="Propriétés_relatives_aux_flottements_et_au_positionnement">Propriétés relatives aux flottements et au positionnement</h3> -<div class="index"> <ul> - <li>{{CSSxRef("clear")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("float")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("clear")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li> + <li>{{CSSxRef("float")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li> @@ -107,38 +102,33 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li> </ul> -</div> <h3 id="Autres_propriétés">Autres propriétés</h3> -<div class="index"> <ul> - <li>{{CSSxRef("caption-side")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("caption-side")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("overflow-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("overflow-inline")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés <code>block</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("text-align")}} (mots-clés <code>end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés <code>block</code> {{Experimental_Inline}} et <code>inline</code> {{Experimental_Inline}})</li> + <li>{{CSSxRef("text-align")}} (mots-clés <code>end</code> {{Experimental_Inline}} et <code>start</code> {{Experimental_Inline}})</li> </ul> -</div> <h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3> -<div class="index"> <ul> - <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("inset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</li> + <li>{{CSSxRef("inset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</li> + <li>{{CSSxRef("inset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</li> + <li>{{CSSxRef("inset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</li> </ul> -</div> <h2 id="Guides">Guides</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Concepts_de_base">Concepts de base pour les propriétés logiques et les valeurs logiques</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Dimensionnement">Les propriétés logiques utiles au dimensionnement</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages">Les propriétés logiques utiles aux marges, bordures et remplissage (<em>padding</em>)</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement">Les propriétés logiques utiles aux flottements et au positionnement</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Concepts de base pour les propriétés logiques et les valeurs logiques</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Sizing">Les propriétés logiques utiles au dimensionnement</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">Les propriétés logiques utiles aux marges, bordures et remplissage (<em>padding</em>)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">Les propriétés logiques utiles aux flottements et au positionnement</a></li> </ul> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html index 82b2995802..cf45a45e67 100644 --- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html @@ -11,7 +11,7 @@ original_slug: >- --- <p>{{CSSRef}}</p> -<p class="summary">La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (<em>padding</em>) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.</p> +<p>La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (<em>padding</em>) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.</p> <p>Si vous avez consulté la page principale sur <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">les propriétés et valeurs logiques</a>, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.</p> @@ -227,7 +227,7 @@ original_slug: >- margin-block: 5px 10px; }</pre> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Ces propriétés raccourcies, <code>margin-inline</code> et <code>margin-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p> </div> @@ -253,7 +253,7 @@ original_slug: >- padding-block: 5px 10px; }</pre> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Ces propriétés raccourcies, <code>padding-inline</code> et <code>padding-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p> </div> @@ -276,7 +276,7 @@ original_slug: >- border-inline-color: rebeccapurple; }</pre> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Ces propriétés raccourcies, <code>border-inline</code> et <code>border-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p> </div> diff --git a/files/fr/web/css/css_logical_properties/sizing/index.html b/files/fr/web/css/css_logical_properties/sizing/index.html index 4b5c4dd892..2ede7d1bca 100644 --- a/files/fr/web/css/css_logical_properties/sizing/index.html +++ b/files/fr/web/css/css_logical_properties/sizing/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p> +<p>Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p> <p>Lorsqu'on définit la taille d'un objet, <a href="https://drafts.csswg.org/css-logical/">la spécification sur les propriétés et les valeurs logiques</a> permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs <em>logiques</em>, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs <em>physiques</em> en combinaison avec ces propriétés et ces valeurs logiques.</p> @@ -85,6 +85,6 @@ original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement <p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p> +<div class="warning"> +<p><strong>Attention :</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p> </div> diff --git a/files/fr/web/css/css_masking/index.html b/files/fr/web/css/css_masking/index.html index 4d7acfab53..7eee5da307 100644 --- a/files/fr/web/css/css_masking/index.html +++ b/files/fr/web/css/css_masking/index.html @@ -17,7 +17,6 @@ original_slug: Web/CSS/CSS_Masks <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("clip")}} {{deprecated_inline}}</li> <li>{{cssxref("clip-path")}}</li> @@ -40,7 +39,6 @@ original_slug: Web/CSS/CSS_Masks <li>{{cssxref("mask-size")}}</li> <li>{{cssxref("mask-type")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_miscellaneous/index.html b/files/fr/web/css/css_miscellaneous/index.html index 45e4685f89..e7d51f4938 100644 --- a/files/fr/web/css/css_miscellaneous/index.html +++ b/files/fr/web/css/css_miscellaneous/index.html @@ -15,12 +15,10 @@ translation_of: Web/CSS/CSS_Miscellaneous <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("all")}}</li> <li>{{cssxref("text-rendering")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_motion_path/index.html b/files/fr/web/css/css_motion_path/index.html index cf8b5c7c5a..a20d3067bb 100644 --- a/files/fr/web/css/css_motion_path/index.html +++ b/files/fr/web/css/css_motion_path/index.html @@ -18,14 +18,12 @@ original_slug: Web/CSS/Motion_Path <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("offset")}}</li> <li>{{cssxref("offset-distance")}}</li> <li>{{cssxref("offset-path")}}</li> <li>{{cssxref("offset-rotate")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_namespaces/index.html b/files/fr/web/css/css_namespaces/index.html index 0e2b6ce694..ca72f88a6c 100644 --- a/files/fr/web/css/css_namespaces/index.html +++ b/files/fr/web/css/css_namespaces/index.html @@ -16,11 +16,9 @@ translation_of: Web/CSS/CSS_Namespaces <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@namespace")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_overflow/index.html b/files/fr/web/css/css_overflow/index.html index 9f5697820a..cbac890ad5 100644 --- a/files/fr/web/css/css_overflow/index.html +++ b/files/fr/web/css/css_overflow/index.html @@ -22,13 +22,10 @@ translation_of: Web/CSS/CSS_Overflow <div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Référence">Référence</h2> <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{CSSxRef("overflow")}}</li> <li>{{CSSxRef("overflow-block")}}</li> @@ -41,15 +38,12 @@ translation_of: Web/CSS/CSS_Overflow <li>{{CSSxRef("max-lines")}} {{experimental_inline}}</li> <li>{{CSSxRef("continue")}} {{experimental_inline}}</li> </ul> -</div> <h3 id="Propriétés_spécifiques">Propriétés spécifiques</h3> -<div class="index"> <ul> <li>{{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_pages/index.html b/files/fr/web/css/css_pages/index.html index 1d191006f2..a7f074727b 100644 --- a/files/fr/web/css/css_pages/index.html +++ b/files/fr/web/css/css_pages/index.html @@ -16,32 +16,26 @@ translation_of: Web/CSS/CSS_Pages <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("page-break-after")}}</li> <li>{{cssxref("page-break-before")}}</li> <li>{{cssxref("page-break-inside")}}</li> </ul> -</div> <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref('@page')}}</li> </ul> -</div> <h3 id="Pseudo-classes">Pseudo-classes</h3> -<div class="index"> <ul> <li>{{cssxref(':blank')}}</li> <li>{{cssxref(':first')}}</li> <li>{{cssxref(':left')}}</li> <li>{{cssxref(':right')}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_positioning/index.html b/files/fr/web/css/css_positioning/index.html index 518a4abaeb..7271af1172 100644 --- a/files/fr/web/css/css_positioning/index.html +++ b/files/fr/web/css/css_positioning/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Positioning <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("bottom")}}</li> <li>{{cssxref("clear")}}</li> @@ -27,7 +26,6 @@ translation_of: Web/CSS/CSS_Positioning <li>{{cssxref("top")}}</li> <li>{{cssxref("z-index")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index e0076181f3..bfbc64fb1c 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index <h2 id="Ajouter_z-index">Ajouter <code>z-index</code></h2> -<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">« empilement sans <code>z-index</code> »</a>, illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p> +<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">« empilement sans <code>z-index</code> »</a>, illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p> <p>Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de <code>z-index</code> est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.</p> @@ -36,12 +36,12 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index </ul> <div class="note"> -<p><strong>Notes :</strong></p> +<p><strong>Note :</strong> <ul> <li>Lorsque la propriété <code>z-index</code> n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.</li> - <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li> -</ul> + <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li> +</ul></p> </div> <p>Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant <code>z-index</code>. Le <code>z-index</code> du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.</p> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html index 1f41be9467..92a9a86a4e 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html @@ -16,7 +16,7 @@ original_slug: Web/CSS/Comprendre_z-index <p><em>Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement. </em></p> </blockquote> -<p>Source : <a class="external" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p> +<p>Source : <a href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p> <p>Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.</p> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html index ef04a825c1..2b0dc727af 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -37,7 +37,9 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float <li>Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).</li> </ol> -<div class="note"><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</div> +<div class="note"> + <p><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</p> +</div> <p>{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}</p> @@ -123,12 +125,12 @@ b { <h2 id="Voir_aussi"><strong>Voir aussi</strong></h2> <ul> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">L'empilement de couches</a> : Remarques sur l'empilement de couches</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li> </ul> <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html index ed1138131b..dadbe3ec99 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -16,15 +16,15 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1 <p>Le seul et unique contexte d'empilement est le contexte racine. Sans <code>z-index</code>, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.</p> -<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1452/=Understanding_zindex_05a.png"></p> +<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" src="understanding_zindex_05a.png"></p> <p>Si on assigne au bloc <em>DIV #2</em> une valeur de <code>z-index</code> positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.</p> -<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1453/=Understanding_zindex_05b.png"></p> +<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" src="understanding_zindex_05b.png"></p> <p>Si maintenant on assigne également au bloc <em>DIV #4</em> une valeur de <code>z-index</code> positive, plus grande que celle du <em>DIV #2</em>, le bloc <em>DIV #4</em> est rendu par dessus tous les autres, y compris par dessus le bloc <em>DIV #2</em>.</p> -<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1454/=Understanding_zindex_05c.png"></p> +<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" src="understanding_zindex_05c.png"></p> <p>Dans le dernier exemple, vous pouvez voir que les blocs <em>DIV #2</em> et <em>DIV #4</em> ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc <em>DIV #4</em>, tout en respectant le bloc <em>DIV #2</em>, peut être contrôlé avec la propriété <code>z-index</code>. Il se fait que les éléments <em>DIV #1</em> et <em>DIV #3</em> n'ayant pas de <code>z-index</code> défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs <em>DIV #2</em> et <em>DIV #3</em>, appartient au contexte d'empilement de la racine.</p> @@ -39,7 +39,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1 </li> </ul> -<div class="note"><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.</div> +<div class="note"> + <p><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement. + </p> +</div> <h2 id="Exemple"><strong>Exemple</strong></h2> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html index 161afae998..e4dcfaa383 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2 <p>Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de <em>contexte d'empilement</em>. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.</p> -<p><img alt="Figure 6 : Exemple de contexte d'empilement 2" class="internal" src="/@api/deki/files/1455/=Understanding_zindex_06.png"></p> +<p>{{ EmbedLiveSample('Exemple', '352', '270') }}</p> <p>Vous pouvez voir que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #3</em> (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de <code>z-index</code> régissent l'empilement des éléments.</p> @@ -35,7 +35,9 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2 </li> </ul> -<div class="note"><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</div> +<div class="note"> + <p><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</p> +</div> <h2 id="Exemple">Exemple</h2> @@ -122,8 +124,5 @@ span.bold { </div> </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple")}}</p> <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html index ae2dfa1046..0668f2416a 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -18,7 +18,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3 <p>Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.</p> -<p><img alt="Figure 7 : Exemple de contexte d'empilement 3" class="internal" src="/@api/deki/files/1456/=Understanding_zindex_07.png"></p> +<p>{{ EmbedLiveSample('Exemple', '320', '330') }}</p> <p>Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.</p> @@ -54,7 +54,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3 <p>On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de <code>z-index</code> individuelles (et différentes) assignées à l'aide de sélecteurs d'<em>id</em> plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.</p> -<div class="note"><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.</div> +<div class="note"> + <p><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois. + </p> +</div> <h2 id="Exemple">Exemple</h2> @@ -154,8 +157,5 @@ div.lev3 { </div> </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple")}}</p> <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index 89eddc49b5..f5c69a0055 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -26,16 +26,16 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index <p>Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.</p> <div class="note"> -<p><strong>Notes :</strong></p> - +<p><strong>Note :</strong> <ul> <li>Dans un groupe d'éléments sans aucune propriété <code>z-index</code>, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.</li> <li>Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.</li> <li><strong>Attention</strong> : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.</li> </ul> +</p> </div> -<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p> +<p>{{EmbedLiveSample("Exemple", 600, 400)}}</p> <h2 id="Exemple">Exemple</h2> @@ -116,8 +116,4 @@ div { } </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple","600","400")}}</p> - <div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index da1de35a86..a377b3b7ff 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches <h2 id="Le_contexte_dempilement">Le contexte d'empilement</h2> -<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p> +<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p> <p>Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc <em>DIV</em> (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de <code>z-index</code> différente de <em>auto</em> crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de <code>z-index</code> de ses enfants n'ont de signification que dans ce contexte. Le bloc <em>DIV</em> entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.</p> @@ -52,11 +52,13 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches <li>Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.</li> </ul> -<div class="note"><strong>Notes :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</div> +<div class="note"> + <p><strong>Note :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</p> +</div> <h4 id="Illustration">Illustration</h4> -<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" class="internal" src="/@api/deki/files/1451/=Understanding_zindex_04.png"></p> +<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" src="understanding_zindex_04.png"></p> <p>Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur <code>z-index</code>. La hiérarchie des contextes d'empilement est organisée comme suit :</p> @@ -79,13 +81,14 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches <p>Il est important de noter que les blocs <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em> sont les enfants du bloc <em>DIV #3</em>, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément <em>DIV #3</em> est prise en compte pour l'empilement dans l'élément racine par rapport à ses <em>DIV</em> voisins.</p> <div class="note"> -<p><strong>Notes :</strong></p> +<p><strong>Note :</strong> <ul> <li><em>DIV #4</em> est rendu dans le bloc <em>DIV #1</em> car le <code>z-index</code> (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le <code>z-index</code> (6) du bloc <em>DIV #4</em> est valide à l'intérieur du contexte d'empilement du bloc <em>DIV #3</em>. Ainsi, DIV #4 se trouve sous <em>DIV #1</em>, parce que <em>DIV #4</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus petite.</li> <li>Pour la même raison <em>DIV #2</em> (dont le <code>z-index</code> est 2) est rendu sous <em>DIV#5</em> (de <code>z-index</code> égal à 1) parce que <em>DIV #5</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus grande.</li> <li>Le <code>z-index</code> du bloc <em>DIV #3</em> est 4, mais cette valeur est indépendante du <code>z-index</code> du bloc <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em>, parce qu'il appartient à un contexte d'empilement différent.</li> </ul> +</p> </div> <h2 id="Exemple">Exemple</h2> diff --git a/files/fr/web/css/css_properties_reference/index.html b/files/fr/web/css/css_properties_reference/index.html index 7c0812f001..a6c6fcca3a 100644 --- a/files/fr/web/css/css_properties_reference/index.html +++ b/files/fr/web/css/css_properties_reference/index.html @@ -11,7 +11,9 @@ translation_of: Web/CSS/CSS_Properties_Reference <p>Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM, habituellement utilisée avec JavaScript :</p> -<div class="note"><strong>Note :</strong> Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a> et <a href="/fr/docs/Web/CSS/Extensions_Mozilla">les extensions CSS spécifiques à Mozilla</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a> et <a href="/fr/docs/Web/CSS/Mozilla_Extensions">les extensions CSS spécifiques à Mozilla</a>.</p> +</div> <table> <thead> diff --git a/files/fr/web/css/css_ruby/index.html b/files/fr/web/css/css_ruby/index.html index cc9c44a3bb..1f9fade2e6 100644 --- a/files/fr/web/css/css_ruby/index.html +++ b/files/fr/web/css/css_ruby/index.html @@ -17,12 +17,10 @@ translation_of: Web/CSS/CSS_Ruby <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("ruby-align")}}</li> <li>{{cssxref("ruby-position")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html index 8fbc368201..2eebe3962b 100644 --- a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base --- <div>{{CSSRef}}</div> -<p class="summary"><a href="https://drafts.csswg.org/css-scroll-snap-1/">Le module de spécification CSS <em>Scroll Snap</em></a> fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).</p> +<p><a href="https://drafts.csswg.org/css-scroll-snap-1/">Le module de spécification CSS <em>Scroll Snap</em></a> fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).</p> <h2 id="Principes_fondamentaux">Principes fondamentaux</h2> @@ -62,7 +62,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base <p>Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La propriété <code>scroll-snap-stop</code> est actuellement mise en question dans la version <em>Candidate Recommendation</em> de la spécification et pourrait être retirée.</p> </div> diff --git a/files/fr/web/css/css_scroll_snap/browser_compat/index.html b/files/fr/web/css/css_scroll_snap/browser_compat/index.html index 095ea0b616..c1eb4da23a 100644 --- a/files/fr/web/css/css_scroll_snap/browser_compat/index.html +++ b/files/fr/web/css/css_scroll_snap/browser_compat/index.html @@ -11,9 +11,9 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs --- <div>{{CSSRef}}</div> -<p class="summary">Firefox implémentait initialement une première version de la spécification <em>Scroll Snap</em> appelée alors <em>Scroll Snap Points</em>. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.</p> +<p>Firefox implémentait initialement une première version de la spécification <em>Scroll Snap</em> appelée alors <em>Scroll Snap Points</em>. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.</p> -<h2 class="summary" id="Que_faire_si_mon_style_utilisait_l'ancienne_implémentation_(Firefox_<_68)">Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?</h2> +<h2 id="Que_faire_si_mon_style_utilisait_l'ancienne_implémentation_(Firefox_<_68)">Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?</h2> <p>Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par <em>Scroll Snap Points</em>, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.</p> @@ -26,7 +26,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs <h2 id="Comment_utiliser_l'ancienne_implémentation_comme_méthode_de_recours">Comment utiliser l'ancienne implémentation comme méthode de recours ?</h2> -<p class="summary">Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.</p> +<p>Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.</p> <p>Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.</p> diff --git a/files/fr/web/css/css_scroll_snap/index.html b/files/fr/web/css/css_scroll_snap/index.html index 6e79f674df..0c9ccd8baa 100644 --- a/files/fr/web/css/css_scroll_snap/index.html +++ b/files/fr/web/css/css_scroll_snap/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Scroll_Snap --- <div>{{CSSRef}}</div> -<p class="summary"><em><strong>CSS Scroll Snap</strong></em> est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.</p> +<p><em><strong>CSS Scroll Snap</strong></em> est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.</p> <div class="note"> <p><strong>Note :</strong> La version précédente ce module, <em>Scroll Snap Points</em>, est dépréciée et est désormais remplacée par <em>CSS Scroll Snap</em>.</p> diff --git a/files/fr/web/css/css_scroll_snap_points/index.html b/files/fr/web/css/css_scroll_snap_points/index.html index 8d728f0b0c..bc27bffd62 100644 --- a/files/fr/web/css/css_scroll_snap_points/index.html +++ b/files/fr/web/css/css_scroll_snap_points/index.html @@ -21,7 +21,6 @@ translation_of: Web/CSS/CSS_Scroll_Snap_Points <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("scroll-snap-coordinate")}}</li> <li>{{cssxref("scroll-snap-destination")}}</li> @@ -29,7 +28,6 @@ translation_of: Web/CSS/CSS_Scroll_Snap_Points <li>{{cssxref("scroll-snap-points-y")}}</li> <li>{{cssxref("scroll-snap-type")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_scrollbars/index.html b/files/fr/web/css/css_scrollbars/index.html index 5a0fe0b208..acba92423a 100644 --- a/files/fr/web/css/css_scrollbars/index.html +++ b/files/fr/web/css/css_scrollbars/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Scrollbars --- <div>{{CSSRef}} {{SeeCompatTable}}</div> -<p class="summary">Le module de spécification <em>CSS Scrollbars</em> standardise la mise en forme des barres de défilement (<em>scrollbar</em>) notamment introduite en 2000 avec Windows IE 5.5.</p> +<p>Le module de spécification <em>CSS Scrollbars</em> standardise la mise en forme des barres de défilement (<em>scrollbar</em>) notamment introduite en 2000 avec Windows IE 5.5.</p> <h2 id="Exemples">Exemples</h2> @@ -17,7 +17,6 @@ translation_of: Web/CSS/CSS_Scrollbars <h3 id="CSS">CSS</h3> -<div id="Example"> <pre class="brush:css">.scroller { width: 300px; height: 100px; @@ -33,18 +32,15 @@ translation_of: Web/CSS/CSS_Scrollbars <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample("Exemples")}}</p> -</div> <h2 id="Référence">Référence</h2> <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("scrollbar-width")}}</li> <li>{{cssxref("scrollbar-color")}}</li> </ul> -</div> <h2 id="Accessibilité">Accessibilité</h2> diff --git a/files/fr/web/css/css_selectors/index.html b/files/fr/web/css/css_selectors/index.html index 34200fe468..ead1aa386e 100644 --- a/files/fr/web/css/css_selectors/index.html +++ b/files/fr/web/css/css_selectors/index.html @@ -12,28 +12,28 @@ original_slug: Web/CSS/Sélecteurs_CSS --- <div>{{CSSRef}}</div> -<p class="summary"><span class="seoSummary"><strong>Les sélecteurs</strong> définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.</span></p> +<p><strong>Les sélecteurs</strong> définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.</p> <h2 id="Les_sélecteurs_simples">Les sélecteurs simples</h2> <dl> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Les sélecteurs de type</a></dt> + <dt><a href="/fr/docs/Web/CSS/Type_selectors">Les sélecteurs de type</a></dt> <dd>Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.<br> <strong>Syntaxe :</strong> <code><var>nomelement</var></code><br> <strong>Exemple :</strong> <code>input</code> permettra de cibler n'importe quel élément {{HTMLElement('input')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Les sélecteurs de classe</a></dt> + <dt><a href="/fr/docs/Web/CSS/Class_selectors">Les sélecteurs de classe</a></dt> <dd>Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut <code>class</code>.<br> <strong>Syntaxe :</strong> <code>.<var>nomclasse</var></code><br> <strong>Exemple :</strong> <code>.index</code> permettra de cibler n'importe quel élément qui possède la classe <code>index</code> (vraisemblablement définie avec un attribut <code>class="index"</code>).</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Les sélecteurs d'identifiant</a></dt> + <dt><a href="/fr/docs/Web/CSS/ID_selectors">Les sélecteurs d'identifiant</a></dt> <dd>Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut <code>id</code>. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.<br> <strong>Syntaxe :</strong> <code>#<var>valeurid</var></code><br> <strong>Exemple :</strong> <code>#toc</code> permettra de cibler l'élément qui possède l'identifiant <code>toc</code> (vraisemblablement défini avec un attribut <code>id="toc"</code>).</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Le sélecteur universel</a></dt> + <dt><a href="/fr/docs/Web/CSS/Universal_selectors">Le sélecteur universel</a></dt> <dd>Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.<br> <strong>Syntaxe :</strong> <code>*</code> <code>ns|*</code> <code>*|*</code><br> <strong>Exemple :</strong> <code>*</code> permettra de cibler tous les éléments du document.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Les sélecteurs d'attribut</a></dt> + <dt><a href="/fr/docs/Web/CSS/Attribute_selectors">Les sélecteurs d'attribut</a></dt> <dd>Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.<br> <strong>Syntaxe :</strong> <code>[attr]</code> <code>[attr=valeur]</code> <code>[attr~=valeur]</code> <code>[attr|=valeur] [attr^=valeur]</code> <code>[attr$=valeur]</code> <code>[attr*=valeur]</code><br> <strong>Exemple :</strong> <code>[autoplay]</code> permettra de cibler tous les éléments qui possède l'attribut <code>autoplay</code> défini (quelle que soit sa valeur).</dd> @@ -42,23 +42,23 @@ original_slug: Web/CSS/Sélecteurs_CSS <h2 id="Les_combinateurs">Les combinateurs</h2> <dl> - <dt><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Les sélecteurs de voisin direct</a></dt> + <dt><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Les sélecteurs de voisin direct</a></dt> <dd>Le combinateur <code>'+'</code> permet de sélectionner les nœuds qui suivent immédiatement un élément donné.<br> <strong>Syntaxe :</strong> <code><var>A</var> + <var>B</var></code><br> <strong>Exemple :</strong> <code>div + p</code> permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Les sélecteurs de voisins</a></dt> + <dt><a href="/fr/docs/Web/CSS/General_sibling_combinator">Les sélecteurs de voisins</a></dt> <dd>Le combinateur <code>'~'</code> permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.<br> <strong>Syntaxe :</strong> <code><var>A</var> ~ <var>B</var></code><br> <strong>Exemple :</strong> <code>p ~ span</code> permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Les sélecteurs d'éléments enfants</a></dt> + <dt><a href="/fr/docs/Web/CSS/Child_combinator">Les sélecteurs d'éléments enfants</a></dt> <dd>Le combinateur <code>'>'</code> permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné.<br> <strong>Syntaxe :</strong> <code><var>A</var> > <var>B</var></code><br> <strong>Exemple :</strong> <code>ul > li</code> permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Les sélecteurs d'éléments descendants</a></dt> + <dt><a href="/fr/docs/Web/CSS/Descendant_combinator">Les sélecteurs d'éléments descendants</a></dt> <dd>Le combinateur <code> </code> (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné.<br> <strong>Syntaxe :</strong> <code>A B</code><br> <strong>Exemple :</strong> <code>div span</code> permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Combinateur_colonne">Le combinateur de colonne</a>{{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/CSS/Column_combinator">Le combinateur de colonne</a>{{experimental_inline}}</dt> <dd>Le combinateur <code>||</code> sélectionne les nœuds qui appartiennent à une colonne. <strong>Syntaxe :</strong> <code>A || B</code><br> <strong>Exemple :</strong> <code>col || td</code> permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.</dd> </dl> @@ -73,7 +73,7 @@ original_slug: Web/CSS/Sélecteurs_CSS <h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> <dl> - <dt><a href="/fr/docs/Web/CSS/Pseudo-éléments">Les pseudo-éléments</a> représentent des entités du document qui ne sont pas décrites en HTML.</dt> + <dt><a href="/fr/docs/Web/CSS/Pseudo-elements">Les pseudo-éléments</a> représentent des entités du document qui ne sont pas décrites en HTML.</dt> <dd><strong>Exemple :</strong> <code>p::first-line</code> permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.</dd> </dl> diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index 4c55b270d4..72c96372e8 100644 --- a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un --- <div>{{CSSRef}}</div> -<p>Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les <a class="external" href="https://www.w3.org/TR/css3-selectors/#target-pseudo">sélecteurs CSS3</a> ont introduit <a href="/fr/docs/Web/CSS/Pseudo-classes">la pseudo-classe</a> {{cssxref(":target")}}.</p> +<p>Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les <a href="https://www.w3.org/TR/css3-selectors/#target-pseudo">sélecteurs CSS3</a> ont introduit <a href="/fr/docs/Web/CSS/Pseudo-classes">la pseudo-classe</a> {{cssxref(":target")}}.</p> <h2 id="Choisir_une_cible">Choisir une cible</h2> @@ -41,7 +41,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un <p>Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le<code> <h1 id="un"> </code>devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.</p> -<div id="exemple"> <pre class="brush: html"><h4 id="un">...</h4> <p id="deux">...</p> <div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em> @@ -50,7 +49,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un <a href="#trois">Troisième</a> <a href="#quatre">Quatrième</a> <a href="#cinq">Cinquième</a></pre> -</div> <h2 id="Conclusion">Conclusion</h2> @@ -59,6 +57,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://www.w3.org/TR/css3-selectors/#target-pseudo"><em>CSS3 Selectors #target-pseudo</em> (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/css3-selectors/#target-pseudo"><em>CSS3 Selectors #target-pseudo</em> (en anglais)</a></li> <li>{{cssxref(":target")}}</li> </ul> diff --git a/files/fr/web/css/css_shapes/basic_shapes/index.html b/files/fr/web/css/css_shapes/basic_shapes/index.html index eed2d48370..46e4ebee5a 100644 --- a/files/fr/web/css/css_shapes/basic_shapes/index.html +++ b/files/fr/web/css/css_shapes/basic_shapes/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples --- <div>{{CSSRef}}</div> -<p class="summary">Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p> +<p>Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p> <p>Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :</p> @@ -27,11 +27,11 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples <h2 id="La_boîte_de_référence">La boîte de référence</h2> -<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p> +<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p> <p>L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec <code>shape-outside: circle(50%)</code>, l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du <a href="/fr/docs/Web/CSS/Mod%C3%A8le_de_bo%C3%AEte_CSS">modèle de boîtes</a>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15904/shapes-reference-box.png" style="height: 840px; width: 1536px;"></p> +<p><img alt="" src="shapes-reference-box.png"></p> <p>La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .</p> @@ -115,13 +115,13 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples <p>Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.</p> -<pre class="brush: css"><code>img { +<pre class="brush: css">img { float: left; shape-outside: circle(50% at 60%); } -</code></pre> +</pre> -<p><img alt="The circle shape is clipped by the margin box" src="https://mdn.mozillademos.org/files/15903/shapes-circle-clipped.png" style="height: 602px; width: 1536px;"></p> +<p><img alt="The circle shape is clipped by the margin box" src="shapes-circle-clipped.png"></p> <h2 id="ellipse()"><code>ellipse()</code></h2> @@ -145,6 +145,6 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples <p>L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.</p> -<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="https://mdn.mozillademos.org/files/15902/shapes-polygon.png" style="height: 540px; width: 1524px;"></p> +<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="shapes-polygon.png"></p> -<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="http://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p> +<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="https://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p> diff --git a/files/fr/web/css/css_shapes/from_box_values/index.html b/files/fr/web/css/css_shapes/from_box_values/index.html index ec57c04537..5ba429d0e6 100644 --- a/files/fr/web/css/css_shapes/from_box_values/index.html +++ b/files/fr/web/css/css_shapes/from_box_values/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes --- <div>{{CSSRef}}</div> -<p class="summary">Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p> +<p>Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p> <p>Les <a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">valeurs de boîte</a> qui sont autorisées pour les formes sont :</p> @@ -29,7 +29,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes <p>Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (<em>content</em>), du remplissage (<em>padding</em>), une bordure (<em>border</em>) ainsi qu'une marge (<em>margin</em>).</p> -<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p> +<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="box-model.png"></p> <p>En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.</p> @@ -62,7 +62,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes <p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p> <div class="note"> -<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">cet article</a>.</p> +<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">cet article</a>.</p> </div> <h2 id="Quand_utiliser_les_valeurs_de_boîte">Quand utiliser les valeurs de boîte</h2> @@ -73,4 +73,4 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes <p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p> -<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">type <code><basic-shape></code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p> +<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">type <code><basic-shape></code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p> diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html index 485385aa10..585e96ac67 100644 --- a/files/fr/web/css/css_shapes/index.html +++ b/files/fr/web/css/css_shapes/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/CSS_Shapes <p><em><strong>CSS Shapes</strong></em> est un module de spécification CSS qui décrit les formes géométriques. <a href="https://drafts.csswg.org/css-shapes/">Selon le niveau 1 de cette spécification</a>, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.</p> -<h2 id="Basic_Example" name="Basic_Example">Exemple simple</h2> +<h2 id="exemple_simple">Exemple simple</h2> <p>Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété <code>shape-outside</code> qui lui est appliquée vaut <code>circle(50%)</code>. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.</p> @@ -22,21 +22,17 @@ translation_of: Web/CSS/CSS_Shapes <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("shape-image-threshold")}}</li> <li>{{cssxref("shape-margin")}}</li> <li>{{cssxref("shape-outside")}}</li> </ul> -</div> <h3 id="Types_de_donnée">Types de donnée</h3> -<div class="index"> <ul> <li>{{cssxref("<basic-shape>")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html index 4f7abd917f..ad57ea506d 100644 --- a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS --- <div>{{CSSRef}}</div> -<p class="summary">La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p> +<p>La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p> <p>Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.</p> diff --git a/files/fr/web/css/css_shapes/shapes_from_images/index.html b/files/fr/web/css/css_shapes/shapes_from_images/index.html index 58a1729e2c..bbb1f822f7 100644 --- a/files/fr/web/css/css_shapes/shapes_from_images/index.html +++ b/files/fr/web/css/css_shapes/shapes_from_images/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Shapes/Générer_formes_images --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p> +<p>Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p> <h2 id="Générer_une_forme_simple_avec_une_image">Générer une forme simple avec une image</h2> diff --git a/files/fr/web/css/css_table/index.html b/files/fr/web/css/css_table/index.html index 928231d528..7b01e5fe58 100644 --- a/files/fr/web/css/css_table/index.html +++ b/files/fr/web/css/css_table/index.html @@ -15,7 +15,6 @@ translation_of: Web/CSS/CSS_Table <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("border-collapse")}}</li> <li>{{cssxref("border-spacing")}}</li> @@ -24,7 +23,6 @@ translation_of: Web/CSS/CSS_Table <li>{{cssxref("table-layout")}}</li> <li>{{cssxref("vertical-align")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_text/index.html b/files/fr/web/css/css_text/index.html index 91ca768d97..31160cd80f 100644 --- a/files/fr/web/css/css_text/index.html +++ b/files/fr/web/css/css_text/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Text <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("hanging-punctuation")}}</li> <li>{{cssxref("hyphens")}}</li> @@ -34,7 +33,6 @@ translation_of: Web/CSS/CSS_Text <li>{{cssxref("word-break")}}</li> <li>{{cssxref("word-spacing")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_text_decoration/index.html b/files/fr/web/css/css_text_decoration/index.html index 885c8cdd54..e008cdc147 100644 --- a/files/fr/web/css/css_text_decoration/index.html +++ b/files/fr/web/css/css_text_decoration/index.html @@ -15,7 +15,6 @@ translation_of: Web/CSS/CSS_Text_Decoration <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("letter-spacing")}}</li> <li>{{cssxref("text-align")}}</li> @@ -34,7 +33,6 @@ translation_of: Web/CSS/CSS_Text_Decoration <li>{{cssxref("white-space")}}</li> <li>{{cssxref("word-spacing")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_transforms/index.html b/files/fr/web/css/css_transforms/index.html index 66190eedac..be8a54dc82 100644 --- a/files/fr/web/css/css_transforms/index.html +++ b/files/fr/web/css/css_transforms/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Transforms <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("backface-visibility")}}</li> <li>{{cssxref("perspective")}}</li> @@ -29,7 +28,6 @@ translation_of: Web/CSS/CSS_Transforms <li>{{cssxref("transform-style")}}</li> <li>{{cssxref("translate")}}</li> </ul> -</div> <h3 id="Types_de_donnée">Types de donnée</h3> diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.html b/files/fr/web/css/css_transforms/using_css_transforms/index.html index 93716e66d0..e52bf437be 100644 --- a/files/fr/web/css/css_transforms/using_css_transforms/index.html +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.html @@ -19,7 +19,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS <p>En modifiant l'espace des coordonnées, les <strong>transformations CSS</strong> permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.</p> <div class="warning"> -<p><strong>Attention !</strong> Seuls les éléments positionnés selon <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">le modèle de boîtes</a> peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec <code>display: block</code> est positionné selon le modèle de boîtes.</p> +<p><strong>Attention :</strong> Seuls les éléments positionnés selon <a href="/fr/docs/Web/CSS/CSS_Box_Model">le modèle de boîtes</a> peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec <code>display: block</code> est positionné selon le modèle de boîtes.</p> </div> <h2 id="Propriétés_des_transformations_CSS">Propriétés des transformations CSS</h2> @@ -37,7 +37,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS <p>Voici une version originale du logo MDN :</p> -<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p> +<p><img alt="MDN Logo" src="screen_shot_2016-02-16_at_15.53.54.png"></p> <h3 id="Rotation">Rotation</h3> @@ -45,7 +45,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS <pre class="brush: html"><img style="transform: rotate(90deg); transform-origin: bottom left;" - src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"> + src="screen_shot_2016-02-16_at_15.53.54.png"> </pre> <p>{{EmbedLiveSample('Rotation','auto',240)}}</p> @@ -56,7 +56,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS <pre class="brush: html"><img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" - src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"> + src="screen_shot_2016-02-16_at_15.53.54.png"> </pre> <p>{{EmbedLiveSample('Distorsion_et_translation')}}</p> diff --git a/files/fr/web/css/css_transitions/index.html b/files/fr/web/css/css_transitions/index.html index 5135e7a632..c9bcefcbf6 100644 --- a/files/fr/web/css/css_transitions/index.html +++ b/files/fr/web/css/css_transitions/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Transitions <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("transition")}}</li> <li>{{cssxref("transition-delay")}}</li> @@ -24,7 +23,6 @@ translation_of: Web/CSS/CSS_Transitions <li>{{cssxref("transition-property")}}</li> <li>{{cssxref("transition-timing-function")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.html b/files/fr/web/css/css_transitions/using_css_transitions/index.html index 19d7aefd57..9403828edb 100644 --- a/files/fr/web/css/css_transitions/using_css_transitions/index.html +++ b/files/fr/web/css/css_transitions/using_css_transitions/index.html @@ -15,7 +15,7 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS <p>Les animations qui utilisent des transitions entre deux états sont souvent appelées <em>transitions implicites</em> car l'état initial et l'état final sont définis implicitement par le navigateur.</p> -<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> +<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="transitionsprinciple.png"></p> <p>Les transitions CSS vous permettent de choisir :</p> @@ -28,18 +28,22 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS <h2 id="Quelles_sont_les_propriétés_CSS_qui_peuvent_être_animées">Quelles sont les propriétés CSS qui peuvent être animées ?</h2> -<p>On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">la liste des propriétés concernées est limitée</a>.</p> +<p>On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et <a href="/fr/docs/Web/CSS/CSS_animated_properties">la liste des propriétés concernées est limitée</a>.</p> -<p class="note"><strong>Note :</strong> La gestion de la valeur <code>auto</code> représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec <code>auto</code>.</p> +<div class="note"> + <p><strong>Note :</strong> La gestion de la valeur <code>auto</code> représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec <code>auto</code>.</p> +</div> -<p class="note"><strong>Note :</strong> Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via <code>.appendChild()</code> ou en modiant <code>display: none;</code>. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer <code>window.setTimeout()</code> pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.</p> +<div class="note"> + <p><strong>Note :</strong> Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via <code>.appendChild()</code> ou en modiant <code>display: none;</code>. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer <code>window.setTimeout()</code> pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.</p> +</div> <h2 id="Les_propriétés_CSS_relatives_aux_transitions">Les propriétés CSS relatives aux transitions</h2> <p>Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :</p> <div class="note"> -<p><strong>Note : </strong>Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.</p> +<p><strong>Note :</strong>Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.</p> </div> <dl> @@ -47,815 +51,12 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS <dd>Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.</dd> <dt>{{cssxref("transition-duration")}}</dt> <dd>Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. - <div> - <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-duration: 0.5s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush:css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 0.5s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transformv color; - transition-duration: 0.5s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div> - </div> - - <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-duration: 1s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top -webkit-transform color; - -webkit-transition-duration: 1s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform color; - transition-duration: 1s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; - -webkit-transition-duration: 1s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 1s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("duration_1s",275,150)}}</div> - </div> - - <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-duration: 2s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 2s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 2s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("duration_2s",275,150)}}</div> - </div> - - <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-duration: 4s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 4s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 4s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("duration_4s",275,150)}}</div> - </div> - </div> </dd> <dt>{{cssxref("transition-timing-function")}}</dt> - <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des <a href="/fr/docs/Web/CSS/timing-function">fonctions de temporisation</a>. - <div class="cleared"> - <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-timing-function: ease</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: ease; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: ease; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: ease; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: ease; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div> - </div> - - <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-timing-function: linear</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: linear; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: linear; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div> - </div> - - <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-timing-function: step-end</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: step-end; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: step-end; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: step-end; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: step-end; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div> - </div> - - <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-timing-function: steps(4, end)</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: steps(4, end); - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: steps(4, end); -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: steps(4, end); - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: steps(4, end); -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div> - </div> - </div> + <dd>Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des <a href="/fr/docs/Web/CSS/easing-function">fonctions de temporisation</a>. </dd> <dt>{{cssxref("transition-delay")}}</dt> <dd>Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. - <div> - <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-delay: 0.5s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { - width: 250px; - height: 125px; -} - -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 0.5s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 0.5s; - transition-timing-function: linear; -} - -.box1 { - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 0.5s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 0.5s; - transition-timing-function: linear; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> - </div> - - <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-delay: 1s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { - width: 250px; - height: 125px; -} - -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 1s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 1s; - transition-timing-function: linear; -} - -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 1s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 1s; - transition-timing-function: linear; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("delay_1s",275,150)}}</div> - </div> - - <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-delay: 2s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { - width: 250px; - height: 125px; -} - -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 2s; - transition-timing-function: linear; -} - -.box1 { - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 2s; - transition-timing-function: linear; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("delay_2s",275,150)}}</div> - </div> - - <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-delay: 4s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { - width: 250px; - height: 125px; -} - -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 4s; - transition-timing-function: ease-in-out; -} - -.box1 { - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 4s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("delay_4s",275,150)}}</div> - </div> - </div> </dd> </dl> @@ -882,6 +83,36 @@ var intervalID = window.setInterval(updateTransition, 7000); font-size: 36px; }</pre> +<h3 id="Exemple_avec_plusieurs_propriétés_animées">Exemple avec plusieurs propriétés animées</h3> + +<pre class="brush: html hidden highlight:[3]"><body> + <p>La boîte ci-dessous utilise des transitions pour les propriétés : width, height, background-color, transform. Survolez la boîte pour voir les animations.</p> + <div class="box">Sample</div> +</body></pre> + +<h4 id="CSS_Content">CSS Content</h4> + +<pre class="brush: css; highlight:[8,9]">.box { + border-style: solid; + border-width: 1px; + display: block; + width: 100px; + height: 100px; + background-color: #0000FF; + transition: width 2s, height 2s, background-color 2s, transform 2s; +} + +.box:hover { + background-color: #FFCCCC; + width: 200px; + height: 200px; + transform: rotate(180deg); +} +</pre> + +<p>{{EmbedLiveSample('Exemple_avec_plusieurs_propriétés_animées', 600, 300)}}</p> + + <h3 id="Appliquer_une_transition_sur_plusieurs_propriétés">Appliquer une transition sur plusieurs propriétés</h3> <h4 id="CSS">CSS</h4> @@ -1066,7 +297,9 @@ document.addEventListener('click', function(ev){ <pre class="brush: js">el.addEventListener("transitionrun", signalStart, true); el.addEventListener("transitionstart", signalStart, true);</pre> -<div class="note"><strong>Note :</strong> L'événement <code>transitionend</code> n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}<code>: none</code> ou si la valeur de la propriété est modifiée.</div> +<div class="note"> + <p><strong>Note :</strong> L'événement <code>transitionend</code> n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}<code>: none</code> ou si la valeur de la propriété est modifiée.</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -1091,5 +324,5 @@ el.addEventListener("transitionstart", signalStart, true);</pre> <ul> <li>L'interface {{domxref("TransitionEvent")}} et l'événement {{event("transitionend")}}</li> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Utiliser les animations CSS</a></li> </ul> diff --git a/files/fr/web/css/css_types/index.html b/files/fr/web/css/css_types/index.html index 5642f8cf43..eb632cdba0 100644 --- a/files/fr/web/css/css_types/index.html +++ b/files/fr/web/css/css_types/index.html @@ -15,12 +15,11 @@ original_slug: Web/CSS/Types_CSS <p>Le module <strong><em>CSS basic data types</em></strong> définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (< >).</p> <div class="note"> -<p><strong>Note </strong><strong>:</strong> Les types de donnée CSS sont un type spécial de <a href="https://www.w3.org/TR/css3-values/#component-types">composant de type de valeur</a>.</p> +<p><strong>Note :</strong> Les types de donnée CSS sont un type spécial de <a href="https://www.w3.org/TR/css3-values/#component-types">composant de type de valeur</a>.</p> </div> <h2 id="Référence">Référence</h2> -<div class="index"> <ul> <li>{{cssxref("<angle>")}}</li> <li>{{cssxref("<angle-percentage>")}}</li> @@ -61,7 +60,7 @@ original_slug: Web/CSS/Types_CSS <li>{{cssxref("<string>")}}</li> <li>{{cssxref("<time>")}}</li> <li>{{cssxref("<time-percentage>")}}</li> - <li>{{cssxref("<timing-function>")}}</li> + <li>{{cssxref("easing-function")}}</li> <li>{{cssxref("<toggle-value>")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("<type-or-unit>")}}</li> @@ -69,7 +68,6 @@ original_slug: Web/CSS/Types_CSS <li>{{cssxref("<url-modifier>")}}</li> <li>{{cssxref("<zero>")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> @@ -98,6 +96,6 @@ original_slug: Web/CSS/Types_CSS <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Unités et valeurs CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Unités et valeurs CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li> </ul> diff --git a/files/fr/web/css/css_values_and_units/index.html b/files/fr/web/css/css_values_and_units/index.html index b49a59e9aa..623b4118a6 100644 --- a/files/fr/web/css/css_values_and_units/index.html +++ b/files/fr/web/css/css_values_and_units/index.html @@ -58,10 +58,10 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS <p>Dans une déclaration, on pourra donc écrire (sans quote) :</p> -<pre class="brush: css"><code>.box { +<pre class="brush: css">.box { break-inside: avoid; } -</code></pre> +</pre> <h3 id="Mots-clés_généraux">Mots-clés généraux</h3> @@ -409,18 +409,18 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS <ul> <li>{{cssxref("calc()")}}</li> - <li>{{cssxref("min", "min()")}}</li> - <li>{{cssxref("max", "max()")}}</li> - <li>{{cssxref("clamp", "clamp()")}}</li> + <li>{{cssxref("min()", "min()")}}</li> + <li>{{cssxref("max()", "max()")}}</li> + <li>{{cssxref("clamp()", "clamp()")}}</li> <li>{{cssxref("toggle", "toggle()")}}</li> - <li>{{cssxref("attr", "attr()")}}</li> + <li>{{cssxref("attr()", "attr()")}}</li> </ul> <p>Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche <code>(</code> suivie des arguments de la notation, suivis d'une parenthèse droite<code>)</code>. Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.</p> <p>Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.</p> </div> @@ -490,6 +490,6 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Types_CSS">Les types de donnée de base en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Types">Les types de donnée de base en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li> </ul> diff --git a/files/fr/web/css/css_variables/index.html b/files/fr/web/css/css_variables/index.html index 7d439c68e8..df08214795 100644 --- a/files/fr/web/css/css_variables/index.html +++ b/files/fr/web/css/css_variables/index.html @@ -16,11 +16,9 @@ translation_of: Web/CSS/CSS_Variables <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("--*")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_writing_modes/index.html b/files/fr/web/css/css_writing_modes/index.html index 7671959e67..66fa80e82d 100644 --- a/files/fr/web/css/css_writing_modes/index.html +++ b/files/fr/web/css/css_writing_modes/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Writing_Modes <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("direction")}}</li> <li>{{cssxref("glyph-orientation-horizontal")}}</li> @@ -25,7 +24,6 @@ translation_of: Web/CSS/CSS_Writing_Modes <li>{{cssxref("unicode-bidi")}}</li> <li>{{cssxref("writing-mode")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/cssom_view/coordinate_systems/index.html b/files/fr/web/css/cssom_view/coordinate_systems/index.html index 2d356ed5c8..a4de1dd910 100644 --- a/files/fr/web/css/cssom_view/coordinate_systems/index.html +++ b/files/fr/web/css/cssom_view/coordinate_systems/index.html @@ -129,9 +129,7 @@ inner.addEventListener("mouseleave", update, false);</pre> </div> </div></pre> -<details open><summary> <h3 id="CSS">CSS</h3> -</summary> <p>Le code CSS est uniquement utilisé à des fins stylistiques. La classe <code>"outer"</code> est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir <em>scroller</em> horizontalement. La boîte <code>"inner"</code> est celle sur laquelle on suit les évènements.</p> @@ -161,7 +159,6 @@ inner.addEventListener("mouseleave", update, false);</pre> width: 100%; text-align: center; }</pre> -</details> <h3 id="Résultat">Résultat</h3> @@ -172,7 +169,7 @@ inner.addEventListener("mouseleave", update, false);</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a> : comment modifier un système de coordonnées</li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a> : comment modifier un système de coordonnées</li> <li>Les coordonnées relatives aux évènements de la souris : <ul> <li>{{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}</li> diff --git a/files/fr/web/css/cssom_view/index.html b/files/fr/web/css/cssom_view/index.html index 155869c28d..d052cb0abc 100644 --- a/files/fr/web/css/cssom_view/index.html +++ b/files/fr/web/css/cssom_view/index.html @@ -17,11 +17,9 @@ translation_of: Web/CSS/CSSOM_View <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("scroll-behavior")}}</li> </ul> -</div> <h2 id="Guide">Guide</h2> diff --git a/files/fr/web/css/cursor/index.html b/files/fr/web/css/cursor/index.html index a413586854..2931c1851a 100644 --- a/files/fr/web/css/cursor/index.html +++ b/files/fr/web/css/cursor/index.html @@ -51,11 +51,11 @@ cursor: unset; <h3 id="values">Valeurs</h3> <dl> - <dt><code id="url"><url></code></dt> + <dt><code><url></code></dt> <dd>Une <code>url(…)</code> ou une liste d'URL séparées par des virgules <code>url(…), url(…), …</code> pointant vers un fichier image. On peut utiliser plusieurs <a href="/fr/docs/Web/CSS/url()"><code>url()</code></a>, au cas où certains types d'images ne sont pas pris en charge. Il est <em>obligatoire</em> qu'une valeur non-URL soit présente à la fin de cette liste.</dd> - <dt><code id="xy"><x></code> <code><y></code> {{experimental_inline}}</dt> + <dt><code><x></code> <code><y></code> {{experimental_inline}}</dt> <dd>Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.</dd> - <dt><span id="keyword_values">Valeurs utilisant un mot-clé</span></dt> + <dt>Valeurs utilisant un mot-clé</dt> <dd> <p><strong>Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.</strong></p> @@ -153,7 +153,7 @@ cursor: unset; <td><img alt="no-drop.gif" class="lwrap" src="no-drop.gif" style="float: left;"></td> <td>Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=B75173">bug 275173</a> pour Windows et Mac OS X, « <code>no-drop</code> a le même effet que <code>not-allowed</code> ».</td> </tr> - <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"> + <tr style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"> <td><code>grab</code></td> <td><img alt="grab.gif" class="default" src="grab.gif"></td> <td rowspan="2" style="cursor: auto;"> diff --git a/files/fr/web/css/custom-ident/index.html b/files/fr/web/css/custom-ident/index.html index 64c288514d..b9581cd660 100644 --- a/files/fr/web/css/custom-ident/index.html +++ b/files/fr/web/css/custom-ident/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/custom-ident <li>un tiret (<code>-</code>)</li> <li>un tiret bas (<em>underscore</em>) (<code>_</code>),</li> <li>un caractère échappé via une barre oblique inversée (<code>\</code>),</li> - <li>un caractère <a class="external" href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).</li> + <li>un caractère <a href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).</li> </ul> <p>Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur <code><custom-ident></code> ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("<string>")}}.</p> diff --git a/files/fr/web/css/dimension/index.html b/files/fr/web/css/dimension/index.html index 230fa2a0f6..6be0130cde 100644 --- a/files/fr/web/css/dimension/index.html +++ b/files/fr/web/css/dimension/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/dimension <h3 id="Dimensions_valides">Dimensions valides</h3> -<pre class="syntaxbox example-good">12px 12 pixels +<pre class="brush:css example-good">12px 12 pixels 1rem 1 rem 1.2pt 1.2 points 2200ms 2200 millisecondes @@ -31,7 +31,7 @@ translation_of: Web/CSS/dimension <h3 id="Dimensions_invalides">Dimensions invalides</h3> -<pre class="syntaxbox example-bad">12 px L'unité doit immédiatement être indiquée après le nombre +<pre class="brush:css example-bad">12 px L'unité doit immédiatement être indiquée après le nombre 12"px" Les unités sont des identifiants et ne doivent pas être entourées de quotes </pre> diff --git a/files/fr/web/css/display-inside/index.html b/files/fr/web/css/display-inside/index.html index 384a69f5bb..697b44c4c9 100644 --- a/files/fr/web/css/display-inside/index.html +++ b/files/fr/web/css/display-inside/index.html @@ -20,22 +20,22 @@ translation_of: Web/CSS/display-inside <dd>L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « <em>block and inline layout</em> » en anglais). <p>Si le type d'affichage extérieur est <code>inline</code> ou <code>run-in</code> et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.</p> - <p>Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a> (BFC) pour son contenu ou intègre son contenu dans le contexte parent.</p> + <p>Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a> (BFC) pour son contenu ou intègre son contenu dans le contexte parent.</p> </dd> <dt><code>flow-root</code> {{Experimental_Inline}}</dt> - <dd>L'élément génère un bloc qui établit un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a>, définissant ainsi une nouvelle racine pour le formatage.</dd> + <dd>L'élément génère un bloc qui établit un nouveau <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a>, définissant ainsi une nouvelle racine pour le formatage.</dd> <dt><code>table</code></dt> <dd>L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc.</dd> <dt><code>flex</code></dt> - <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">le modèle des boîtes flexibles</a>.</dd> + <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">le modèle des boîtes flexibles</a>.</dd> <dt><code>grid</code></dt> - <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">le modèle des grilles</a>.</dd> + <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">le modèle des grilles</a>.</dd> <dt><code>ruby</code> {{Experimental_Inline}}</dt> <dd>L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}.</dd> </dl> <div class="note"> -<p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <code><display-inside></code> lorsque c'est cohérent. Ainsi, avec <code>display: flex</code> ou <code>display: grid</code>, la valeur utilisée de <code><display-outside></code> sera nécessairement <code>block</code>. On a ainsi le résultat attendu car on doit avoir <code>display: grid</code> avec un conteneur qui soit un bloc.</p> +<p><strong>Note :</strong> Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <code><display-inside></code> lorsque c'est cohérent. Ainsi, avec <code>display: flex</code> ou <code>display: grid</code>, la valeur utilisée de <code><display-outside></code> sera nécessairement <code>block</code>. On a ainsi le résultat attendu car on doit avoir <code>display: grid</code> avec un conteneur qui soit un bloc.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -113,6 +113,6 @@ translation_of: Web/CSS/display-inside <li>{{CSSxRef("<display-legacy>")}}</li> </ul> </li> - <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base des boîtes flexibles (<em>flexbox</em>)</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Concepts de base des grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Concepts de base des boîtes flexibles (<em>flexbox</em>)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Concepts de base des grilles CSS</a></li> </ul> diff --git a/files/fr/web/css/display-legacy/index.html b/files/fr/web/css/display-legacy/index.html index 7980688bf4..759ab90d24 100644 --- a/files/fr/web/css/display-legacy/index.html +++ b/files/fr/web/css/display-legacy/index.html @@ -40,7 +40,6 @@ translation_of: Web/CSS/display-legacy <p>Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique <code>inline-flex</code>.</p> -<div id="Example"> <h3 id="CSS">CSS</h3> <pre class="brush: css">.container { @@ -60,7 +59,7 @@ Pas d'élément flexible <h3 id="Résultat">Résultat</h3> -<p>{{EmbedLiveSample("Exemple", 300, 150)}}</p> +<p>{{EmbedLiveSample("Exemples", 300, 150)}}</p> </div> <p>Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (<code>inline</code>) et la seconde pour le mode d'affichage intérieur (<code>flex</code>).</p> diff --git a/files/fr/web/css/display-outside/index.html b/files/fr/web/css/display-outside/index.html index 7200b30672..5bde80335d 100644 --- a/files/fr/web/css/display-outside/index.html +++ b/files/fr/web/css/display-outside/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/display-outside </dl> <div class="note"> -<p><strong>Note : </strong>Browsers that support the two value syntax, on finding the outer value only, such as when <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to <code>flow</code>. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.</p> +<p><strong>Note :</strong> Browsers that support the two value syntax, on finding the outer value only, such as when <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to <code>flow</code>. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.</p> <p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut <code>flow</code> pour le mode intérieur si <code>display: block</code> ou <code>display: inline</code>. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).</p> </div> @@ -81,5 +81,5 @@ translation_of: Web/CSS/display-outside </ul> </li> <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">Formatting Contexts explained</a></li> </ul> diff --git a/files/fr/web/css/display/index.html b/files/fr/web/css/display/index.html index 1b09df2677..2f322c669c 100644 --- a/files/fr/web/css/display/index.html +++ b/files/fr/web/css/display/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/display <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs de type <display-outside> */ +<pre class="brush:css no-line-numbers">/* Valeurs de type <display-outside> */ display: block; display: inline; display: run-in; @@ -100,13 +100,13 @@ display: unset; <p>Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { display: inline flex; }</pre> <p>On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { display: inline-flex; } </pre> @@ -127,7 +127,7 @@ display: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Texte visible </p> <p class="secret"> @@ -136,7 +136,7 @@ display: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p.secret { +<pre class="brush: css">p.secret { display: none; }</pre> diff --git a/files/fr/web/css/easing-function/index.html b/files/fr/web/css/easing-function/index.html index 4c5aa1924d..ed1e420f89 100644 --- a/files/fr/web/css/easing-function/index.html +++ b/files/fr/web/css/easing-function/index.html @@ -1,243 +1,311 @@ --- -title: <timing-function> +title: <easing-function> slug: Web/CSS/easing-function -tags: - - CSS - - Reference - - Type translation_of: Web/CSS/easing-function -translation_of_original: Web/CSS/timing-function -original_slug: Web/CSS/timing-function --- <div>{{CSSRef}}</div> -<p>Le type de donnée <strong><code><timing-function></code></strong> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « <em>easing functions</em> » (en anglais).</p> +<p>Le <a href="/fr/docs/Web/CSS/CSS_Types">type de données</a> CSS <strong><code><easing-function></code></strong> indique une fonction mathématique qui décrit la façon dont une valeur numérique évolue.</p> -<p>Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("<number>")}}) allant également de 0.0 à 1.0.</p> +<p>Cette transition entre deux valeurs peut être appliquées dans différentes situations. Elle peut être utilisée pour décrire la rapidité selon laquelle les valeurs évoluent durant les animations. Elle permet ainsi de faire varier la vitesse de l'animation au fur et à mesure de sa progression. Elle peut aussi être utilisée pour interpoler deux couleurs au sein d'un dégradé.</p> -<p><img src="/files/3434/TF_with_output_gt_than_1.png"><img src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="margin-right: 5px;"></p> +<p>Les fonctions d'évolution qui appartiennent au sous ensemble des courbes de Bézier cubiques sont souvent appelées des fonctions « douces » car elles permettent d'avoir des évolutions légères en début et en fin d'interpolation. Les fonctions d'évolution relient un ratio d'entrée à un ratio de sortie, tous les deux exprimés comme des nombres (<a href="/fr/docs/Web/CSS/<number>"><code><number></code></a>). Pour ces valeurs, <code>0.0</code> représente l'état initial et <code>1.0</code> représente l'état final.</p> -<p>Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de <em>rebondissement</em>.</p> +<p>Selon la fonction utilisée, la sortie calculée peut parfois être supérieure à <code>1.0</code> ou être inférieure à <code>0.0</code> pendant le cours de l'animation. Cela placera la valeur plus loin que son état final puis la fera revenir. Pour les animations de certaines propriétés (comme <a href="/fr/docs/Web/CSS/left"><code>left</code></a> ou <a href="/fr/docs/Web/CSS/right"><code>right</code></a>), cela crée un effet de rebond.</p> -<p>Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).</p> +<img src="tf_with_output_gt_than_1.png"> -<h2 class="cleared" id="Valeurs">Valeurs</h2> +<p>Toutefois, certaines propriétés restreindront la valeur de sortie au sein d'un intervalle acceptable. Ainsi, pour une valeur représentant la composante d'une couleur, celle-ci sera écrétée pour rester dans l'intervalle autorisé 0-255. Certaines courbes <code>cubic-bezier()</code> illustrent cette propriété.</p> -<div style="width: 100%;"> -<p>CSS prend en charge deux types de fonctions de temporisation :</p> +<img src="tf_with_output_gt_than_1_clipped.png"> -<ul> - <li>un sous-ensemble des courbes de Bézier cubiques</li> - <li>des fonctions en escalier.</li> -</ul> - -<p>Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.</p> - -<h3 id="La_classe_de_fonctions_cubic-bezier()">La classe de fonctions <code>cubic-bezier()</code></h3> - -<p style="float: left;"><img src="/files/3433/cubic-bezier,%20example.png"></p> - -<p>La notation fonctionnelle <code>cubic-bezier()</code> définit <a href="https://fr.wikipedia.org/wiki/Courbe_de_Bézier">une courbe de Bézier cubique</a>. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.</p> - -<p>Une courbe de Bézier cubique se définit par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P<sub>0</sub> est donc <code>(0, 0)</code> (instant initial et état initial) et P<sub>3</sub> est <code>(1, 1)</code> (instant final et état final).</p> +<h2 id="syntax">Syntaxe</h2> -<p>Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des <a href="https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)">fonctions mathématiques</a> (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P<sub>0</sub> et P<sub>3</sub> sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P<sub>1</sub> et P<sub>2</sub> sont toutes les deux comprises dans l'intervalle <code>[0, 1]</code>.</p> +<p>Il existe trois types de <a href="#easing_functions">fonctions de transition</a> : linéaires, <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">courbes de Bézier cubiques</a> et les fonctions en escalier. Une valeur du type <code><easing-function></code> décrit la fonction de transition en utilisant l'un de ces trois types.</p> -<p>Les courbes de Bézier cubiques pour lesquelles les ordonnées de P<sub>1</sub> et/ou P<sub>2</sub> sont situées en dehors de l'intervalle <code>[0, 1]</code> génèreront un effet de rebondissement.</p> +<h3 id="fonctions_de_transition">Fonctions de transition</h3> -<p>Lorsqu'on définit une courbe de Bézier invalide en CSS via <code>cubic-bezier</code>, le moteur ignore la déclaration dans son intégralité.</p> -</div> - -<h4 id="Syntaxe">Syntaxe</h4> - -<pre class="syntaxbox">cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>) -</pre> +<p>CSS prend en charge trois sortes de fonction de transition : les fonctions linéaires, le sous ensemble des courbes cubiques de Bézier qui sont des fonctions et les fonctions en escalier. Les fonctions les plus utiles peuvent être facilement utilisées grâce à des mots-clés.</p> -<p>avec</p> - -<dl> - <dt><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em></strong></dt> - <dd>qui sont des valeurs de type {{cssxref("<number>")}} représentant les abscisses et les ordonnées des points P<sub>1</sub> et P<sub>2</sub> définissant la courbe de Bézier cubique. x<sub>1</sub> et x<sub>2</sub> doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.</dd> -</dl> +<h4 id="les_fonctions_de_transition_linéaires">Les fonctions de transition linéaires</h4> -<h4 id="Exemples">Exemples</h4> +<h5 id="linear">linear</h5> -<p>Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :</p> +<img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne diagonale droite par de l'origine 0 0 jusqu'à arriver à la position 1 1." src="cubic-bezier-linear.png"> -<pre class="brush: css">cubic-bezier(0.1, 0.7, 1.0, 0.1) +<p>L'interpolation se fait à évolution constante, du début jusqu'à la fin. Ce mot-clé représente la fonction de transition décrite par <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code>.</p> -cubic-bezier(0, 0, 1, 1) - -/* Des valeurs négatives pour les ordonnées pour */ -/* créer du rebondissement */ -cubic-bezier(0.1, -0.6, 0.2, 0) - -/* Idem avec des valeurs > 1 */ -cubic-bezier(0, 1.1, 0.8, 4) </pre> - -<p>En revanche, ces définitions sont invalides :</p> - -<pre class="brush: css example-bad">/* Bien que le type de sortie puisse être une couleur */ -/* les courbes de Bézier fonctionnent avec des ratios */ -/* numériques */ -cubic-bezier(0.1, red, 1.0, green) - -/* Les abscisses doivent appartenir à l'intervalle [0, 1] */ -/* car sinon la courbe n'est pas une fonction temporelle. */ -cubic-bezier(2.45, 0.6, 4, 0.1) - -/* Il faut définir les deux points, il n'y a pas de valeur */ -/* par défaut. */ -cubic-bezier(0.3, 2.1) - -/* Les abscisses doivent appartenir à l'intervalle [0, 1] */ -/* car sinon la courbe n'est pas une fonction temporelle. */ -cubic-bezier(-1.9, 0.3, -0.2, 2.1) -</pre> +<h4 id="cubic-bezier">La classe des fonctions de transition cubic-bezier()</h4> -<h3 id="La_classe_de_fonction_steps()">La classe de fonction <code>steps()</code></h3> +<img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe par de l'origine jusqu'à atteindre la position 1 1. Le point à l'origine est appelé 'P₀ = (0, 0)'. En partant de l'origine, on a une poignée de Bézier intitulée 'P₁ = (0.075, 0.75)'. Le point aux coordonnées 1 1 est intitulé 'P₃ = (1, 1)'. En partant du point 1 1, on a une poignée de Bézier intitulée 'P₂ = (0.0875, 0.36)'." src="cubic-bezier-example.png"> -<p>La notation fonctionnelle <code>steps()</code> permet de définir <a href="https://en.wikipedia.org/wiki/Step_function">une fonction en escalier</a> qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.</p> +<p>La notation fonctionnelle <code>cubic-bezier()</code> définit <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier#Courbes_de_B%C3%A9zier_cubiques">une courbe de Bézier cubique</a>. Ces courbes étant continues, elles sont souvent utilisées afin de démarrer et de finir progressivement une interpolation. Elles sont parfois appelées <em>fonctions de transition</em>.</p> -<p style="float: left;"><img src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></p> +<p>Une courbe de Bézier cubique est définie par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub> et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> représentent les points de début et de fin de la courbe. Pour les fonctions de transition CSS, ces points sont fixes, car les coordonnées représentent des ratios (sur les abscisses, le ratio en temps et sur les ordonnées, le ratio en sortie). P<sub>0</sub> est donc situé en <code>(0, 0)</code> et représente l'état initial. P<sub>3</sub> est en <code>(1, 1)</code> et réprésente l'état final.</p> -<p><code>steps(2, start)</code></p> +<p>Toutes les courbes de Bézier cubiques ne sont pas des fonctions de transition, car toutes ne sont pas <a href="https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)">des fonctions mathématiques</a> (c'est-à-dire des courbes qui, pour une abscisse donnée, ont une seule ou zéro valeur). Avec les contraintes imposées sur P<sub>0</sub> et P<sub>3</sub> en CSS, une courbe de Bézier cubique sera une fonction mathématique et pourra être utilisée comme fonction de transition, si et seulement si les abscisses de P<sub>1</sub> et P<sub>2</sub> appartiennent, tous les deux, à l'intervalle <code>[0, 1]</code>.</p> -<p style="float: left;"><img src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"></p> +<p>Les courbes de Bézier cubiques pour lesquelles les ordonnées des points P<sub>1</sub> ou P<sub>2</sub> sont en dehors de l'intervalle <code>[0, 1]</code> pourront générer un effet de rebond.</p> -<p><code>steps(4, end)</code></p> +<p>Si on utilise une déclaration <code>cubic-bezier</code> avec une fonction invalide, CSS ignorera l'ensemble de la propriété.</p> -<h4 class="cleared" id="Syntaxe_2">Syntaxe</h4> +<h5 id="syntaxe_2">Syntaxe</h5> -<pre class="syntaxbox">steps(<em>nombre_de_marche</em>, <em>direction</em>) +<pre class="brush: css">cubic-bezier(<var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var>) </pre> -<p>avec</p> +<p>avec :</p> <dl> - <dt><code><strong><em>nombre_de_marche</em></strong></code></dt> - <dd>Un entier (valeur de type {{cssxref("<integer>")}} qui représente le nombre de marches composant la fonction en escalier.</dd> - <dt><code><strong><em>direction</em></strong></code></dt> - <dd>Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite : - <ul> - <li><code>start</code> indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation</li> - <li><code>end</code> indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.</li> - </ul> - <code>end</code> est la valeur par défaut.</dd> + <dt><strong><var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var></strong></dt> + <dd>Des valeurs numériques (<a href="/fr/docs/Web/CSS/<number>"><code><number></code></a>) qui représentent les abscisses et ordonnées des points P<sub>1</sub> et P<sub>2</sub> qui définissent la courbe de Bézier cubique. x<sub>1</sub> et x<sub>2</sub> doivent appartenir à l'intervalle [0, 1] afin que la valeur soit valide.</dd> </dl> -<h4 id="Exemples_2">Exemples</h4> +<h4 id="Keywords_for_common_cubic-bezier_easing_functions">Mots-clés pour les fonctions de transition communes</h4> -<p>Voici des exemples de fonction de temporisation en escalier valides :</p> +<h5 id="ease">ease</h5> -<pre class="brush: css">/* Il y a cinq marches et la dernière est utilisée */ -/* avant la fin de l'animation. */ -steps(5, end) +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'au point 1 1 en démarrant rapidement et finissant par un arc plat." src="cubic-bezier-ease.png"></p> -/* Une fonction à deux marches dont la première se */ -/* déroule au début de l'animation. */ -steps(2, start) +<p>L'interpolation démarre doucement puis accélère vivement avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>. Cette valeur est semblable à <a href="#ease-in-out"><code>ease-in-out</code></a>, bien qu'elle accélère plus rapidement au début.</p> -/* Le deuxième paramètre est facultatif. */ -steps(2) -</pre> +<h5 id="ease-in">ease-in</h5> -<p>En revanche, celles-ci sont invalides :</p> +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une courbe part l'origine jusqu'au point 1 1 avec une bonne partie de la courbe proche de l'origine et qui s'élève en quasi-ligne droite afin d'atteindre le point d'arrivée 1 1." src="cubic-bezier-ease-in.png"></p> -<pre class="brush: css example-bad">/* Le premier paramètre doit être un entier (type */ -/* <integer>) */ -steps(2.0, end) +<p>L'interpolation démarre lentement puis s'accélère progressivement jusqu'à la fin où elle s'arrête de façon abrutpe. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code>.</p> -/* Le nombre d'étapes ne peut pas être négatif. */ -steps(-3, start) +<h5 id="ease-in-out"><code>ease-in-out</code></h5> -/* Il ne peut pas être nul.*/ -steps(0, end) -</pre> +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe qui part de l'origine jusqu'à atteindre le point 1 1. La courbe est symétrique et ressemble à un S étiré" src="cubic-bezier-ease-in-out.png"></p> -<h3 id="La_classe_de_fonction_frames()">La classe de fonction <code>frames()</code></h3> +<p>L'interpolation démarre lentement puis accélère avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.42, 0.0, 0.58, 1.0)</code>. Au début, elle se comporte comme <a href="#ease-in"><code>ease-in</code></a> et à la fin, elle se comporte comme <a href="#ease-out"><code>ease-out</code></a>.</p> -<div class="note"> -<p><strong>Note :</strong> Le nom "frames" est <a href="https://github.com/w3c/csswg-drafts/issues/1301">actuellement en discussion</a> et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.</p> -</div> +<h5 id="ease-out">ease-out</h5> -<p>La notation fonctionnelle <code>frames()</code> définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre <code>frames()</code> et <code>steps()</code> est que <code>frames()</code> considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.</p> +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'à atteindre le point 1 1. Cette courbe démarre comme une ligne droite en diagonale puis se courbe progressivement à l'approche de 1 1." src="cubic-bezer-ease-out.png"></p> -<p><img src="https://www.w3.org/TR/css-timing-1/frames-timing-func-examples.svg" style="float: left; height: 200px; width: 244px;"><code>frames(2), frames(4)</code></p> +<p>L'interpolation démarre abruptement puis ralentit progressivement vers la fin. Ce mot-clé correspond à la fonction de transition <code>cubic-bezier(0.0, 0.0, 0.58, 1.0)</code>.</p> -<p> </p> +<h4 id="steps">Les fonctions de transition en escalier</h4> -<p> </p> +<p>La notation fonctionnelle <code>steps()</code> définit une fonction en escalier qui divise le domaine des valeurs de sorties en marches équidistantes.</p> -<h4 id="Syntaxe_3">Syntaxe</h4> +<h5 id="syntaxe_3">Syntaxe</h5> -<pre class="syntaxbox">steps(<var>nombre_etapes</var>) +<pre class="brush: css">steps(<var>nombre_de_marches</var>, <var>direction</var>) </pre> -<p>où :</p> +<p>avec :</p> <dl> - <dt><var>nombre_etapes</var></dt> - <dd>Est un entier ({{cssxref("<integer>")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.</dd> + <dt><var>nombre_de_marches</var></dt> + <dd>Un entier (<a href="/fr/docs/Web/CSS/<integer>"><code><integer></code></a>) strictement positif qui représente le nombre de segments équidistants qui composent la fonction en escalier.</dd> + <dt><var>direction</var></dt> + <dd> + <p>Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :</p> + <ul> + <li><code>jump-start</code> indique une fonction continue à gauche : le premier saut a lieu au début de l'interpolation ;</li> + <li><code>jump-end</code> indique une fonction continue à droite : le dernier saut a lieu à la fin de l'interpolation ;</li> + <li><code>jump-both</code> indique une fonction continue à droite et à gauche avec des pauses au début et à la fin, ce qui se traduit par l'ajout d'une étape lors de l'itération de l'interpolation ;</li> + <li><code>jump-none</code> indique qu'il n'y a pas de saut au début ou à la fin mais une temporisation de 1/n de la durée totale à chaque extrêmité.</li> + <li><code>start</code> est équivalent à <code>jump-start</code></li> + <li><code>end</code> est équivalent à <code>jump-end</code></li> + </ul> + <p><code>end</code> est la valeur par défaut.</p> + </dd> </dl> -<h4 id="Exemples_3">Exemples</h4> +<h5 id="steps_n_<direction>">steps( n, <direction> )</h5> -<p>Ces fonctions de temporisation sont valides :</p> - -<pre class="brush: css">/* Le paramètre est un entier positif. */ -frames(10) -</pre> - -<div class="note"> -<p><strong>Note :</strong> <a href="https://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html">une démo de la fonction <code>frames()</code> avec un exemple fonctionnel</a> est disponible sur notre dépôt GitHub.</p> -</div> - -<p>Ces fonctions de temporisation sont invalides :</p> +<ul> + <li> + <p><code>steps(2, jump-start)</code><br> + <code>steps(2, start)</code></p> + <img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Trois points sont affichés : le premier aux coordonnées 0 0, le deuxième aux coordonnées 0,5 0,5 et le troisième aux coordonnées 1 1. Les deuxième et troisième points sont le début de lignes horizontales qui partent vers la gauche sur 0,5 unités." src="steps-2-start.png"></li> + <li> + <p><code>steps(4, jump-end)<br> + steps(4, end)</code></p> + <img alt="Quatre marches avec un saut de la quatrième à la valeur située à la fin." src="steps-4-end.png"></li> + <li> + <p><code>steps(5, jump-none)</code></p> + <img alt="Cinq marches, sans saut : 20% de temps s'écoule à l'étape initiale et 20% de temps s'écoule à l'étape finale." src="step5none.png"></li> + <li> + <p><code>steps(3, jump-both)</code></p> + <img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Cinq points sont affichés, respectivement aux coordonnées 0 0, 0 0,25, 0,5 0,5, 0,75 0,75, 1 1. Les deuxième, troisième et quatrième points ont des lignes qui partent vers la droite sur 0,25 unités." src="step3both.png"></li> +</ul> -<pre class="brush: css example-bad">/* Le paramètre passé à la fonction doit être un entier - et pas une valeur décimale, même si cette dernière est - égale à un entier. */ -frames(2.0) +<h5 id="step-start">step-start</h5> + +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du deuxième point vers l'axe Y." src="steps-1-start.png"> L'interpolation saute directement à l'état final et reste ainsi jusqu'à la fin. Ce mot-clé correspond à la fonction de transition <code>steps(1, jump-start)</code> ou <code>steps(1, start)</code>.</p> + +<h5 id="step-end">step-end</h5> + +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du premier point et reste sur l'axe des abscisses." src="steps-1-end.png"> L'interpolation reste dans son état initial jusqu'à la fin où elle saute directement à l'état final. Ce mot-clé représente la fonction de transition <code>steps(1, jump-end)</code> ou <code>steps(1, end)</code>.</p> + +<h2 id="exemples">Exemples</h2> + +<h3 id="comparaison_des_fonctions_de_transition">Comparaison des fonctions de transition</h3> + +<p>Dans cet exemple, on crée une animation qui peut être démarrée ou stoppée à l'aide du bouton fourni et un menu est affiché pour choisir la fonction de transition à utiliser : différents mots-clés sont disponibles ainsi que des exemples utilisant <code>cubic-bezier()</code> et <code>steps()</code>. L'idée est de fournir un outil de comparaison simple entre ces fonctions.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <div></div> +</div> +<ul> + <li> + <button class="animation-button">Démarrer l'animation</button> + </li> + <li> + <label for="easing-select">Choisir une fonction de transition :</label> + <select id="easing-select"> + <option selected>linear</option> + <option>ease</option> + <option>ease-in</option> + <option>ease-in-out</option> + <option>ease-out</option> + <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> + <option>cubic-bezier(0, 1.1, 0.8, 4)</option> + <option>steps(5, end)</option> + <option>steps(3, start)</option> + <option>steps(4)</option> + </select> + </li> +</ul></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body > div { + position: relative; + height: 100px; +} + +div > div { + position: absolute; + width: 50px; + height: 50px; + background-color: blue; + background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); + border-radius: 50%; + top: 25px; + animation: 1.5s infinite alternate; +} + +@keyframes move-right { + from { + left: 10%; + } + + to { + left: 90%; + } +} + +li { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const selectElem = document.querySelector("select"); +const startBtn = document.querySelector("button"); +const divElem = document.querySelector("div > div"); + +startBtn.addEventListener("click", () => { + if(startBtn.textContent === "Démarrer l'animation") { + divElem.style.animationName = "move-right"; + startBtn.textContent = "Arrêter l'animation"; + divElem.style.animationTimingFunction = selectElem.value; + } else { + divElem.style.animationName = "unset"; + startBtn.textContent = "Démarrer l'animation"; + } +}); + +selectElem.addEventListener("change", () => { + divElem.style.animationTimingFunction = selectElem.value; +});</pre> + +<h4 id="résultat">Résultat</h4> + +<p>{{EmbedLiveSample('comparaison_des_fonctions_de_transition', '100%', 300)}}</p> + +<h3 id="exemples_avec_cubic-bezier">Exemples avec cubic-bezier()</h3> + +<p>Ces courbes de Bézier cubiques sont valides pour être utilisées en CSS :</p> + +<pre class="brush: css">/* La courbe de Bézier canonique avec quatre nombres dans l'intervalle [0,1]. */ +cubic-bezier(0.1, 0.7, 1.0, 0.1) + +/* On peut aussi utiliser des valeurs entières (<integer>) car ce sont des nombres. */ +cubic-bezier(0, 0, 1, 1) -/* Le nombre de frames doit être positif. */ -frames(-3) +/* Les valeurs négatives pour les ordonnées sont valides et créent un effet de rebond.*/ +cubic-bezier(0.1, -0.6, 0.2, 0) -/* Il doit y avoir au moins une frame. */ -frames(0) +/* Les valeurs supérieures à 1.0 pour les ordonnées sont aussi valides. */ +cubic-bezier(0, 1.1, 0.8, 4) </pre> -<h3 id="Mots-clés_pour_les_fonctions_de_temporisation_usuelles">Mots-clés pour les fonctions de temporisation usuelles</h3> +<p>Ces courbes de Bézier cubiques sont invalides en CSS :</p> -<h4 id="linear"><code>linear</code></h4> +<pre class="brush: css example-bad"> +/* Bien que les valeurs animées puissent être des couleurs, + les courbes de Bézier ne fonctionnent qu'avec des ratios numériques.*/ +cubic-bezier(0.1, red, 1.0, green) -<p><img src="/files/3425/cubic-bezier,linear.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>. Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.</p> +/* Les abscisses doivent être dans l'intervalle [0, 1] car sinon l'intervalle + couvert par la courbe n'est pas valide. */ +cubic-bezier(2.45, 0.6, 4, 0.1) -<h4 class="cleared" id="ease"><code>ease</code></h4> +/* Les deux points doivent être explicitement définis, il n'y a pas de valeur + par défaut. */ +cubic-bezier(0.3, 2.1) -<p><img src="/files/3429/cubic-bezier,ease.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>. Cette fonction est semblable à <code>ease-in-out</code> sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..</p> +/* Les abscisses doivent être dans l'intervalle [0, 1], sinon la courbe + ne représente pas une fonction du temps. */ +cubic-bezier(-1.9, 0.3, -0.2, 2.1) </pre> -<h4 class="cleared" id="ease-in"><code>ease-in</code></h4> +<h3 id="exemples_avec_steps">Exemples avec steps()</h3> -<p><img src="/files/3426/cubic-bezier,ease-in.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code>. L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.</p> +<p>Ces fonctions de transition sont valides :</p> -<h4 class="cleared" id="ease-in-out"><code>ease-in-out</code></h4> +<pre class="brush: css"> +/* Il y a 5 étapes, la dernière se produit juste avant + la fin de l'animation. */ +steps(5, end) -<p><img src="/files/3428/cubic-bezier,ease-in-out.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme <code>ease-in</code> et dans la deuxième moitié, elle se comporte comme <code>ease-out</code>.</p> +/* Un escalier à deux marches, la première se produisant + au début de l'animation. */ +steps(2, start) -<h4 class="cleared" id="ease-out"><code>ease-out</code></h4> +/* Le deuxième paramètre est optionnel. */ +steps(2) +</pre> -<p><img src="/files/3427/cubic-bezer,ease-out.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Si l'animation contient plusieurs arrêts, les marches décrites dans la fonction <code>steps()</code> s'appliqueront à chaque section. Ainsi, pour une animation avec trois segments et <code>steps(2)</code>, on aura au total 6 étapes, 2 pour chaque segment.</p> +</div> -<h4 class="cleared" id="step-start"><code>step-start</code></h4> +<p>Les fonctions de transitions qui suivent sont invalides :</p> -<p><img src="/files/3423/steps(1,start).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, start)</code> (ou <code>steps(1, jump-start)</code>). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.</p> +<pre class="brush: css example-bad"> +/* Le premier paramètre doit être un entier et ne peut pas être + une valeur décimale (même si celle-ci est égale à une valeur entière). */ +steps(2.0, jump-end) -<h4 class="cleared" id="step-end"><code>step-end</code></h4> +/* La quantité de marches ne doit pas être négative. */ +steps(-3, start) -<p><img src="/files/3424/steps(1,end).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, end)</code> (ou <code>steps(1, jump-end)</code>). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.</p> +/* Il doit y avoir au moins une marche.*/ +steps(0, jump-none)</pre> -<h2 class="cleared" id="Spécifications">Spécifications</h2> +<h2 id="spécifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -249,26 +317,21 @@ frames(0) </thead> <tbody> <tr> - <td>{{SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> + <td>{{SpecName('CSS Easing 1', '#typedef-easing-function', '<easing-function>')}}</td> + <td>{{Spec2('CSS Easing 1')}}</td> <td>Définition initiale.</td> </tr> - <tr> - <td>{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}</td> - <td>{{Spec2('CSS3 Animations')}}</td> - <td>Définition de <code><single-timing-function></code> comme synonyme de <code><single-transition-timing-function></code> selon le module CSS pour les transitions.</td> - </tr> </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>{{Compat("css.types.timing-function", 2)}}</p> +<p>{{Compat("css.types.easing-function", 2)}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="voir_aussi">Voir aussi</h2> <ul> - <li>Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <code><timing-function></code></li> - <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li> + <li><a href="https://cubic-bezier.com/">cubic-bezier</a></li> </ul> diff --git a/files/fr/web/css/element()/index.html b/files/fr/web/css/element()/index.html index 79ceb799cc..a0f0f92cc2 100644 --- a/files/fr/web/css/element()/index.html +++ b/files/fr/web/css/element()/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/element() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">element(<var>id</var>)</pre> +<pre class="syntaxbox">element(<var>id</var>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -32,7 +32,7 @@ translation_of: Web/CSS/element() <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.exemple { +<pre class="brush: css">.exemple { width: 400px; height: 400px; background: -moz-element(#monArrierePlan) no-repeat; @@ -58,7 +58,7 @@ translation_of: Web/CSS/element() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div class="exemple"> +<pre class="brush: html"><div class="exemple"> <p> Cet élément utilise l'élément #monArrierePlan comme image @@ -85,7 +85,7 @@ translation_of: Web/CSS/element() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">.exemple { +<pre class="brush: css">.exemple { width: 400px; height: 100px; background: -moz-element(#monArrierePlan); @@ -98,7 +98,7 @@ translation_of: Web/CSS/element() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="exemple"></div> +<pre class="brush: html"><div class="exemple"></div> <div class="cache"> <button id="monArrierePlan" type="button"> diff --git a/files/fr/web/css/empty-cells/index.html b/files/fr/web/css/empty-cells/index.html index 13447bc517..dc25ad57ab 100644 --- a/files/fr/web/css/empty-cells/index.html +++ b/files/fr/web/css/empty-cells/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/empty-cells <div>{{EmbedInteractiveExample("pages/css/empty-cells.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est uniquement appliquée lorsque <code>border-collapse</code> vaut <code>separate</code>.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/env()/index.html b/files/fr/web/css/env()/index.html index af2aa40afa..d155dcdd77 100644 --- a/files/fr/web/css/env()/index.html +++ b/files/fr/web/css/env()/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/env() <p><code>env()</code> peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction <code><a href="/fr/docs/Web/CSS/var()">var()</a></code>.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) @@ -26,13 +26,13 @@ translation_of: Web/CSS/env() <p>La fonction <code>env()</code> peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une <a href="/fr/docs/Web/CSS/@media">requête média</a>) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (<em>viewport</em>) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css notranslate">/* Utilisation des quatre zones sûres */ +<pre class="brush: css">/* Utilisation des quatre zones sûres */ env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) @@ -48,11 +48,11 @@ env(safe-area-inset-left, 1.4rem); <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><code id="safe-area-inset-top" style="white-space: nowrap;">safe-area-inset-top</code>, <code id="safe-area-inset-right" style="white-space: nowrap;">safe-area-inset-right</code>, <code id="safe-area-inset-bottom" style="white-space: nowrap;">safe-area-inset-bottom</code>, <code id="safe-area-inset-left" style="white-space: nowrap;">safe-area-inset-left</code></dt> + <dt><code>safe-area-inset-top</code>, <code>safe-area-inset-right</code>, <code>safe-area-inset-bottom</code>, <code>safe-area-inset-left</code></dt> <dd>Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (<em>viewport</em>) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.</dd> </dl> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.</p> </div> @@ -66,7 +66,7 @@ env(safe-area-inset-left, 1.4rem); <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Si la fonction <code>env()</code> est prise en charge dans votre navigateur, le texte de ce paragraphe aura 50 pixels de padding avec la bordure gauche mais pas la droite / basse et haute. @@ -77,7 +77,7 @@ env(safe-area-inset-left, 1.4rem); <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 300px; border: 2px solid red; padding: @@ -93,7 +93,7 @@ env(safe-area-inset-left, 1.4rem); <h3 id="Exemples_de_valeurs">Exemples de valeurs</h3> -<pre class="brush: css notranslate">/* zéro pour les agents utilisateurs rectangulaires */ +<pre class="brush: css">/* zéro pour les agents utilisateurs rectangulaires */ padding: env(safe-area-inset-bottom, 50px); /* 50px car les propriétés de l'agent sont sensibles à la casse */ @@ -110,7 +110,7 @@ padding: env(x, 50px, 20px); <p>Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.</p> </div> diff --git a/files/fr/web/css/filter-function/blur()/index.html b/files/fr/web/css/filter-function/blur()/index.html index ae64a917d5..c181809d64 100644 --- a/files/fr/web/css/filter-function/blur()/index.html +++ b/files/fr/web/css/filter-function/blur()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/blur() <div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">blur(<em>rayon</em>)</pre> +<pre class="syntaxbox">blur(<em>rayon</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/blur() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">blur(0); /* Aucun effet */ +<pre class="brush: css">blur(0); /* Aucun effet */ blur(8px); /* Un flou avec un rayon de 8px */ blur(1.17rem); /* Un flou avec un rayon de 1.17rem */</pre> diff --git a/files/fr/web/css/filter-function/brightness()/index.html b/files/fr/web/css/filter-function/brightness()/index.html index d06071ac24..3d3b983c25 100644 --- a/files/fr/web/css/filter-function/brightness()/index.html +++ b/files/fr/web/css/filter-function/brightness()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/brightness() <div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">brightness(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">brightness(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/brightness() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">brightness(0%) /* Complètement noir */ +<pre class="brush: css">brightness(0%) /* Complètement noir */ brightness(0.4) /* 40% de la clarté */ brightness(1) /* Aucun effet */ brightness(200%) /* Double la clarté */</pre> diff --git a/files/fr/web/css/filter-function/contrast()/index.html b/files/fr/web/css/filter-function/contrast()/index.html index 714787a110..84c66f25d3 100644 --- a/files/fr/web/css/filter-function/contrast()/index.html +++ b/files/fr/web/css/filter-function/contrast()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/contrast() <div>{{EmbedInteractiveExample("pages/css/function-contrast.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">contrast(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">contrast(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/contrast() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">contrast(0); /* Completely gray */ +<pre class="brush: css">contrast(0); /* Completely gray */ contrast(65%); /* 65% contrast */ contrast(1); /* No effect */ contrast(200%); /* Double contrast */</pre> diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.html b/files/fr/web/css/filter-function/drop-shadow()/index.html index 51b2288aac..a39ea431ef 100644 --- a/files/fr/web/css/filter-function/drop-shadow()/index.html +++ b/files/fr/web/css/filter-function/drop-shadow()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/filter-function/drop-shadow() <div>{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image.</p> <div class="note"> @@ -24,7 +22,7 @@ translation_of: Web/CSS/filter-function/drop-shadow() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">drop-shadow(<em>décalage-x</em>, <em>décalage-y</em>, <em>rayon-flou</em>, <em>rayon-étalement</em>, <em>couleur</em>)</pre> +<pre class="syntaxbox">drop-shadow(<em>décalage-x</em>, <em>décalage-y</em>, <em>rayon-flou</em>, <em>rayon-étalement</em>, <em>couleur</em>)</pre> <p>La fonction <code>drop-shadow()</code> accepte un paramètre de type <code><shadow></code> (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé <code>inset</code> n'est pas autorisé.</p> @@ -36,9 +34,9 @@ translation_of: Web/CSS/filter-function/drop-shadow() <dt><code>rayon-flou</code> {{optional_inline}}</dt> <dd>Une longueur ({{cssxref("<length>")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est <code>0</code> ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives</dd> <dt><code>rayon-étalement</code>{{optional_inline}}</dt> - <dd>Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("<length>")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est <code>0</code> : l'ombre a alors la même taille que l'image.</dd> - <dd> - <div class="warning"><strong>Attention !</strong> Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.</div> + <dd>Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("<length>")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est <code>0</code> : l'ombre a alors la même taille que l'image. + <div class="warning"> + <p><strong>Attention :</strong> Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.</p></div> </dd> <dt><code>couleur</code>{{optional_inline}}</dt> <dd>La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("<color>")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut.</dd> @@ -46,7 +44,7 @@ translation_of: Web/CSS/filter-function/drop-shadow() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">/* Une ombre noire avec un flou de 10px de rayon. */ +<pre class="brush: css">/* Une ombre noire avec un flou de 10px de rayon. */ drop-shadow(16px 16px 10px black) /* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */ diff --git a/files/fr/web/css/filter-function/grayscale()/index.html b/files/fr/web/css/filter-function/grayscale()/index.html index f469d4e70d..90c6abfb8e 100644 --- a/files/fr/web/css/filter-function/grayscale()/index.html +++ b/files/fr/web/css/filter-function/grayscale()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/grayscale() <div>{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">grayscale(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">grayscale(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/grayscale() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">grayscale(0) /* Aucun effet */ +<pre class="brush: css">grayscale(0) /* Aucun effet */ grayscale(.7) /* Converti à 70% en niveaux de gris */ grayscale(100%) /* Uniquement en niveaux de gris */</pre> diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.html b/files/fr/web/css/filter-function/hue-rotate()/index.html index 051c35b96b..b6d4eb4938 100644 --- a/files/fr/web/css/filter-function/hue-rotate()/index.html +++ b/files/fr/web/css/filter-function/hue-rotate()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/hue-rotate() <div>{ {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">hue-rotate(<em>angle</em>)</pre> +<pre class="syntaxbox">hue-rotate(<em>angle</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/hue-rotate() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">hue-rotate(-90deg); /* Correspond à une rotation de 270deg */ +<pre class="brush: css">hue-rotate(-90deg); /* Correspond à une rotation de 270deg */ hue-rotate(0deg); /* Sans effet */ hue-rotate(90deg); /* Rotation de 90deg */ hue-rotate(.5turn); /* Rotation de 180deg */ diff --git a/files/fr/web/css/filter-function/invert()/index.html b/files/fr/web/css/filter-function/invert()/index.html index 25a034fdd1..040d4f17b6 100644 --- a/files/fr/web/css/filter-function/invert()/index.html +++ b/files/fr/web/css/filter-function/invert()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/invert() <div>{{EmbedInteractiveExample("pages/css/function-invert.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">invert(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">invert(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/invert() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">invert(0); /* Aucun effet */ +<pre class="brush: css">invert(0); /* Aucun effet */ invert(.6); /* Inversion à 60% */ invert(100%); /* Négatif de l'image originale */</pre> diff --git a/files/fr/web/css/filter-function/opacity()/index.html b/files/fr/web/css/filter-function/opacity()/index.html index 6518f7b998..5bea0891bf 100644 --- a/files/fr/web/css/filter-function/opacity()/index.html +++ b/files/fr/web/css/filter-function/opacity()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/filter-function/opacity() <div>{ {EmbedInteractiveExample("pages/css/function-opacity.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.</p> </div> diff --git a/files/fr/web/css/filter-function/saturate()/index.html b/files/fr/web/css/filter-function/saturate()/index.html index 4d5e6ac851..148cb8c934 100644 --- a/files/fr/web/css/filter-function/saturate()/index.html +++ b/files/fr/web/css/filter-function/saturate()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/saturate() <div>{{EmbedInteractiveExample("pages/css/function-saturate.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">saturate(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">saturate(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/saturate() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">saturate(0); /* Complètement sous-saturée */ +<pre class="brush: css">saturate(0); /* Complètement sous-saturée */ saturate(.4); /* Sous-saturée à 40% */ saturate(100%); /* Aucun effet */ saturate(200%); /* Saturation doublée */</pre> diff --git a/files/fr/web/css/filter-function/sepia()/index.html b/files/fr/web/css/filter-function/sepia()/index.html index b6e0b21e8d..993dba725f 100644 --- a/files/fr/web/css/filter-function/sepia()/index.html +++ b/files/fr/web/css/filter-function/sepia()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/sepia() <div>{{EmbedInteractiveExample("pages/css/function-sepia.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">sepia(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">sepia(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/sepia() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">sepia(0); /* Aucun effet */ +<pre class="brush: css">sepia(0); /* Aucun effet */ sepia(.65); /* 65% de sépia */ sepia(100%); /* Complètement sépia */</pre> diff --git a/files/fr/web/css/filter/index.html b/files/fr/web/css/filter/index.html index dddd7e82a6..ac1de9b8e8 100644 --- a/files/fr/web/css/filter/index.html +++ b/files/fr/web/css/filter/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/filter <div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css">/* URL vers un filtre SVG */ @@ -101,8 +99,7 @@ img { <pre class="brush: css">filter: blur(5px) </pre> -<div id="blur_example" class="hidden"> -<pre class="brush: html"> <table class="standard-table"> +<pre class="brush: html hidden"> <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -126,7 +123,7 @@ img { </tbody> </table></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -168,18 +165,17 @@ table.standard-table td { height:100%; } </pre> -</div> -<pre class="brush: html line-numbers language-html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: svg"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter> </svg></pre> -<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> +<p>{{EmbedLiveSample('blur','100%','236px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/blur", "blur()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/blur()", "blur()")}} pour plus d'informations.</p> </div> <h3 id="brightness"><code>brightness()</code></h3> @@ -188,7 +184,7 @@ table.standard-table td { <pre class="brush: css">filter: brightness(0.5)</pre> -<pre class="brush: html line-numbers language-html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: svg"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="brightness"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]"/> @@ -198,8 +194,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="brightness_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -228,7 +223,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -272,12 +267,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> +<p>{{EmbedLiveSample('brightness','100%','231px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/brightness", "brightness()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/brightness()", "brightness()")}} pour plus d'informations.</p> </div> <h3 id="contrast"><code>contrast()</code></h3> @@ -287,7 +281,7 @@ table.standard-table td { <pre class="brush: css">filter: contrast(200%) </pre> -<pre class="brush: html line-numbers language-html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: svg"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="contrast"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> @@ -297,8 +291,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="contrast_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -327,7 +320,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -371,12 +364,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> +<p>{{EmbedLiveSample('contrast','100%','203px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/contrast", "contrast()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/contrast()", "contrast()")}} pour plus d'informations.</p> </div> <h3 id="drop-shadow"><code>drop-shadow()</code></h3> @@ -390,15 +382,14 @@ table.standard-table td { <dt><code><blur-radius></code> <small>(optionnel)</small></dt> <dd>Une troisième valeur de type {{cssxref("<length>")}}. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est <code>0</code>, le bord de l'ombre sera droit.</dd> <dt><code><spread-radius></code> <small>(optionnel)</small></dt> - <dd>Un quatrième valeur de type {{cssxref("<length>")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément). </dd> - <dd>Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd> + <dd>Un quatrième valeur de type {{cssxref("<length>")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd> <dt><code><color></code> <small>(optionnel)</small></dt> <dd>Voir {{cssxref("<color>")}} pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété {{cssxref("color")}} est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).</dd> </dl> <pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> -<pre class="brush: html line-numbers language-html"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: svg"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> @@ -411,8 +402,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="shadow_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -462,7 +452,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -519,12 +509,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p> +<p>{{EmbedLiveSample('drop-shadow','100%','300px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} pour plus d'informations.</p> </div> <h3 id="grayscale"><code>grayscale()</code></h3> @@ -533,8 +522,7 @@ table.standard-table td { <pre class="brush: css">filter: grayscale(100%)</pre> -<div id="grayscale_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -563,7 +551,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -607,12 +595,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> +<p>{{EmbedLiveSample('grayscale','100%','209px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/grayscale", "grayscale()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/grayscale()", "grayscale()")}} pour plus d'informations.</p> </div> <h3 id="hue-rotate"><code>hue-rotate()</code></h3> @@ -621,8 +608,7 @@ table.standard-table td { <pre class="brush: css">filter: hue-rotate(90deg)</pre> -<div id="huerotate_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -648,7 +634,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -700,10 +686,10 @@ table.standard-table td { <filter /> </svg></pre> -<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> +<p>{{EmbedLiveSample('hue-rotate','100%','221px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} pour plus d'informations.</p> </div> <h3 id="invert"><code>invert()</code></h3> @@ -712,8 +698,7 @@ table.standard-table td { <pre class="brush: css">filter: invert(100%)</pre> -<div id="invert_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -742,7 +727,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -786,12 +771,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> +<p>{{EmbedLiveSample('invert','100%','407px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/invert", "invert()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/invert()", "invert()")}} pour plus d'informations.</p> </div> <h3 id="opacity"><code>opacity()</code></h3> @@ -800,8 +784,7 @@ table.standard-table td { <pre class="brush: css">filter: opacity(50%)</pre> -<div id="opacity_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -828,7 +811,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -872,12 +855,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> +<p>{{EmbedLiveSample('opacity','100%','210px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/opacity", "opacity()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/opacity()", "opacity()")}} pour plus d'informations.</p> </div> <h3 id="saturate"><code>saturate()</code></h3> @@ -886,8 +868,7 @@ table.standard-table td { <pre class="brush: css">filter: saturate(200%)</pre> -<div id="saturate_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -913,7 +894,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -957,12 +938,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> +<p>{{EmbedLiveSample('saturate','100%','332px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/saturate", "saturate()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/saturate()", "saturate()")}} pour plus d'informations.</p> </div> <h3 id="sepia"><code>sepia()</code></h3> @@ -971,8 +951,7 @@ table.standard-table td { <pre class="brush: css">filter: sepia(100%)</pre> -<div id="sepia_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -1001,7 +980,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -1045,12 +1024,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> +<p>{{EmbedLiveSample('sepia','100%','229px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/sepia", "sepia()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/sepia()", "sepia()")}} pour plus d'informations.</p> </div> <h2 id="Enchaîner_les_fonctions">Enchaîner les fonctions</h2> @@ -1059,8 +1037,7 @@ table.standard-table td { <pre class="brush: css">filter: contrast(175%) brightness(103%)</pre> -<div id="combination()" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -1078,7 +1055,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -1123,7 +1100,6 @@ table.standard-table td { height:100%; } </pre> -</div> <p>{{EmbedLiveSample('Enchaîner_les_fonctions','100%','209px','')}}</p> diff --git a/files/fr/web/css/filter_effects/index.html b/files/fr/web/css/filter_effects/index.html index e3d0a2715d..d1865662cc 100644 --- a/files/fr/web/css/filter_effects/index.html +++ b/files/fr/web/css/filter_effects/index.html @@ -16,20 +16,16 @@ translation_of: Web/CSS/Filter_Effects <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("backdrop-filter")}}</li> <li>{{cssxref("filter")}}</li> </ul> -</div> <h3 id="Types_de_données">Types de données</h3> -<div class="index"> <ul> <li>{{cssxref("<filter-function>")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/fit-content/index.html b/files/fr/web/css/fit-content/index.html index e1b6c7206f..822f7d15ea 100644 --- a/files/fr/web/css/fit-content/index.html +++ b/files/fr/web/css/fit-content/index.html @@ -23,7 +23,7 @@ fit-content(100ch) fit-content(40%) </pre> -<p>Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> et où la taille minimale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#auto">auto</a></code> et qui est calculée de façon similaire à <code>auto</code> (i.e. <code><a href="/fr/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>), sauf que la taille de la piste est ramenée à <var>argument</var> si celui-ci est supérieur à <code>auto</code>.</p> +<p>Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> et où la taille minimale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#auto">auto</a></code> et qui est calculée de façon similaire à <code>auto</code> (i.e. <code><a href="/fr/docs/Web/CSS/minmax()">minmax(auto, max-content)</a></code>), sauf que la taille de la piste est ramenée à <var>argument</var> si celui-ci est supérieur à <code>auto</code>.</p> <p>Elle peut également être utilisée pour définir la taille d'une boîte avec {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}} où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.</p> @@ -35,8 +35,7 @@ fit-content(40%) <dt><code><length></code></dt> <dd>Une longueur (valeur de type {{cssxref("<length>")}}) exprimée de façon absolue.</dd> <dt><code><percentage></code></dt> - <dd>Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur).</dd> - <dd>Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.</dd> + <dd>Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -47,7 +46,7 @@ fit-content(40%) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3]">#container { +<pre class="brush: css">#container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap: 5px; diff --git a/files/fr/web/css/flex-basis/index.html b/files/fr/web/css/flex-basis/index.html index 6528a4f24f..03d16b111d 100644 --- a/files/fr/web/css/flex-basis/index.html +++ b/files/fr/web/css/flex-basis/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/flex-basis <div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Dans le cas où <code>flex-basis</code> (avec une valeur différente de <code>auto</code>) et <code>width</code> (ou <code>height</code> si <code>flex-direction: column</code>) sont définis pour un élément, c'est <code>flex-basis</code> qui a la priorité.</p> </div> @@ -48,21 +46,19 @@ flex-basis: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="width" name="width"><code><'width'></code></a></dt> + <dt><code><'width'></code></dt> <dd>Un longueur absolue (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}})relatif à la taille principale du conteneur flexible ou encore le mot-clé <code>auto</code>. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est <code>auto</code>.</dd> - <dt><a id="content" name="content"><code>content</code></a></dt> - <dd>Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible.</dd> - <dd> - <div class="note"><strong>Note : </strong>Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec <code>auto</code>.</div> + <dt><code>content</code></dt> + <dd>Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible. <div class="note"><p><strong>Note :</strong> Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec <code>auto</code>.</p></div> - <div class="note"><strong>Note :</strong> Voici un rapide historique pour cette propriété : + <div class="note"><p><strong>Note :</strong> Voici un rapide historique pour cette propriété : <ul> <li>Au début, <code>flex-basis:auto</code> signifiait « se référer à ma propriété <code>width</code> ou <code>height</code> »</li> <li>Ensuite, <code>flex-basis:auto</code> a été modifiée pour indiquer un dimensionnement automatique et le mot-clé <code>main-size</code> fut introduit pour faire référence à la propriété <code>width</code> ou <code>height</code>. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}.</li> <li>Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'<code>auto</code> fasse à nouveau référence à la propriété <code>height</code> ou <code>width</code>. Le mot-clé <code>content</code> a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation).</li> </ul> - </div> +</p></div> </dd> </dl> @@ -202,6 +198,6 @@ flex-basis: unset; <ul> <li>{{cssxref("width")}}</li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> </ul> diff --git a/files/fr/web/css/flex-direction/index.html b/files/fr/web/css/flex-direction/index.html index 313e5cfc8e..68b9b2d921 100644 --- a/files/fr/web/css/flex-direction/index.html +++ b/files/fr/web/css/flex-direction/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/flex-direction <div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>On notera que les valeurs <code>row</code> et <code>row-reverse</code> sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut <code>ltr</code>, <code>row</code> représente l'axe horizontal allant de la gauche vers la droite et <code>row-reverse</code> représente le même axe allant de la droite vers la gauche. Si <code>dir</code> vaut <code>rtl</code>, <code>row</code> correspondra à l'axe horizontal orienté de la droite vers la gauche et <code>row-reverse</code> de la gauche vers la droite.</p> <p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> diff --git a/files/fr/web/css/flex-flow/index.html b/files/fr/web/css/flex-flow/index.html index 8cc3445624..f6fd1b2c4b 100644 --- a/files/fr/web/css/flex-flow/index.html +++ b/files/fr/web/css/flex-flow/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/flex-flow <div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> +<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -51,7 +49,7 @@ flex-flow: unset; <h2 id="Exemples">Exemples</h2> -<pre class="brush:css;highlight:3">element { +<pre class="brush:css">element { /* L'axe principal sera la direction de bloc */ /* et on commencera par le bas (main-start et */ @@ -91,6 +89,6 @@ flex-flow: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li> </ul> diff --git a/files/fr/web/css/flex-grow/index.html b/files/fr/web/css/flex-grow/index.html index 2a6b17accb..a90ebf2a8e 100644 --- a/files/fr/web/css/flex-grow/index.html +++ b/files/fr/web/css/flex-grow/index.html @@ -19,8 +19,6 @@ translation_of: Web/CSS/flex-grow <div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -39,7 +37,7 @@ flex-shrink: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="number" name="number"><code><number></code></a></dt> + <dt><code><number></code></dt> <dd>Un nombre (type {{cssxref("<number>")}} qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 0.</dd> </dl> @@ -51,7 +49,6 @@ flex-shrink: unset; <h3 id="HTML">HTML</h3> -<div id="Live_Sample"> <pre class="brush: html"><h4>A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .</h4> <div id="content"> <div class="box" style="background-color:red;">A</div> @@ -83,7 +80,6 @@ flex-shrink: unset; border: 3px solid rgba(0,0,0,.2); } </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/flex-shrink/index.html b/files/fr/web/css/flex-shrink/index.html index c20a36a722..c3c04c7657 100644 --- a/files/fr/web/css/flex-shrink/index.html +++ b/files/fr/web/css/flex-shrink/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/flex-shrink <div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -37,7 +35,7 @@ flex-shrink: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="number" name="number"><code><number></code></a></dt> + <dt><code><number></code></dt> <dd>Un nombre (type {{cssxref("<number>")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est <code>1</code>.</dd> </dl> @@ -49,7 +47,6 @@ flex-shrink: unset; <h3 id="HTML">HTML</h3> -<div id="Live_Sample"> <pre class="brush: html"><p>A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.</p> <div id="content"> <div class="box" style="background-color:red;">A</div> @@ -80,7 +77,6 @@ flex-shrink: unset; flex-shrink: 2; } </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/flex-wrap/index.html b/files/fr/web/css/flex-wrap/index.html index c9e3361ecf..004f6f8e6f 100644 --- a/files/fr/web/css/flex-wrap/index.html +++ b/files/fr/web/css/flex-wrap/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/flex-wrap <div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> +<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -41,18 +39,16 @@ flex-wrap: unset; <dd>Les éléments flexibles sont disposé sur plusieurs lignes. La ligne <strong>cross-start</strong> est équivalente à <strong>start</strong> ou <strong>before</strong> en fonction de la valeur de <code>flex-direction</code> et la ligne <strong>cross-end</strong> est à l'opposée <strong>cross-start</strong>.</dd> <dt><code>wrap-reverse</code></dt> <dd>Se comporte comme <code>wrap</code> mais <strong>cross-start</strong> et <strong>cross-end</strong> sont permutées.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - </dt> </dl> -{{csssyntax}} +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<p>{{csssyntax}}</p> <h2 id="Exemples">Exemples</h2> <h3 id="HTML">HTML</h3> -<div id="Live_Sample"> <pre class="brush: html"><h4>Un exemple de flex-wrap:wrap </h4> <div class="contenu"> <div class="rouge">1</div> @@ -117,7 +113,6 @@ flex-wrap: unset; } </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -151,6 +146,6 @@ flex-wrap: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> <li>Guide sur les boîtes flexibles : <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Maîtriser le retour à la ligne des éléments flexibles</a></em></li> </ul> diff --git a/files/fr/web/css/flex/index.html b/files/fr/web/css/flex/index.html index 61a7ced5c7..2214dc0f6f 100644 --- a/files/fr/web/css/flex/index.html +++ b/files/fr/web/css/flex/index.html @@ -17,12 +17,11 @@ translation_of: Web/CSS/flex <div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<h2 id="description">Description</h2> <p>Pour la plupart des cas, on utilisera une des valeurs suivantes : <code>auto</code>, <code>initial</code>, <code>none</code> ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :</p> -<div id="flex"> -<pre class="hidden brush: html notranslate"><div class="flex-container"> +<pre class="hidden brush: html"><div class="flex-container"> <div class="item auto">auto</div> <div class="item auto">auto</div> @@ -63,7 +62,7 @@ translation_of: Web/CSS/flex </div> </pre> -<pre class="hidden brush: css notranslate">* { +<pre class="hidden brush: css">* { box-sizing: border-box; } @@ -110,18 +109,15 @@ translation_of: Web/CSS/flex } </pre> -<p>{{EmbedLiveSample("flex", "100%","370")}}</p> +<p>{{EmbedLiveSample("description", "100%","370")}}</p> -<div id="flex"> <p>Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p> -</div> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Using_CSS_flexible_boxes">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a> pour plus d'informations.</p> -</div> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" title="CSS/Using_CSS_flexible_boxes">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a> pour plus d'informations.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs de base */ +<pre class="brush:css no-line-numbers">/* Valeurs de base */ flex: auto; flex: initial; flex: none; @@ -184,7 +180,6 @@ flex: unset; <h3 id="Valeurs">Valeurs</h3> -<div id="flex"> <dl> <dt><code>auto</code></dt> <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code> mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "<code>flex: 1 1 auto</code>".</dd> @@ -192,19 +187,17 @@ flex: unset; <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code>. Ce comportement est équivalent à la valeur par défaut (<code>0 1 auto</code>). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "<code>flex: 0 1 auto</code>".</dd> <dt><code>none</code></dt> <dd>L'élément est dimensionné par rapport à ses propriétés <code>width</code> et <code>height</code>. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "<code>flex: 0 0 auto</code>".</dd> -</dl> -</div> - -<dl> - <dt><a id="grow" name="grow"><code><'flex-grow'></code></a></dt> + <dt><code><'flex-grow'></code></dt> <dd>Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd> - <dt><a id="shrink" name="shrink"><code><'flex-shrink'></code></a></dt> + <dt><code><'flex-shrink'></code></dt> <dd>Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd> - <dt><a id="basis" name="basis"><code><'flex-basis'></code></a></dt> + <dt><code><'flex-basis'></code></dt> <dd>Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est <code>0</code>.</dd> </dl> -<div class="note"><strong>Note :</strong> Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, <code>flex-basis</code> vaudra 0. Pour plus d'informations, voir <a href="https://drafts.csswg.org/css-flexbox/#flex-common">le brouillon de spécification du module des boîtes flexibles</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, <code>flex-basis</code> vaudra 0. Pour plus d'informations, voir <a href="https://drafts.csswg.org/css-flexbox/#flex-common">le brouillon de spécification du module des boîtes flexibles</a>.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -214,7 +207,7 @@ flex: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#flex-container { +<pre class="brush: css">#flex-container { display: flex; flex-direction: row; } @@ -230,7 +223,7 @@ flex: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="flex-container"> +<pre class="brush: html"><div id="flex-container"> <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> <div class="raw-item" id="raw">Boîte « normale » </div> </div> @@ -238,14 +231,14 @@ flex: unset; <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var flex = document.getElementById("flex"); +<pre class="brush: js">var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("click", function() { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); </pre> -<pre class="brush: css notranslate">#flex-container { +<pre class="brush: css">#flex-container { width: 100%; font-family: Consolas, Arial, sans-serif; } @@ -292,6 +285,6 @@ flex.addEventListener("click", function() { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> </ul> diff --git a/files/fr/web/css/float/index.html b/files/fr/web/css/float/index.html index 71827a528e..e814524cfb 100644 --- a/files/fr/web/css/float/index.html +++ b/files/fr/web/css/float/index.html @@ -9,22 +9,19 @@ translation_of: Web/CSS/float --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>float</code></strong> indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (<em>inline</em>) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">positionnement absolu</a>).</p> +<p>La propriété <strong><code>float</code></strong> indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (<em>inline</em>) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au <a href="/fr/docs/Web/CSS/position#positionnement_absolu">positionnement absolu</a>).</p> <div>{{EmbedInteractiveExample("pages/css/float.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<p>Un <strong>élément flottant</strong> est un élément pour lequel <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de <code>float</code> est différente de <code>none</code>.</p> -<p>Un <strong>élément flottant</strong> est un élément pour lequel <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de <code>float</code> est différente de <code>none</code>.</p> - -<div id="float"> <p><code>float</code> implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de {{cssxref("display")}} dans certains cas :</p> <table class="standard-table"> <thead> <tr> - <th scope="col"><a href="/fr/docs/Web/CSS/Valeur_spécifiée">Valeur spécifiée</a></th> - <th scope="col"><a href="/fr/docs/Web/CSS/Valeur_calculée">Valeur calculée</a></th> + <th scope="col"><a href="/fr/docs/Web/CSS/specified_value">Valeur spécifiée</a></th> + <th scope="col"><a href="/fr/docs/Web/CSS/computed_value">Valeur calculée</a></th> </tr> </thead> <tbody> @@ -87,7 +84,9 @@ translation_of: Web/CSS/float </tbody> </table> -<div class="note"><strong>Note : </strong>Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser <code>float</code> mais il faudra utiliser <code>cssFloat</code> (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée <code>styleFloat</code>. Le terme <code>float</code> étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version <a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a> de la propriété CSS construite avec des tirets. De même, <code>class</code> sera échappée en <code>className</code> et le <code>for</code> des éléments <label> sera converti en <code>htmlFor</code>).</div> +<div class="note"> + <p><strong>Note :</strong>Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser <code>float</code> mais il faudra utiliser <code>cssFloat</code> (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée <code>styleFloat</code>. Le terme <code>float</code> étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version <a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a> de la propriété CSS construite avec des tirets. De même, <code>class</code> sera échappée en <code>className</code> et le <code>for</code> des éléments <label> sera converti en <code>htmlFor</code>).</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -155,7 +154,7 @@ h4 { <p>Dans l'image suivante, on voit trois carrés rouges. Deux flottent à gauche et un flotte à droite. On voit que le deuxième carré à gauche est placé à droite du premier. Si on ajoutait d'autres carrés, ils s'empileraient sur la gauche jusqu'à remplir le conteneur, ensuite, on passerait sur une autre ligne.</p> -<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p> +<p><img src="floats.png"></p> <h2 id="Dégager_des_éléments_du_flottement">Dégager des éléments du flottement</h2> @@ -166,14 +165,15 @@ h4 { <pre class="brush:css">h2.deuxiemeTitre { clear: both; } </pre> -<p>Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même <a href="/fr/docs/Web/CSS/Block_formatting_context" rel="internal">contexte de formatage de bloc</a> pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément <code>H2</code> est entourée de barres latérales à gauche et à droite et qu'on utilise <code>clear</code>, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.</p> +<p>Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a> pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément <code>H2</code> est entourée de barres latérales à gauche et à droite et qu'on utilise <code>clear</code>, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.</p> <p>Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en bloc au conteneur des éléments flottants. Pour reprendre l'exemple précédent, on voit que toutes les boîtes rouges sont dans un élément {{HTMLElement("p")}}. On peut alors utiliser {{cssxref("overflow")}} avec <code>hidden</code> ou <code>auto</code> afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :</p> <pre class="brush:css">p.avecBoitesRouges { overflow: hidden; height: auto; } </pre> -<div class="note"><strong>Note :</strong> En utilisant <code>overflow</code>: <code>scroll</code> on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons <code>auto</code> pour <code>height</code> afin d'indiquer que le conteneur doit s'agrandir si nécessaire.</div> +<div class="note"> + <p><strong>Note :</strong> En utilisant <code>overflow</code>: <code>scroll</code> on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons <code>auto</code> pour <code>height</code> afin d'indiquer que le conteneur doit s'agrandir si nécessaire.</p></div> <h2 id="Spécifications">Spécifications</h2> @@ -218,6 +218,5 @@ h4 { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Le contexte de formatage des blocs</a></li> + <li><a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">Le contexte de formatage des blocs</a></li> </ul> -</div> diff --git a/files/fr/web/css/font-family/index.html b/files/fr/web/css/font-family/index.html index 7e45fc7aeb..7761699259 100644 --- a/files/fr/web/css/font-family/index.html +++ b/files/fr/web/css/font-family/index.html @@ -13,17 +13,16 @@ translation_of: Web/CSS/font-family <div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les valeurs sont séparées par des virgules, indiquant chacune une police alternative. Le moteur choisira la première valeur pour laquelle la police correspondante est installée sur l'ordinateur ou qui peut être téléchargée via la règle @ {{cssxref("@font-face")}} définie.</p> <p>Pour fixer <code>font-family</code> et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourcie {{cssxref("font")}}.</p> <p>Les auteurs doivent toujours inclure une famille de police générique dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée sur l'ordinateur ni qu'elle pourra être téléchargée grâce à {{cssxref("@font-face")}}. L'utilisation d'une famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin.</p> -<div class="note"><strong>Note :</strong> La propriété <code>font-family</code> définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais<strong> caractère par caractère</strong>. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.<br> -<br> -Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.</div> +<div class="note"> + <p><strong>Note :</strong> La propriété <code>font-family</code> définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais<strong> caractère par caractère</strong>. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.</p> + <p>Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -57,9 +56,9 @@ font-family: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="family-name" name="family-name"><code><family-name></code></a></dt> + <dt><code><family-name></code></dt> <dd>Le nom d'une famille de polices ; par exemple « Times » ou « Helvetica » sont des noms de famille de polices. Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").</dd> - <dt><a id="generic-name" name="generic-name"><code><generic-name></code></a></dt> + <dt><code><generic-name></code></dt> <dd> <p>Les noms de famille génériques sont utilisés comme mécanisme de secours pour conserver l'intention de mise en forme de l'auteur lorsqu'aucune des polices indiquées n'est disponible. Les noms de famille génériques sont des mots-clés et ne doivent pas être encadrés par des doubles quotes. Un nom de famille générique devrait être utilisé comme dernier élément de la liste des noms. Les mots-clés suivants sont définis :</p> diff --git a/files/fr/web/css/font-feature-settings/index.html b/files/fr/web/css/font-feature-settings/index.html index 40af85146d..3297622581 100644 --- a/files/fr/web/css/font-feature-settings/index.html +++ b/files/fr/web/css/font-feature-settings/index.html @@ -13,11 +13,10 @@ translation_of: Web/CSS/font-feature-settings <div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.<br> -<br> -Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.</div> +<div class="note"> + <p><strong>Note :</strong> Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.</p> + <p>Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -114,5 +113,5 @@ td.tabular { font-feature-settings: "tnum"; } <ul> <li><a href="https://www.microsoft.com/typography/otspec/featurelist.htm">La liste des fonctionnalités OpenType</a></li> - <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx"><em>Using the whole font</em>, un article MSDN en anglais</a></li> + <li><a href="https://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx"><em>Using the whole font</em>, un article MSDN en anglais</a></li> </ul> diff --git a/files/fr/web/css/font-kerning/index.html b/files/fr/web/css/font-kerning/index.html index 556618fc62..b6870b4104 100644 --- a/files/fr/web/css/font-kerning/index.html +++ b/files/fr/web/css/font-kerning/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/font-kerning --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>font-kerning</code></strong> contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est <em>bien crénée</em>, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.<img alt="Exemple pour font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p> +<p>La propriété <strong><code>font-kerning</code></strong> contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est <em>bien crénée</em>, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.<img alt="Exemple pour font-kerning" src="font-kerning.png"></p> <pre class="brush:css no-line-numbers">font-kerning: auto; font-kerning: normal; diff --git a/files/fr/web/css/font-optical-sizing/index.html b/files/fr/web/css/font-optical-sizing/index.html index 4223273b92..8ec9caeaf0 100644 --- a/files/fr/web/css/font-optical-sizing/index.html +++ b/files/fr/web/css/font-optical-sizing/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/font-optical-sizing <p>Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (<em>serifs</em>) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.</p> <div class="note"> -<p><strong>Note</strong> : L'axe de variation pour la taille optique est représenté par <code>opsz</code> dans {{cssxref("font-variation-settings")}}.</p> +<p><strong>Note :</strong> L'axe de variation pour la taille optique est représenté par <code>opsz</code> dans {{cssxref("font-variation-settings")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -71,7 +71,7 @@ p { qui prennent en charge cette fonctionnalité.</p></pre> <div class="note"> -<p><strong>Note</strong> : La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre <a href="https://github.com/TypeNetwork/Amstelvar/releases">en téléchargement sur GitHub</a>.</p> +<p><strong>Note :</strong> La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre <a href="https://github.com/TypeNetwork/Amstelvar/releases">en téléchargement sur GitHub</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/font-size-adjust/index.html b/files/fr/web/css/font-size-adjust/index.html index 6daeff331d..19af669501 100644 --- a/files/fr/web/css/font-size-adjust/index.html +++ b/files/fr/web/css/font-size-adjust/index.html @@ -134,5 +134,5 @@ font-size-adjust: 0.5; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144885" title="Link to Bugzilla bug 1144885">Un billet de David Baron sur <code>font-size-adjust</code> (en anglais)</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144885">Un billet de David Baron sur <code>font-size-adjust</code> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/font-size/index.html b/files/fr/web/css/font-size/index.html index be4b7e30b2..09160e80d0 100644 --- a/files/fr/web/css/font-size/index.html +++ b/files/fr/web/css/font-size/index.html @@ -13,11 +13,9 @@ translation_of: Web/CSS/font-size <div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs dont la taille est absolue */ +<pre class="brush:css no-line-numbers">/* Valeurs dont la taille est absolue */ font-size: xx-small; font-size: x-small; font-size: small; @@ -55,13 +53,13 @@ font-size: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="absolue" name="absolue"><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></a></dt> + <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt> <dd>Un ensemble de mots-clés désignant des valeurs absolues basées sur la taille par défaut de l'utilisateur (qui vaut <code>medium</code>). Le comportement est analogue à ce qu'on obtient en utilisant le code HTML <code><font size="1"></code> à <code><font size="7"></code> lorsque la taille par défaut de l'utilisateur vaut <code><font size="4"></code>.</dd> - <dt><a id="relative" name="relative"><code>larger, smaller</code></a></dt> + <dt><code>larger, smaller</code></dt> <dd>La taille de la fonte est plus grande (<code>larger</code>) ou plus petite (<code>smaller</code>) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant.</dd> - <dt><a id="lp" name="lp"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités <code>em</code> ou <code>ex</code>, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de <code>0.5em</code> indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est <code>rem</code>, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine <code>html</code>.</dd> - <dt><a id="lp" name="lp"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent.</dd> </dl> @@ -91,7 +89,7 @@ font-size: unset; <p>Pour calculer une équivalence entre <code>em</code> et un résultat exprimé en pixels, on peut utiliser cette formule :</p> -<pre class="brush: css notranslate">em = taille visée en px / font-size du parent en pixels</pre> +<pre class="brush: css">em = taille visée en px / font-size du parent en pixels</pre> <p>Ainsi, si la taille <code>font-size</code> de <code>body</code> vaut <code>1em</code> et que l'échelle par défaut du navigateur indique <code>1em</code> = <code>16px</code> et qu'on souhaite obtenir une <code>font-size</code> équivalente à <code>12px</code>, on pourra utiliser la valeur <code>0.75em</code> (car 12/16 = 0.75). De même, si on veut une taille analogue à <code>10px</code>, on utilisera <code>0.625em</code> (10/16 = 0.625).</p> @@ -99,7 +97,7 @@ font-size: unset; <p>Un autre aspect important est la <strong>composition</strong> des valeurs exprimées avec cette unité. Si on prend le fragment HTML suivant :</p> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <span> Extérieur <span>Intérieur</span> @@ -110,7 +108,7 @@ font-size: unset; <p>Et qu'on applique la feuille de style suivante :</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-size: 62.5%; } span { @@ -129,7 +127,7 @@ span { <p>La feuille de style qui suit ressemble fortement à celle utilisée dans l'exemple précédent, on a simplement remplacé l'unité par <code>rem</code>.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 62.5%; } span { @@ -139,7 +137,7 @@ span { <p>On utilisera le même fragment de HTML :</p> -<pre class="brush: html notranslate"><span> +<pre class="brush: html"><span> Extérieur <span>Intérieur</span> Extérieur @@ -153,7 +151,7 @@ span { <h3 id="Premiers_exemples">Premiers exemples</h3> -<pre class="brush: css notranslate">/* Le paragraphe sera écrit avec une grande */ +<pre class="brush: css">/* Le paragraphe sera écrit avec une grande */ /* fonte. */ p { font-size: xx-large } @@ -170,7 +168,7 @@ span { font-size: 16px; } <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.small { +<pre class="brush: css">.small { font-size: xx-small; } .larger { @@ -186,7 +184,7 @@ span { font-size: 16px; } <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><h1 class="small">Petit H1</h1> +<pre class="brush: html"><h1 class="small">Petit H1</h1> <h1 class="larger">H1 plus grand</h1> <h1 class="point">H1 de 24 points</h1> <h1 class="percent">H1 à 200%</h1></pre> diff --git a/files/fr/web/css/font-smooth/index.html b/files/fr/web/css/font-smooth/index.html index 2c1696ddde..f70c9d9e4f 100644 --- a/files/fr/web/css/font-smooth/index.html +++ b/files/fr/web/css/font-smooth/index.html @@ -24,7 +24,7 @@ font-smooth: 2em; </pre> <div class="note"> -<p><strong>Webkit</strong> implémente <strong><code>-webkit-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p> +<p><strong>Note :</strong> Webkit implémente <strong><code>-webkit-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p> <ul> <li><code>auto</code> : c'est le navigateur qui décide la meilleure approche</li> @@ -35,7 +35,7 @@ font-smooth: 2em; </div> <div class="note"> -<p><strong>Firefox</strong> implémente <strong><code>-moz-osx-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p> +<p><strong>Note :</strong> Firefox implémente <strong><code>-moz-osx-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p> <ul> <li><code>auto</code> - le choix est laissé au navigateur. Cela correspond généralement à <code>grayscale</code>.</li> @@ -45,7 +45,7 @@ font-smooth: 2em; <h2 id="Spécifications">Spécifications</h2> -<p>Bien que mentionnée dans les premiers brouillons pour <a href="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a>, <code>font-smooth</code> a été retirée de cette spécification et ne fait plus partie du standard.</p> +<p>Bien que mentionnée dans les premiers brouillons pour <a href="https://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a>, <code>font-smooth</code> a été retirée de cette spécification et ne fait plus partie du standard.</p> <p> </p> diff --git a/files/fr/web/css/font-stretch/index.html b/files/fr/web/css/font-stretch/index.html index 67e6c59bed..12889ebfbd 100644 --- a/files/fr/web/css/font-stretch/index.html +++ b/files/fr/web/css/font-stretch/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/font-stretch <p>La propriété <strong><code>font-stretch</code></strong> permet de choisir entre la forme normale, condensée ou étendue d'une police.</p> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; @@ -135,34 +135,34 @@ font-stretch: unset; <tbody> <tr> <th scope="row">Helvetica Neue</th> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> </tr> <tr> <th scope="row">League Mono Variable</th> - <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page2.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page3.png"></td> + <td><img alt="" src="l-100.png"></td> + <td><img alt="" src="l-112.5.png"></td> + <td><img alt="" src="l-125.png"></td> + <td><img alt="" src="l-150.png"></td> + <td><img alt="" src="l-200.png"></td> </tr> </tbody> </table> <ul> <li>Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de <code>font-stretch</code> inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.</li> - <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li> + <li><a href="https://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li> </ul> <p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wdth</code> qui implémente ces largeurs variables.</p> @@ -177,12 +177,12 @@ font-stretch: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p class="stretch">Le texte est plus étiré.</p> +<pre class="brush: html"><p class="stretch">Le texte est plus étiré.</p> <p class="condensed">Le texte est plus resserré.</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.stretch { +<pre class="brush: css">.stretch { font-stretch: extra-expanded; } @@ -198,10 +198,9 @@ font-stretch: unset; <p>Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <code><percentage></code>.</p> -<div id="variable-font-demo"> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> @@ -210,7 +209,7 @@ font-stretch: unset; <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">/* +<pre class="brush: css">/* Cet exemple utilise la police League Mono Variable, développée par Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon la licence SIL Open Font, Version 1.1 : @@ -243,11 +242,10 @@ http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web } </pre> -</div> <h4 id="Résultat_2">Résultat</h4> -<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/font-style/index.html b/files/fr/web/css/font-style/index.html index be9eccddf5..69952fea4f 100644 --- a/files/fr/web/css/font-style/index.html +++ b/files/fr/web/css/font-style/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-style <div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La forme <strong>italique</strong> est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme <strong>oblique</strong> quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -60,11 +58,10 @@ font-style: unset; <p>Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe <em>CSS Fonts Level 4</em> qui permet d'utiliser <code>font-style: oblique</code> suivi d'un angle.</p> -<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> +<p>{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}}</p> <h4 id="HTML">HTML</h4> -<div id="variable-font-example"> <pre class="brush: html"><header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">Slant</label> @@ -103,8 +100,7 @@ label { </pre> -<div class="hidden"> -<pre class="brush: css">html, body { +<pre class="brush: css hidden">html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; @@ -128,7 +124,6 @@ header { margin-bottom: 0; } </pre> -</div> <h4 id="JavaScript">JavaScript</h4> @@ -146,7 +141,6 @@ slantInput.addEventListener('input', update); update(); </pre> -</div> <h2 id="Exemples">Exemples</h2> @@ -178,7 +172,7 @@ update(); <div class="note"> <p><strong>Note :</strong> Toutes les polices ne disposent pas nécessairement de formes pour <code>oblique</code> et <code>italic</code>, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p> +<p><img alt="" src="screen_shot_2015-12-05_at_08.41.03.png"></p> </div> <h2 id="Accessibilité">Accessibilité</h2> @@ -186,7 +180,7 @@ update(); <p>L'utilisation de grandes portions de textes avec <code>font-style: italic</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0 </em>(en anglais)</a></li> </ul> diff --git a/files/fr/web/css/font-synthesis/index.html b/files/fr/web/css/font-synthesis/index.html index 1e9c8cc657..db3390cd3b 100644 --- a/files/fr/web/css/font-synthesis/index.html +++ b/files/fr/web/css/font-synthesis/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/font-synthesis <p>La propriété <strong><code>font-synthesis</code></strong> indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.</p> -<pre class="brush:css notranslate">font-synthesis: none; +<pre class="brush:css">font-synthesis: none; font-synthesis: weight; font-synthesis: style; font-synthesis: weight style; @@ -56,11 +56,11 @@ font-synthesis: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="syn">Ne me synthétisez pas !</div></pre> +<pre class="brush: html"><div class="syn">Ne me synthétisez pas !</div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">.syn {font-synthesis: none;} +<pre class="brush: css">.syn {font-synthesis: none;} </pre> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/font-variant-alternates/index.html b/files/fr/web/css/font-variant-alternates/index.html index a4c7d486a9..02f1d94305 100644 --- a/files/fr/web/css/font-variant-alternates/index.html +++ b/files/fr/web/css/font-variant-alternates/index.html @@ -48,19 +48,20 @@ font-variant-alternates: unset; <dd>Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.</dd> <dt><code>historical-forms</code></dt> <dd>Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType <code>hist</code>.</dd> - <dt><code><a name="stylistic()"></a>stylistic()</code></dt> + <dt><code>stylistic()</code></dt> <dd>Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType <code>salt</code>, par exemple <code>salt 2</code>.</dd> - <dt><code><a name="styleset()"></a>styleset()</code></dt> + <dt><code>styleset()</code></dt> <dd>Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType <code>ssXY</code> (par exemple <code>ss02</code>).</dd> - <dt><code><a name="character-variant()"></a>character-variant()</code></dt> + <dt><code>character-variant()</code></dt> <dd>Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à <code>styleset()</code> mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType <code>cvXY</code> (par exemple <code>cv02</code>).</dd> - <dt><code><a name="swash()"></a>swash()</code></dt> + <dt><code>swash()</code></dt> <dd>Cette fonction active l'affichage des glypes <a href="https://fr.wikipedia.org/wiki/Lettre_orn%C3%A9e">pour les lettres ornées</a>. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType <code>swsh</code> et <code>cswh</code> (par exemple <code>swsh 2</code> ou <code>cswh 2</code>).</dd> - <dt><code><a name="ornaments()"></a>ornaments()</code></dt> + <dt><code>ornaments()</code></dt> <dd>Cette fonction active l'affichage des ornements tels que les <a href="https://fr.wikipedia.org/wiki/Fleuron_(typographie)">fleurons</a> et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>ornm</code> (par exemple <code>ornm 2</code>). - <div class="note"><strong>Note : </strong>afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.</div> + <div class="note"> + <p><strong>Note :</strong> afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.</p></div> </dd> - <dt><code><a name="annotation()"></a>annotation()</code></dt> + <dt><code>annotation()</code></dt> <dd>Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>nalt</code> (par exemple <code>nalt 2</code>).</dd> </dl> diff --git a/files/fr/web/css/font-variant-caps/index.html b/files/fr/web/css/font-variant-caps/index.html index 78d7d1d750..f182b3f024 100644 --- a/files/fr/web/css/font-variant-caps/index.html +++ b/files/fr/web/css/font-variant-caps/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/font-variant-caps <div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.</p> <p>Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.</p> @@ -32,7 +30,7 @@ translation_of: Web/CSS/font-variant-caps <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css notranslate">/* Valeurs avec un mot-clé */ +<pre class="brush:css">/* Valeurs avec un mot-clé */ font-variant-caps: normal; font-variant-caps: small-caps; font-variant-caps: all-small-caps; @@ -76,13 +74,13 @@ font-variant-caps: unset; <h3 id="CSS">CSS</h3> -<pre class="brush:css notranslate">.exemple { +<pre class="brush:css">.exemple { font-variant-caps: small-caps; }</pre> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> La Reine devint pourpre de colère et après l’avoir considérée un moment avec des yeux flamboyants comme ceux d’une diff --git a/files/fr/web/css/font-variant-ligatures/index.html b/files/fr/web/css/font-variant-ligatures/index.html index bc4d432818..f22176a920 100644 --- a/files/fr/web/css/font-variant-ligatures/index.html +++ b/files/fr/web/css/font-variant-ligatures/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant-ligatures <div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">font-variant-ligatures: normal; diff --git a/files/fr/web/css/font-variant-numeric/index.html b/files/fr/web/css/font-variant-numeric/index.html index 60625ed3f5..b76c7896db 100644 --- a/files/fr/web/css/font-variant-numeric/index.html +++ b/files/fr/web/css/font-variant-numeric/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant-numeric <div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">font-variant-numeric: normal; diff --git a/files/fr/web/css/font-variant/index.html b/files/fr/web/css/font-variant/index.html index 7f8f70fe8a..86e59df336 100644 --- a/files/fr/web/css/font-variant/index.html +++ b/files/fr/web/css/font-variant/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant <div>{{EmbedInteractiveExample("pages/css/font-variant.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">font-variant: small-caps; diff --git a/files/fr/web/css/font-variation-settings/index.html b/files/fr/web/css/font-variation-settings/index.html index 412b22650e..b8ac748682 100644 --- a/files/fr/web/css/font-variation-settings/index.html +++ b/files/fr/web/css/font-variation-settings/index.html @@ -13,13 +13,14 @@ translation_of: Web/CSS/font-variation-settings <div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (<em>tags</em>) pour les caractéristiques des polices.</p> -<div class="note"><strong>Note : </strong>Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.</div> +<div class="note"> + <p><strong>Note :</strong> Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.</p></div> -<div class="note"><strong>Note :</strong> Les caractéristiques définies avec <code>font-variation-settings</code> l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. <code>font-weight</code>), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration <code>@font-face</code> inclut un intervalle <code>font-weight</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les caractéristiques définies avec <code>font-variation-settings</code> l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. <code>font-weight</code>), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration <code>@font-face</code> inclut un intervalle <code>font-weight</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -100,13 +101,13 @@ font-variation-settings: unset; <p>Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.</p> <div class="note"> -<p><strong>Note </strong>: Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.</p> +<p><strong>Note :</strong> Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.</p> </div> <h2 id="Exemples">Exemples</h2> <div class="warning"> -<p><strong>Attention !</strong> Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.</p> +<p><strong>Attention :</strong> Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.</p> </div> <h3 id="Graisse_(wght)">Graisse (<code>wght</code>)</h3> @@ -124,7 +125,7 @@ font-variation-settings: unset; <h3 id="Autres_exemples">Autres exemples</h3> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></li> <li><a href="https://v-fonts.com">v-fonts.com</a></li> <li><a href="https://axis-praxis.org">axis-praxis.org</a></li> </ul> @@ -157,7 +158,7 @@ font-variation-settings: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></li> <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li> <li><a href="https://www.microsoft.com/typography/otspec180/default.htm">OpenType specification</a></li> <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li> diff --git a/files/fr/web/css/font-weight/index.html b/files/fr/web/css/font-weight/index.html index 2bf9ca0d2a..f31a368277 100644 --- a/files/fr/web/css/font-weight/index.html +++ b/files/fr/web/css/font-weight/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-weight <div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -142,7 +140,7 @@ font-weight: unset; </tbody> </table> -<h3 id="Correspondance_entre_les_valeurs_numériques_et_les_noms_communément_utilisés"><a id="communs" name="communs">Correspondance entre les valeurs numériques et les noms communément utilisés</a></h3> +<h3 id="Correspondance_entre_les_valeurs_numériques_et_les_noms_communément_utilisés">Correspondance entre les valeurs numériques et les noms communément utilisés</h3> <p>Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (<em>NdT : les noms sont laissés en anglais car généralement utilisés tels quels</em>) :</p> @@ -205,11 +203,10 @@ font-weight: unset; <p>Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification <em>CSS Fonts</em> de niveau 4.</p> -<div>{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> +<div>{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}}</div> <h4 id="HTML">HTML</h4> -<div id="variable-font-example"> <pre class="brush: html"><header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">Weight</label> @@ -249,8 +246,7 @@ label { } </pre> -<div class="hidden"> -<pre class="brush: css">html, body { +<pre class="brush: css hidden">html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; @@ -274,7 +270,6 @@ header { margin-bottom: 0; } </pre> -</div> <h4 id="JavaScript">JavaScript</h4> @@ -291,7 +286,6 @@ weightInput.addEventListener('input', update); update(); </pre> -</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -339,10 +333,10 @@ span { <h2 id="Accessibilité">Accessibilité</h2> -<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p> +<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/font/index.html b/files/fr/web/css/font/index.html index 39c30122ca..0b2d7f2356 100644 --- a/files/fr/web/css/font/index.html +++ b/files/fr/web/css/font/index.html @@ -19,8 +19,6 @@ translation_of: Web/CSS/font <div>{{EmbedInteractiveExample("pages/css/font.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec <code>font</code>, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -94,7 +92,7 @@ font: unset; <dd>Voir la propriété {{cssxref("line-height")}}.</dd> <dt><code><'font-family'></code></dt> <dd>Voir la propriété {{cssxref("font-family")}}.</dd> - <dt><a id="keyword">Polices système :<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></a></dt> + <dt>Polices système :<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></dt> <dd>Un mot-clé peut être utilisé pour indiquer une police système spécifique : <table class="standard-table"> <tbody> diff --git a/files/fr/web/css/forced-color-adjust/index.html b/files/fr/web/css/forced-color-adjust/index.html index 2520c4fba1..6ce5f780c3 100644 --- a/files/fr/web/css/forced-color-adjust/index.html +++ b/files/fr/web/css/forced-color-adjust/index.html @@ -82,8 +82,7 @@ forced-color-adjust: unset;</pre> <p>{{EmbedLiveSample("preserving_colors", 640, 260)}}</p> -<figure role="figure" aria-label="L'exemple présenté ci-dessus restitué dans le mode de contrastes forts de Windows"><img src="windows-high-contrast.jpg" alt="L'exemple présenté ci-dessus affiche la première boîte avec un arrière-plan noir et la seconde avec un arrière-plan gris définit en CSS."> -<figcaption>L'exemple ci-dessus restitué dans le mode de contrastes forts de Windows</figcaption></figure> +<img src="windows-high-contrast.jpg" alt="L'exemple présenté ci-dessus affiche la première boîte avec un arrière-plan noir et la seconde avec un arrière-plan gris définit en CSS."> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/css/frequency/index.html b/files/fr/web/css/frequency/index.html index 9c698cf69a..f59efc67ae 100644 --- a/files/fr/web/css/frequency/index.html +++ b/files/fr/web/css/frequency/index.html @@ -61,7 +61,7 @@ translation_of: Web/CSS/frequency </tbody> </table> -<p>Ce type de donnés fut initialement introduit avec la spécification <a class="external" href="https://www.w3.org/TR/CSS2/">CSS Niveau 2</a> pour le <a href="/fr/docs/Web/CSS/@media/aural">groupe de média aural</a> qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.</p> +<p>Ce type de donnés fut initialement introduit avec la spécification <a href="https://www.w3.org/TR/CSS2/">CSS Niveau 2</a> pour le <a href="/fr/docs/Web/CSS/@media/aural">groupe de média aural</a> qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.</p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/css/gap/index.html b/files/fr/web/css/gap/index.html index ec7935f221..a4e27262ac 100644 --- a/files/fr/web/css/gap/index.html +++ b/files/fr/web/css/gap/index.html @@ -14,15 +14,13 @@ translation_of: Web/CSS/gap <div>{{EmbedInteractiveExample("pages/css/gap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette version préfixée a été remplacée par <code>gap</code>. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css no-line-numbers notranslate">/* Une valeur de longueur */ +<pre class="brush: css no-line-numbers">/* Une valeur de longueur */ /* Type <length> */ gap: 20px; gap: 1em; @@ -80,7 +78,7 @@ gap: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><div id="flexbox"> +<pre class="brush: html;"><div id="flexbox"> <div></div> <div></div> <div></div> @@ -92,7 +90,7 @@ gap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[5] notranslate">#flexbox { +<pre class="brush: css">#flexbox { display: flex; flex-wrap: wrap; width: 300px; @@ -117,7 +115,7 @@ gap: unset; <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><div id="grid"> +<pre class="brush: html;"><div id="grid"> <div></div> <div></div> <div></div> @@ -131,14 +129,12 @@ gap: unset; <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css notranslate">#grid { +<pre class="brush: css hidden">#grid { grid-gap: 20px 5px; } </pre> -</div> -<pre class="brush: css; highlight[5] notranslate">#grid { +<pre class="brush: css">#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); @@ -159,7 +155,7 @@ gap: unset; <h4 id="HTML_3">HTML</h4> -<pre class="brush: html; notranslate"><p class="content-box"> +<pre class="brush: html;"><p class="content-box"> voici un texte en multi-colonne sur des colonnes avec une gouttière de 40 pixels créée grâce à la propriété CSS <code>gap</code>. Est-ce que c'est pas trop génial ? @@ -168,7 +164,7 @@ gap: unset; <h4 id="CSS_3">CSS</h4> -<pre class="brush: css; highlight[3] notranslate">.content-box { +<pre class="brush: css">.content-box { column-count: 3; gap: 40px; } diff --git a/files/fr/web/css/general_sibling_combinator/index.html b/files/fr/web/css/general_sibling_combinator/index.html index 96352aacb8..683722db57 100644 --- a/files/fr/web/css/general_sibling_combinator/index.html +++ b/files/fr/web/css/general_sibling_combinator/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/Sélecteurs_de_voisins_généraux <p>Le combinateur <code>~</code> permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.</p> -<pre class="brush: css no-line-numbers notranslate">/* Parmi tous les éléments <img>, cibler tous +<pre class="brush: css no-line-numbers">/* Parmi tous les éléments <img>, cibler tous éléments <p> qui les suivent. */ img ~ p { color: red; @@ -21,20 +21,20 @@ img ~ p { <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">premier_element ~ second_element { <em>propriétés de style</em> } +<pre class="syntaxbox">premier_element ~ second_element { <em>propriétés de style</em> } </pre> <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p ~ span { +<pre class="brush: css">p ~ span { color: red; }</pre> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><span>Ici, ce n'est pas rouge.</span> +<pre class="brush: html"><span>Ici, ce n'est pas rouge.</span> <p>Voici un paragraphe.</p> <code>Un peu de code.</code> <span>Et un autre span.</span> diff --git a/files/fr/web/css/gradient/index.html b/files/fr/web/css/gradient/index.html index 76c1c773d0..99fc1e5279 100644 --- a/files/fr/web/css/gradient/index.html +++ b/files/fr/web/css/gradient/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/gradient <div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé <code>transparent</code> dans d'anciens navigateurs).</p> <h2 id="Les_types_de_dégradés">Les types de dégradés</h2> @@ -69,24 +67,20 @@ translation_of: Web/CSS/gradient <p>Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}.</p> -<div id="conic-gradient"> -<div class="hidden"> -<pre class="brush: html"><div class="conic-gradient">Conic gradient</div> +<pre class="brush: html hidden"><div class="conic-gradient">Conic gradient</div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 200px; height: 200px; }</pre> -</div> <pre class="brush: css">.conic-gradient { background: conic-gradient(lightpink, white, powderblue); } </pre> -<p>{{EmbedLiveSample('conic-gradient', 240, 80)}}</p> -</div> +<p>{{EmbedLiveSample('dégradé_conique', 240, 80)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/grid-area/index.html b/files/fr/web/css/grid-area/index.html index bd0d2366b5..ba2cd9ed2e 100644 --- a/files/fr/web/css/grid-area/index.html +++ b/files/fr/web/css/grid-area/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-area <div>{{EmbedInteractiveExample("pages/css/grid-area.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si quatre valeurs <code><grid-line></code> sont fournies, la première sera appliquée à <code>grid-row-start</code>, la deuxième à <code>grid-column-start</code>, la troisième à <code>grid-row-end</code> et la quatrième à <code>grid-column-end</code>.</p> <p>Lorsqu'il n'y a pas de valeur pour <code>grid-column-end</code>, si <code>grid-column-start</code> est un identifiant de zone ({{cssxref("<custom-ident>")}}, <code>grid-column-end</code> sera défini avec cet identifiant, sinon il sera défini avec <code>auto</code>.</p> @@ -58,7 +56,7 @@ grid-area: unset;</pre> <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-area: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-area: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -84,7 +82,7 @@ grid-area: unset;</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[9]">#grid { +<pre class="brush: css">#grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; @@ -149,6 +147,6 @@ grid-area: unset;</pre> <li>{{cssxref("grid-column")}}</li> <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Guide : les zones des grilles CSS</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Guide : les zones des grilles CSS</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-auto-columns/index.html b/files/fr/web/css/grid-auto-columns/index.html index 6921b52014..a993203277 100644 --- a/files/fr/web/css/grid-auto-columns/index.html +++ b/files/fr/web/css/grid-auto-columns/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/grid-auto-columns <div>{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -84,9 +82,7 @@ grid-auto-columns: unset; <dt><code>fit-content(argument)</code></dt> <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée de façon semblable à <code>auto</code>, sauf qu'ici, la taille de la piste est écrétée à <em>argument</em> s'i elle est plus grande que le minimum <code>auto</code>.</dd> <dt><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd> - <dd> - <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> </dd> </dl> @@ -98,7 +94,7 @@ grid-auto-columns: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[6]">#grid { +<pre class="brush: css">#grid { width: 100px; display: grid; grid-template-areas: "a a"; @@ -153,6 +149,6 @@ grid-auto-columns: unset; <li>{{cssxref("grid-auto-rows")}}</li> <li>{{cssxref("grid-auto-flow")}}</li> <li>{{cssxref("grid")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS#Dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-auto-flow/index.html b/files/fr/web/css/grid-auto-flow/index.html index bc3fcad666..1eb36acdc2 100644 --- a/files/fr/web/css/grid-auto-flow/index.html +++ b/files/fr/web/css/grid-auto-flow/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-auto-flow <div>{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -58,7 +56,7 @@ grid-auto-flow: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[7]">#grid { +<pre class="brush: css">#grid { height: 200px; width: 200px; display: grid; diff --git a/files/fr/web/css/grid-auto-rows/index.html b/files/fr/web/css/grid-auto-rows/index.html index 2dca2b456e..33e3e8721c 100644 --- a/files/fr/web/css/grid-auto-rows/index.html +++ b/files/fr/web/css/grid-auto-rows/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-auto-rows <div>{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-rows")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -77,9 +75,7 @@ grid-auto-rows: unset; <dt><code>minmax(min, max)</code></dt> <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code><flex></code> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd> <dt><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd> - <dd> - <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> </dd> </dl> @@ -91,7 +87,7 @@ grid-auto-rows: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[6]">#grid { +<pre class="brush: css">#grid { width: 200px; display: grid; grid-template-areas: "a a"; @@ -146,6 +142,6 @@ grid-auto-rows: unset; <li>{{cssxref("grid-auto-columns")}}</li> <li>{{cssxref("grid-auto-flow")}}</li> <li>{{cssxref("grid")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS#Dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-column-end/index.html b/files/fr/web/css/grid-column-end/index.html index 0faefe81c5..d001f397c9 100644 --- a/files/fr/web/css/grid-column-end/index.html +++ b/files/fr/web/css/grid-column-end/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column-end <div>{{EmbedInteractiveExample("pages/css/grid-column-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ @@ -45,7 +43,7 @@ grid-column-end: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante.. - <p class="note"><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, <code>grid-column-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec <code>foo-end</code>).</p> + <div class="note"><p><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, <code>grid-column-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec <code>foo-end</code>).</p></div> <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code><custom-ident></code> (cf. définition suivante).</p> </dd> @@ -98,8 +96,7 @@ grid-column-end: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -122,7 +119,6 @@ grid-column-end: unset; padding: 1em; } </pre> -</div> <p>{{EmbedLiveSample('Exemples', '230', '420')}}</p> @@ -159,6 +155,6 @@ grid-column-end: unset; <li>{{cssxref("grid-row-start")}}</li> <li>{{cssxref("grid-row-end")}}</li> <li>{{cssxref("grid-row")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-column-start/index.html b/files/fr/web/css/grid-column-start/index.html index 4687f88a42..a836b66012 100644 --- a/files/fr/web/css/grid-column-start/index.html +++ b/files/fr/web/css/grid-column-start/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column-start <div>{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ @@ -55,7 +53,7 @@ grid-column-start: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -110,8 +108,7 @@ grid-column-start: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -134,7 +131,6 @@ grid-column-start: unset; padding: 1em; } </pre> -</div> <p>{{EmbedLiveSample('Exemples', '230', '420')}}</p> @@ -171,6 +167,6 @@ grid-column-start: unset; <li>{{cssxref("grid-row-start")}}</li> <li>{{cssxref("grid-row-end")}}</li> <li>{{cssxref("grid-row")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-column/index.html b/files/fr/web/css/grid-column/index.html index ec99cb6e15..f66d2c735d 100644 --- a/files/fr/web/css/grid-column/index.html +++ b/files/fr/web/css/grid-column/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column <div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si deux valeurs <code><strong><grid-line></strong></code> sont utilisées pour la propriété, la valeur de <strong><code>grid-column-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-column-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -64,7 +62,7 @@ grid-column: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start'/'<custom-ident>-end', la première colonne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -90,7 +88,7 @@ grid-column: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[14,19]">#grid { +<pre class="brush: css">#grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); @@ -160,6 +158,6 @@ grid-column: unset; <li>{{cssxref("grid-row-end")}}</li> <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille CSS</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille CSS</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-row-end/index.html b/files/fr/web/css/grid-row-end/index.html index 18fafbffc8..5902383d70 100644 --- a/files/fr/web/css/grid-row-end/index.html +++ b/files/fr/web/css/grid-row-end/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-row-end <div>{{EmbedInteractiveExample("pages/css/grid-row-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -45,7 +43,7 @@ grid-row-end: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante.. - <p class="note"><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, <code>grid-row-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec <code>foo-end</code>).</p> + <div class="note"><p><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, <code>grid-row-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec <code>foo-end</code>).</p></div> <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code><custom-ident></code> (cf. définition suivante).</p> @@ -98,8 +96,7 @@ grid-row-end: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -122,7 +119,6 @@ grid-row-end: unset; padding: 1em; } </pre> -</div> <p>{{EmbedLiveSample('Exemples', '230', '420')}}</p> @@ -159,6 +155,6 @@ grid-row-end: unset; <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> <li>{{cssxref("grid-column")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-row-start/index.html b/files/fr/web/css/grid-row-start/index.html index 0e3cf54e05..f39fc139e1 100644 --- a/files/fr/web/css/grid-row-start/index.html +++ b/files/fr/web/css/grid-row-start/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/grid-row-start <p>La propriété <strong><code>grid-row-start</code></strong> définit le début de la position, sur une ligne, d'un élément placé sur la grille qui participe à une ligne, à un fragment de ligne ou rien (automatique). Par conséquent, cela définit également le début de la zone de la grille pour cet élément.</p> -<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> @@ -55,7 +53,7 @@ grid-row-start: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -110,8 +108,7 @@ grid-row-start: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -134,7 +131,6 @@ grid-row-start: unset; padding: 1em; } </pre> -</div> <p>{{ EmbedLiveSample('Exemples', '230', '420') }}</p> @@ -171,6 +167,6 @@ grid-row-start: unset; <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> <li>{{cssxref("grid-column")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-row/index.html b/files/fr/web/css/grid-row/index.html index 09bdf58085..f4c5b0b205 100644 --- a/files/fr/web/css/grid-row/index.html +++ b/files/fr/web/css/grid-row/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-row <div>{{EmbedInteractiveExample("pages/css/grid-row.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si deux valeurs <strong><grid-line></strong> sont utilisées pour la propriété, la valeur de <strong><code>grid-row-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-row-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -52,7 +50,7 @@ grid-row: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start'/'<custom-ident>-end', la première ligne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -78,7 +76,7 @@ grid-row: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[14,19]">#grid { +<pre class="brush: css">#grid { display: grid; height: 200px; grid-template-columns: 200px; @@ -145,6 +143,6 @@ grid-row: unset; <li>{{cssxref("grid-column")}}</li> <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-template-areas/index.html b/files/fr/web/css/grid-template-areas/index.html index 458b89d1eb..f773ecdb67 100644 --- a/files/fr/web/css/grid-template-areas/index.html +++ b/files/fr/web/css/grid-template-areas/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-areas <div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} et les méthodes de raccourci correspondantes {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -60,7 +58,7 @@ grid-template-areas: unset; <h3 id="CSS">CSS</h3> -<pre class="brush:css; highlight[5-7]">#page { +<pre class="brush:css">#page { display: grid; width: 100%; height: 250px; diff --git a/files/fr/web/css/grid-template-columns/index.html b/files/fr/web/css/grid-template-columns/index.html index 74a3f4baf9..6900f77183 100644 --- a/files/fr/web/css/grid-template-columns/index.html +++ b/files/fr/web/css/grid-template-columns/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-columns <div>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ @@ -57,20 +55,18 @@ grid-template-columns: unset; <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code><flex></code> occupera une partie de l'espace restant en fonction de ce facteur. <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, <flex>)</code>). Voir {{cssxref("<flex>")}}.</p> </dd> - <dt id="max-content"><code>max-content</code></dt> + <dt><code>max-content</code></dt> <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> <dt><code>min-content</code></dt> <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> - <dt>{{cssxref("minmax","minmax(min, max)")}}</dt> + <dt>{{cssxref("minmax()","minmax(min, max)")}}</dt> <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code><flex></code> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.</dd> - <dt id="auto"><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd> - <dd> - <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + <dt><code>auto</code></dt> + <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> </dd> - <dt id="fit-content()">{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> + <dt>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd> - <dt>{{cssxref("repeat","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> + <dt>{{cssxref("repeat()","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.</dd> </dl> @@ -138,6 +134,6 @@ grid-template-columns: unset; <li>{{cssxref("grid-template-rows")}}</li> <li>{{cssxref("grid-template-areas")}}</li> <li>{{cssxref("grid-template")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-template-rows/index.html b/files/fr/web/css/grid-template-rows/index.html index 6bbcfb190b..7fd43b2d89 100644 --- a/files/fr/web/css/grid-template-rows/index.html +++ b/files/fr/web/css/grid-template-rows/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-rows <div>{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ @@ -65,16 +63,14 @@ grid-template-rows: unset; <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> <dt><code>min-content</code></dt> <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> - <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt> + <dt>{{cssxref("minmax()", "minmax(min, max)")}}</dt> <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code><flex></code> qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.</dd> <dt><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd> - <dd> - <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> </dd> <dt>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd> - <dt>{{cssxref("repeat","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> + <dt>{{cssxref("repeat()","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.</dd> </dl> @@ -142,6 +138,6 @@ grid-template-rows: unset; <li>{{cssxref("grid-template-columns")}}</li> <li>{{cssxref("grid-template-areas")}}</li> <li>{{cssxref("grid-template")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-template/index.html b/files/fr/web/css/grid-template/index.html index 35e1f80d53..55dceb4931 100644 --- a/files/fr/web/css/grid-template/index.html +++ b/files/fr/web/css/grid-template/index.html @@ -9,12 +9,10 @@ translation_of: Web/CSS/grid-template --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p> +<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Shorthand_properties">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p> <div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -52,11 +50,11 @@ grid-template: unset; <dd>Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur <code>none</code>.</dd> <dt><code>[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?</code></dt> <dd>{{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (<code>auto</code> sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou <code>none</code> sinon). - <p class="note"><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p> + <div class="note"><p><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p></div> </dd> </dl> -<p class="note"><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p> +<div class="note"><p><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p></div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -66,7 +64,7 @@ grid-template: unset; <h3 id="CSS">CSS</h3> -<pre class="brush:css; highlight[5-8]">#page { +<pre class="brush:css">#page { display: grid; width: 100%; height: 200px; @@ -140,7 +138,7 @@ footer { <li>{{cssxref("grid-template-rows")}}</li> <li>{{cssxref("grid-template-areas")}}</li> <li>{{cssxref("grid-template-columns")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css">Guide : Les zones de grilles et les propriétés raccourcies</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid/index.html b/files/fr/web/css/grid/index.html index 0f46a23e6f..721ff66aa8 100644 --- a/files/fr/web/css/grid/index.html +++ b/files/fr/web/css/grid/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/grid <div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p class="note"><strong>Note :</strong> Une seule déclaration <code>grid</code> permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.</p> +<div class="note"> + <p><strong>Note :</strong> Une seule déclaration <code>grid</code> permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -133,6 +133,6 @@ grid: unset;</pre> <li>{{cssxref("grid-auto-columns")}}</li> <li>{{cssxref("grid-auto-rows")}}</li> <li>{{cssxref("grid-auto-flow")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css">Guide : Les zones de grilles et les propriétés raccourcies</a></li> </ul> diff --git a/files/fr/web/css/height/index.html b/files/fr/web/css/height/index.html index a2f98e01bf..e1e0f46885 100644 --- a/files/fr/web/css/height/index.html +++ b/files/fr/web/css/height/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/height <div>{{EmbedInteractiveExample("pages/css/height.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété <code>height</code>.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/hyphens/index.html b/files/fr/web/css/hyphens/index.html index ef07f6262a..3dbfafaf66 100644 --- a/files/fr/web/css/hyphens/index.html +++ b/files/fr/web/css/hyphens/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/hyphens <div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<p>Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut <code><a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a></code> et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p> -<p>Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_globaux/lang">lang</a></code> et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p> - -<div class="note"><strong>Note :</strong> Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.</div> +<div class="note"> + <p><strong>Note :</strong> Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -43,7 +43,9 @@ hyphens: unset; <dd>Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.</dd> </dl> -<div class="note"><strong>Note :</strong> Le comportement défini par <code>auto</code> dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML <code>lang</code> pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.</div> +<div class="note"> + <p><strong>Note :</strong> Le comportement défini par <code>auto</code> dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML <code>lang</code> pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -103,9 +105,7 @@ p.auto { <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "490'")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/image-orientation/index.html b/files/fr/web/css/image-orientation/index.html index ae0c2f2f3d..1e5b7e4b90 100644 --- a/files/fr/web/css/image-orientation/index.html +++ b/files/fr/web/css/image-orientation/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/image-orientation <p>La propriété <strong><code>image-orientation</code></strong> décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction <code>rotate</code>.</p> <div class="warning"> -<p><strong>Attention !</strong> Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être <code>from-image</code>).</p> +<p><strong>Attention :</strong> Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être <code>from-image</code>).</p> </div> <pre class="brush:css no-line-numbers">/* Valeurs d'angle */ @@ -72,10 +72,7 @@ image-orientation: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg" +<pre class="brush: html hidden"><img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="Orientation déterminée à partir de l'image"/> <select id="imageOrientation"> <option value="from-image">from-image</option> @@ -84,14 +81,11 @@ image-orientation: unset; </select> </pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var imageOrientation = document.getElementById("imageOrientation"); +<pre class="brush: js hidden">var imageOrientation = document.getElementById("imageOrientation"); imageOrientation.addEventListener("change", function (evt) { document.getElementById("image").style.imageOrientation = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/image-rendering/index.html b/files/fr/web/css/image-rendering/index.html index 2fc2cf426d..d0aef4a32e 100644 --- a/files/fr/web/css/image-rendering/index.html +++ b/files/fr/web/css/image-rendering/index.html @@ -41,7 +41,9 @@ image-rendering: unset; <dd>L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.</dd> </dl> -<div class="note"><strong>Note :</strong> Les valeurs <code>optimizeQuality</code> et <code>optimizeSpeed</code> qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de <code>smooth</code> et <code>pixelated</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les valeurs <code>optimizeQuality</code> et <code>optimizeSpeed</code> qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de <code>smooth</code> et <code>pixelated</code>.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -91,7 +93,7 @@ image-rendering: unset; <p>{{EmbedLiveSample("Exemples","100%","100%")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> En pratique, les règles <code>pixelated</code> et <code>crisp-edges</code> peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et <em>vice versa</em>). Si besoin, un {{HTMLElement("canvas")}} peut fournir <a href="http://phrogz.net/tmp/canvas_image_zoom.html">une alternative pour les valeurs <code>crisp-edge</code> et <code>optimize-contrast</code></a> via la manipulation manuelle des données de l'image ou avec <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code>.</p> </div> diff --git a/files/fr/web/css/image/index.html b/files/fr/web/css/image/index.html index f588bebb67..ae7382c629 100644 --- a/files/fr/web/css/image/index.html +++ b/files/fr/web/css/image/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/image --- <div>{{CSSRef}}</div> -<p>Le type de donnée CSS <strong><code><image></code></strong> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("<url>")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("<gradient>")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade")}}.</p> +<p>Le type de donnée CSS <strong><code><image></code></strong> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("<url>")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("<gradient>")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element()")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade()")}}.</p> <p>Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} et {{cssxref("cursor")}}.</p> @@ -64,7 +64,7 @@ translation_of: Web/CSS/image <td>?</td> </tr> <tr> - <td>{{cssxref("symbols")}} pour <code>@counter-style</code></td> + <td>{{cssxref("symbols()")}} pour <code>@counter-style</code></td> <td>Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système.</td> </tr> <tr> @@ -84,7 +84,9 @@ translation_of: Web/CSS/image <p>Les images peuvent être utilisées pour de nombreuses propriétés CSS comme {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} ou {{cssxref("cursor")}}.</p> -<div class="note"><strong>Note :</strong> tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section <a href="/fr/docs/CSS/image#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> pour une liste explicative.</div> +<div class="note"> + <p><strong>Note :</strong> tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section <a href="/fr/docs/Web/CSS/image#compatibilit.c3.a9_des_navigateurs">compatibilité des navigateurs</a> pour une liste explicative.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -93,7 +95,7 @@ translation_of: Web/CSS/image <ul> <li>une image dénotée par le type de donnée CSS {{cssxref("<url>")}} et la fonction <code>url()</code> ;</li> <li>une valeur CSS {{cssxref("<gradient>")}} (représentant un dégradé) ;</li> - <li>une partie de la page, définie par la fonction {{cssxref("element")}} ;</li> + <li>une partie de la page, définie par la fonction {{cssxref("element()")}} ;</li> <li>une image, un fragment d'image ou une couleur définie grâce à la fonction {{cssxref("image()")}} ;</li> <li>une fusion de deux ou plusieurs images avec la fonction {{cssxref("cross-face")}}</li> <li>une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction {{cssxref("image-set()")}}.</li> @@ -108,7 +110,7 @@ linear-gradient(blue, red) /* Un dégradé (<gradient>) */ element(#colonne3) /* Utilisation d'un élément de la page via la fonction element(), si colonne3 est bien un identifiant CSS existant. */ image(ltr 'arrow.png#xywh=0,0,16,16', red) - /* Une section de 16x16 pixels de l'image <code>arrow.png</code> et qui démarre au coin + /* Une section de 16x16 pixels de l'image arrow.png et qui démarre au coin supérieur gauche de l'image et qui sera utilisée si arrow.png est à un format pris en charge. Sinon, ce sera un fond rouge qui sera utilisé. Si la langue est écrite de gauche à droite, l'image sera inversée @@ -180,8 +182,8 @@ image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image doit avoir une résolut <li>{{cssxref("conic-gradient")}}</li> </ul> </li> - <li>{{cssxref("element")}}</li> + <li>{{cssxref("element()")}}</li> <li>{{CSSxRef("imagefunction", "image()")}}</li> <li>{{cssxref("image-set()")}}</li> - <li>{{CSSxRef("cross-fade")}}</li> + <li>{{CSSxRef("cross-fade()")}}</li> </ul> diff --git a/files/fr/web/css/index.html b/files/fr/web/css/index.html index fedb551fe9..17efcc84ae 100644 --- a/files/fr/web/css/index.html +++ b/files/fr/web/css/index.html @@ -12,38 +12,26 @@ translation_of: Web/CSS --- <p>{{CSSRef}}</p> -<div class="twocolumns"> -<div class="hidden"> -<div class="blockIndicator note"> -<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en <a href="/fr/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> ou en <a href="/fr/docs/Glossaire/XML">XML</a> (on inclut ici les langages basés sur XML comme <a href="/fr/docs/Web/SVG">SVG</a> ou {{Glossary("XHTML", "",1)}}). CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports.</p> -</div> -</div> -</div> +<p>CSS est l'un des langages principaux du <strong>Web ouvert</strong> et a été standardisé <a href="https://w3.org/Style/CSS/#specs">par le W3C</a>. Ce standard évolue sous forme de niveaux (<em>levels</em>), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, qui est découpé en modules plus petits, est en voie de standardisation.</p> -<p>CSS est l'un des langages principaux du <strong>Web ouvert</strong> et a été standardisé <a class="external" href="https://w3.org/Style/CSS/#specs">par le W3C</a>. Ce standard évolue sous forme de niveaux (<em>levels</em>), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, qui est découpé en modules plus petits, est en voie de standardisation.</p> +<h2 id="Key_resources">Ressources principales</h2> -<section id="sect1"> -<ul class="card-grid"> - <li><span>Introduction à CSS</span> +<dl> + <dt>Introduction à CSS</dt> + <dd>Si vous débutez en développement web, n'hésitez pas à consulter l'article <a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">les bases de CSS</a> pour découvrir CSS, ce que c'est et comment l'utiliser.</dd> + <dt>Tutoriels CSS</dt> + <dd>Notre section <a href="/fr/docs/Learn/CSS">Apprendre le Web - CSS</a> contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.</dd> + <dt>La référence CSS</dt> + <dd><a href="/fr/docs/Web/CSS/Reference">Une référence exhaustive</a> destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.</dd> +</dl> - <p>Si vous débutez en développement web, n'hésitez pas à consulter l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">les bases de CSS</a> pour découvrir CSS, ce que c'est et comment l'utiliser.</p> - </li> - <li><span>Tutoriels CSS</span> - <p>Notre section <a href="/fr/Apprendre/CSS">Apprendre le Web - CSS</a> contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.</p> - </li> - <li><span>La référence CSS</span> - <p><a href="/fr/docs/Web/CSS/Reference">Une référence exhaustive</a> destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.</p> - </li> -</ul> -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Tutoriels">Tutoriels</h2> +<h2 id="Tutoriels">Tutoriels</h2> -<p>La section <a href="/fr/Apprendre/CSS">Apprendre le Web</a> fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.</p> +<p>La section <a href="/fr/docs/Learn/CSS">Apprendre le Web</a> fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.</p> <dl> - <dt><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Introduction à CSS</a></dt> + <dt><a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">Introduction à CSS</a></dt> <dd>Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.</dd> <dt><a href="/fr/docs/Learn/CSS/Styling_text">Mettre en forme le texte</a></dt> <dd>Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.</dd> @@ -52,10 +40,8 @@ translation_of: Web/CSS <dt><a href="/fr/docs/Learn/CSS/CSS_layout">La disposition en CSS</a></dt> <dd>Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (<em>viewport</em>). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (<em>flexbox</em>).</dd> </dl> -</div> -<div class="section"> -<h2 class="Tools" id="Références">Références</h2> +<h2 id="Références">Références</h2> <dl> <dt><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></dt> @@ -63,42 +49,39 @@ translation_of: Web/CSS <dt>Les concepts majeurs de CSS</dt> <dd>Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment : <ul> - <li><a href="/fr/docs/Web/CSS/Syntaxe">la syntaxe et les formes du langage</a></li> - <li><a href="/fr/docs/Web/CSS/Spécificité">la spécificité</a> et <a href="/fr/docs/Web/CSS/Héritage">l'héritage</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">la syntaxe et les formes du langage</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">la spécificité</a> et <a href="/fr/docs/Web/CSS/inheritance">l'héritage</a></li> <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">les unités et valeurs CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a> et <a href="/fr/docs/CSS/margin_collapsing">la fusion des marges</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le modèle de boîtes</a> et <a href="/fr/docs/CSS/margin_collapsing">la fusion des marges</a></li> <li><a href="/fr/docs/Web/CSS/All_About_The_Containing_Block">le bloc conteneur</a></li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">l'empilement</a> et <a href="/fr/docs/Web/CSS/Block_formatting_context">le contexte de formatage de blocs</a></li> - <li>les concepts de <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>, <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a>, <a href="/fr/docs/Web/CSS/Valeur_utilisée">valeur utilisée</a> et <a href="/fr/docs/Web/CSS/valeur_reelle">valeur réelle</a></li> - <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Les propriétés raccourcies</a></li> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles CSS (<u><em>flexbox</em></u>)</a></li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">l'empilement</a> et <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">le contexte de formatage de blocs</a></li> + <li>les concepts de <a href="/fr/docs/Web/CSS/initial_value">valeur initiale</a>, <a href="/fr/docs/Web/CSS/computed_value">valeur calculée</a>, <a href="/fr/docs/Web/CSS/used_value">valeur utilisée</a> et <a href="/fr/docs/Web/CSS/actual_value">valeur réelle</a></li> + <li><a href="/fr/docs/Web/CSS/Shorthand_properties">Les propriétés raccourcies</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS (<em>flexbox</em>)</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">La grille CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Requêtes_média">Les <em>media queries</em> (requêtes media)</a></li> + <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> (requêtes media)</a></li> <li><a href="/fr/docs/Web/CSS/animation">Les animations</a></li> </ul> </dd> </dl> -<h2 class="Tools" id="Livre_de_recettes">Livre de recettes</h2> +<h2 id="Livre_de_recettes">Livre de recettes</h2> <p><a href="/fr/docs/Web/CSS/Layout_cookbook">Le livre de recettes de disposition CSS</a> contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.</p> -<h2 class="Tools" id="Outils_de_développement_pour_CSS">Outils de développement pour CSS</h2> +<h2 id="Outils_de_développement_pour_CSS">Outils de développement pour CSS</h2> <ul> <li><a href="https://jigsaw.w3.org/css-validator/">Le service de validation CSS du W3C</a> permet de vérifier si une feuille de style CSS est valide.</li> - <li><a href="/fr/docs/Outils">Les outils de développement Firefox</a> permettent de visualiser, d'éditer une feuille de style en direct grâce à <a href="/fr/docs/Outils/Inspecteur">l'inspecteur</a> et à <a href="/fr/docs/Outils/Éditeur_de_style">l'éditeur de styles</a>.</li> + <li><a href="/fr/docs/Tools">Les outils de développement Firefox</a> permettent de visualiser, d'éditer une feuille de style en direct grâce à <a href="/fr/docs/Tools/Page_Inspector">l'inspecteur</a> et à <a href="/fr/docs/Tools/Style_Editor">l'éditeur de styles</a>.</li> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">L'extension Web Developer</a> permet d'éditer le code CSS des sites visités à la volée.</li> - <li><a href="/fr/docs/Web/CSS/Tools">D'autres outils</a>, <a href="https://www.cssdebutant.com/">guide pour les débutants</a>.</li> + <li><a href="/fr/docs/conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244">D'autres outils</a>, <a href="https://www.cssdebutant.com/">guide pour les débutants</a>.</li> </ul> -</div> -</div> -</section> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/Apprendre/CSS">La partie CSS de la section Apprendre le Web.</a></li> - <li>Les langages web sur lesquels CSS est souvent utilisé : <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/SVG">SVG</a>, {{Glossary("XHTML", "",1)}} et <a href="/fr/docs/Glossaire/XML">XML</a>.</li> + <li><a href="/fr/docs/Learn/CSS">La partie CSS de la section Apprendre le Web.</a></li> + <li>Les langages web sur lesquels CSS est souvent utilisé : <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/SVG">SVG</a>, {{Glossary("XHTML", "",1)}} et <a href="/fr/docs/Glossary/XML">XML</a>.</li> <li>Des technologies Mozilla qui emploient CSS : <a href="/fr/docs/Mozilla/Firefox">Firefox</a>, <a href="/fr/docs/Mozilla/Add-ons/Thèmes">les thèmes</a> et <a href="/fr/docs/Mozilla/Thunderbird">extensions Thunderbird</a>.</li> </ul> diff --git a/files/fr/web/css/inline-size/index.html b/files/fr/web/css/inline-size/index.html index 6aec033a54..074f18db37 100644 --- a/files/fr/web/css/inline-size/index.html +++ b/files/fr/web/css/inline-size/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/inline-size <div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher de {{cssxref("block-size")}} qui définit l'autre dimension de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/inline_formatting_context/index.html b/files/fr/web/css/inline_formatting_context/index.html index 80c8ddf694..d03ca3d9dc 100644 --- a/files/fr/web/css/inline_formatting_context/index.html +++ b/files/fr/web/css/inline_formatting_context/index.html @@ -34,8 +34,8 @@ original_slug: Web/CSS/Contexte_de_formatage_en_ligne <p>{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}</p> -<div class="blockIndicator note"> -<p><strong>Note</strong> : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">les propriétés et les valeurs logiques en CSS</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">les propriétés et les valeurs logiques en CSS</a>.</p> </div> <h2 id="Alignement_sur_la_direction_de_bloc_block">Alignement sur la direction de bloc (<em>block</em>)</h2> diff --git a/files/fr/web/css/integer/index.html b/files/fr/web/css/integer/index.html index 5672a7aa12..c0fe723597 100644 --- a/files/fr/web/css/integer/index.html +++ b/files/fr/web/css/integer/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/integer --- <div>{{CSSRef}}</div> -<p>Le type de donnée CSS <strong><code><integer></code></strong> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat")}}. Ce type est un sous-type de {{cssxref("number")}}.</p> +<p>Le type de donnée CSS <strong><code><integer></code></strong> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat()")}}. Ce type est un sous-type de {{cssxref("number")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -17,11 +17,13 @@ translation_of: Web/CSS/integer <p>Toutes les valeurs de type <code><integer></code> sont également des valeurs de type {{cssxref("<number>")}}, bien que l'inverse ne soit pas vrai.</p> -<div class="note"><strong>Note : </strong>Il n'y a pas de bornes à l'ensemble des valeurs de type <code><entier></code> valides. Opera supporte des valeurs jusqu'à 2<sup>15</sup>-1, IE jusqu'à 2<sup>20</sup>-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2<sup>27</sup>-1; 2<sup>27</sup>-1] <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> mais d'autres valeurs comme 2<sup>24</sup>-1 et 2<sup>30</sup>-1 ont aussi été proposées <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Le dernier brouillon ne fait plus apparaître de limite.</div> +<div class="note"> + <p><strong>Note :</strong> Il n'y a pas de bornes à l'ensemble des valeurs de type <code><entier></code> valides. Opera supporte des valeurs jusqu'à 2^15-1, IE jusqu'à 2^20-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2^27</sup>-1; 2^27</sup>-1] <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> mais d'autres valeurs comme 2^24-1 et 2^30-1 ont aussi été proposées <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Le dernier brouillon ne fait plus apparaître de limite.</p> +</div> <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs du type <code><entier></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction <a class="external" href="https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re">partie entière</a>. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation")}} associée à l'animation.</p> +<p>Les valeurs du type <code><entier></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction <a href="https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re">partie entière</a>. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation")}} associée à l'animation.</p> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/isolation/index.html b/files/fr/web/css/isolation/index.html index 7639e5e597..3805c54c08 100644 --- a/files/fr/web/css/isolation/index.html +++ b/files/fr/web/css/isolation/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/isolation <div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété s'avère particulièrement utile avec {{cssxref("mix-blend-mode")}} afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/justify-content/index.html b/files/fr/web/css/justify-content/index.html index 64f81cec98..548aba3f62 100644 --- a/files/fr/web/css/justify-content/index.html +++ b/files/fr/web/css/justify-content/index.html @@ -16,13 +16,11 @@ translation_of: Web/CSS/justify-content <div>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de <code>0</code>, <code>justify-content</code> n'aura aucun effet car il n'y aura plus d'espace disponible.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Alignement « géométrique » */ +<pre class="brush:css no-line-numbers">/* Alignement « géométrique » */ justify-content: center; /* Éléments groupés au centre */ justify-content: start; /* Éléments groupés au début */ justify-content: end; /* Éléments groupés à la fin */ @@ -108,7 +106,7 @@ justify-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#container { +<pre class="brush: css">#container { display: flex; /* Cette valeur peut être changée dans l'exemple */ justify-content: space-between; @@ -121,10 +119,7 @@ justify-content: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html hidden"><div id="container"> <div></div> <div></div> <div></div> @@ -146,15 +141,12 @@ justify-content: unset; <option value="stretch">stretch</option> </select></pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent"); +<pre class="brush: js hidden">var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { document.getElementById("container").style.justifyContent = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/justify-items/index.html b/files/fr/web/css/justify-items/index.html index a5787ac362..419349d270 100644 --- a/files/fr/web/css/justify-items/index.html +++ b/files/fr/web/css/justify-items/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/justify-items <div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'effet de cette propriété sera différent selon le type de disposition utilisé :</p> <ul> @@ -135,9 +133,7 @@ justify-items: unset; <h3 id="CSS">CSS</h3> -<div id="alignment_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -153,7 +149,6 @@ justify-items: unset; color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -196,7 +191,6 @@ justify-items: unset; <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample('Exemples', '500', '500')}}</p> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/justify-self/index.html b/files/fr/web/css/justify-self/index.html index cba1779578..7537fad71c 100644 --- a/files/fr/web/css/justify-self/index.html +++ b/files/fr/web/css/justify-self/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/justify-self <p>La propriété CSS <strong><code>justify-self</code></strong> définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.</p> -<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div <p>L'effet de cette propriété varie selon le mode de disposition utilisé :</p> @@ -127,9 +125,7 @@ justify-self: unset; <h3 id="CSS">CSS</h3> -<div id="alignment_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -145,7 +141,6 @@ justify-self: unset; color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -177,7 +172,6 @@ justify-self: unset; <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample('Exemples', '300', '300')}}</p> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html index 1be4399050..395d6d0e69 100644 --- a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -9,9 +9,9 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb --- <div>{{CSSRef}}</div> -<p class="summary">La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.</p> +<p>La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.</p> -<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p> +<p><img alt="Links displayed inline with separators" src="breadcrumb-navigation.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -39,7 +39,7 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb <p>{{Compat("css.properties.flex")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS</a></li> diff --git a/files/fr/web/css/layout_cookbook/card/index.html b/files/fr/web/css/layout_cookbook/card/index.html index a0a498245b..7e92b24421 100644 --- a/files/fr/web/css/layout_cookbook/card/index.html +++ b/files/fr/web/css/layout_cookbook/card/index.html @@ -11,9 +11,9 @@ original_slug: Web/CSS/Layout_cookbook/Carte --- <p>{{CSSRef}}</p> -<p class="summary">Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p> +<p>Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p> -<p><img alt="Three card components in a row" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p> +<p><img alt="Three card components in a row" src="cards.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -45,16 +45,16 @@ original_slug: Web/CSS/Layout_cookbook/Carte <p>Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.</p> <div class="note"> -<p><strong>Note </strong>: Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p> +<p><strong>Note :</strong> Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p> </div> <h2 id="Méthodes_alternatives">Méthodes alternatives</h2> <p>On pourrait également utiliser <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.</p> -<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p> +<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/CSS_Columns">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p> -<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">la recette sur les colonnes</a> pour observer ces méthodes en action.</p> +<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Column_layouts">la recette sur les colonnes</a> pour observer ces méthodes en action.</p> <h2 id="Accessibilité">Accessibilité</h2> @@ -72,9 +72,9 @@ original_slug: Web/CSS/Layout_cookbook/Carte <p>{{Compat("css.properties.grid-template-rows")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}</li> + <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}}</li> <li><a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.html b/files/fr/web/css/layout_cookbook/center_an_element/index.html index 22e0f3458c..713d277510 100644 --- a/files/fr/web/css/layout_cookbook/center_an_element/index.html +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.html @@ -13,9 +13,9 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element --- <div>{{CSSRef}}</div> -<p class="summary">Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p> +<p>Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p> -<p><img alt="an element centered inside a larger box" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p> +<p><img alt="an element centered inside a larger box" src="cookbook-center.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -26,7 +26,7 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element <p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -53,6 +53,6 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.html b/files/fr/web/css/layout_cookbook/column_layouts/index.html index d0490947ff..8dfa422ffd 100644 --- a/files/fr/web/css/layout_cookbook/column_layouts/index.html +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.html @@ -12,9 +12,9 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p> +<p>Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p> -<p><img alt="three different styles of layouts which have two columns in the container." src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></p> +<p><img alt="three different styles of layouts which have two columns in the container." src="cookbook-multiple-columns.png"></p> <h2 id="Prérequis">Prérequis</h2> @@ -39,7 +39,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p> </div> <p>On utilisera une disposition multi-colonnes lorsque :</p> @@ -59,7 +59,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p> </div> <p>Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur <code>wrap</code> sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.</p> @@ -67,7 +67,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p> </div> <p>On utilisera les boîtes flexibles pour :</p> @@ -85,7 +85,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p> </div> <p>On utiliser les grilles CSS lorsque :</p> @@ -122,7 +122,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Colonnes_CSS">Guide pour les dispositions multi-colonnes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guide pour les dispositions multi-colonnes</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Guide pour les boîtes flexibles (<em>flexbox</em>)</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Guide pour les grilles CSS</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html index 846b912106..ac5e39c3e9 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html @@ -9,10 +9,12 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa --- <p>{{CSSRef}}</p> -<div class="note"><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.<br> -<em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em></div> +<div class="note"> + <p><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.</p> + <p><em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em> +</p></div> -<p class="summary"><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p> +<p><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -27,7 +29,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa <p><em>Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.</em></p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -52,7 +54,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa <p>{{Compat("css.properties.align-items")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><em>Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}</em></li> diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html index 03a3396acc..e5a16b419a 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html @@ -11,14 +11,14 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette --- <div>{{CSSRef}}</div> -<p class="summary">Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p> +<p>Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p> <h2 id="Qu'est-ce_qu'une_«_bonne_»_recette">Qu'est-ce qu'une « bonne » recette ?</h2> <p><strong>Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.</strong> Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.</p> <div class="note"> -<p><strong>Note quant à la traduction et aux recettes en anglais :</strong> Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p> +<p><strong>Note :</strong> Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p> </div> <h2 id="Les_étapes_pour_la_publication">Les étapes pour la publication</h2> @@ -63,7 +63,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette <p>Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section <code>playable-css</code>.</p> -<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Comment centrer un élément</a>.</p> +<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Center_an_element">Comment centrer un élément</a>.</p> <p>Si vous avez créé un <em>fork</em> du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.</p> @@ -85,12 +85,12 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette <h3 id="5._Créer_la_page_sur_MDN">5. Créer la page sur MDN</h3> -<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p> +<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p> <p>Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.</p> <div class="note"> -<p><strong>Note de traduction :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p> +<p><strong>Note :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p> </div> <p>Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.</p> diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html index f28922b563..249e8fa898 100644 --- a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html +++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper --- <div>{{CSSRef}}</div> -<p class="summary">Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p> +<p>Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -20,14 +20,14 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper <p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> -<p dir="ltr" id="docs-internal-guid-30ae4ecd-7fff-36c2-da7d-0fbb6ec4feae">Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p> +<p>Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p> -<p dir="ltr">Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p> +<p>Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p> <h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2> @@ -69,13 +69,11 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper <p>{{Compat("css.properties.grid-template-columns")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{Cssxref("grid-template-columns")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout" id="docs-internal-guid-ae8eafc9-7fff-65b9-8d8c-bb5f1e3c874c">Les grilles CSS sur MDN</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS sur MDN</a></li> <li>Article :<a href="https://css-irl.info/more-flexibility-with-minmax/"> Les grilles CSS, plus de flexibilité avec <code>minmax()</code> (en anglais)</a></li> <li>Article : <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">Isoler des éléments sur une grille CSS (en anglais)</a></li> -</ul> - -<p> </p> +</ul>
\ No newline at end of file diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html index dc96a66da3..f3debbc018 100644 --- a/files/fr/web/css/layout_cookbook/index.html +++ b/files/fr/web/css/layout_cookbook/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/Layout_cookbook --- <div>{{CSSRef}}</div> -<p class="summary">Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p> +<p>Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p> <div class="note"> <p><strong>Note :</strong> Si vous débutez en CSS, nous vous conseillons de consulter <a href="/fr/docs/Apprendre/CSS/CSS_layout">notre module sur l'apprentissage de la disposition en CSS</a>. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.</p> diff --git a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html index 6b76635ff1..98a8a06891 100644 --- a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html +++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html @@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs --- <p>{{CSSRef}}</p> -<p class="summary">Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p> +<p>Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p> -<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="https://mdn.mozillademos.org/files/16255/list-group-badges.png" style="height: 423px; width: 791px;"></p> +<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="list-group-badges.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -22,7 +22,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs <p>{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}</p> -<p class="note"><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p> +<div class="note"> + <p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p> +</div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -44,9 +46,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs <p>{{Compat("css.properties.align-items")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html index 418850ee25..8c2ca3ae1e 100644 --- a/files/fr/web/css/layout_cookbook/media_objects/index.html +++ b/files/fr/web/css/layout_cookbook/media_objects/index.html @@ -9,9 +9,9 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects --- <div>{{CSSRef}}</div> -<p class="summary">Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p> +<p>Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p> +<p><img alt="" src="media-object.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -27,10 +27,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <h2 id="Recette">Recette</h2> -<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p> +<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p> <div class="note"> -<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -49,10 +49,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <p>Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.</p> -<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p> +<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p> <div class="note"> -<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p> </div> <p>Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.</p> @@ -78,8 +78,8 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <ul> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">L'amélioration progressive et les grilles CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Utiliser les zones nommées des grilles</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">L'amélioration progressive et les grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Utiliser les zones nommées des grilles</a></li> <li><code><a href="/fr/docs/Web/CSS/fit-content">fit-content</a></code></li> <li><code><a href="/fr/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html index 506e521b49..eacc793faa 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.html +++ b/files/fr/web/css/layout_cookbook/pagination/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/Layout_cookbook/Pagination --- <p>{{CSSRef}}</p> -<p class="summary">Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p> +<p>Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p> -<p><img alt="Links to sets of pages in a paged listing" src="https://mdn.mozillademos.org/files/16279/pagination.png" style="height: 192px; width: 950px;"></p> +<p><img alt="Links to sets of pages in a paged listing" src="pagination.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -25,7 +25,7 @@ translation_of: Web/CSS/Layout_cookbook/Pagination <p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -67,7 +67,7 @@ translation_of: Web/CSS/Layout_cookbook/Pagination <p>{{Compat("css.properties.column-gap.flex_context")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{Cssxref("justify-content")}}</li> @@ -75,5 +75,5 @@ translation_of: Web/CSS/Layout_cookbook/Pagination <li><em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">Know your ARIA: 'Hidden' vs 'None'</a></em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html"> (en anglais)</a></li> <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)</a></li> <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">Écrire du CSS sans oublier l'accessibilité (en anglais)</a></li> - <li><a href="http://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li> + <li><a href="https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/split_navigation/index.html b/files/fr/web/css/layout_cookbook/split_navigation/index.html index dda4a698fd..aec75bcde2 100644 --- a/files/fr/web/css/layout_cookbook/split_navigation/index.html +++ b/files/fr/web/css/layout_cookbook/split_navigation/index.html @@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée --- <div>{{CSSRef}}</div> -<p class="summary">Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p> +<p>Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p> -<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p> +<p><img alt="Items separated into two groups." src="split-navigation.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -40,7 +40,7 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée <p>{{Compat("css.properties.flex")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Le module de spécification <em>CSS Flexible Box Layout</em></a></li> diff --git a/files/fr/web/css/layout_cookbook/sticky_footers/index.html b/files/fr/web/css/layout_cookbook/sticky_footers/index.html index 683a1039a7..096d514add 100644 --- a/files/fr/web/css/layout_cookbook/sticky_footers/index.html +++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.html @@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant --- <div>{{CSSRef}}</div> -<p class="summary">Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p> +<p>Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p> -<p><img alt="A sticky footer pushed to the bottom of a box" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p> +<p><img alt="A sticky footer pushed to the bottom of a box" src="cookbook-footer.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -70,5 +70,5 @@ original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base des grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Les concepts de base des grilles CSS</a></li> </ul> diff --git a/files/fr/web/css/left/index.html b/files/fr/web/css/left/index.html index 51bffd0e2e..f7a4ed2eb0 100644 --- a/files/fr/web/css/left/index.html +++ b/files/fr/web/css/left/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/left <div>{{EmbedInteractiveExample("pages/css/left.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("position")}}<code>: absolute</code> ou <code>position: fixed</code>), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).</p> <p>Pour les éléments positionnés grâce à {{cssxref("position")}}<code>: relative</code>, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).</p> diff --git a/files/fr/web/css/length-percentage/index.html b/files/fr/web/css/length-percentage/index.html index 6e0d8a9824..149f8bd787 100644 --- a/files/fr/web/css/length-percentage/index.html +++ b/files/fr/web/css/length-percentage/index.html @@ -17,9 +17,9 @@ translation_of: Web/CSS/length-percentage <h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2> -<p>Lorsqu'une valeur de type <code><length-percentage></code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :</p> +<p>Lorsqu'une valeur de type <code><length-percentage></code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc()", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :</p> -<pre class="syntaxbox example-good">width: 200px; +<pre class="brush:css example-good">width: 200px; width: 20%; width: calc(100% - 200px); </pre> diff --git a/files/fr/web/css/length/index.html b/files/fr/web/css/length/index.html index 1927712da9..8cf016dcb5 100644 --- a/files/fr/web/css/length/index.html +++ b/files/fr/web/css/length/index.html @@ -39,28 +39,28 @@ translation_of: Web/CSS/length <dl> <dt><code>cap</code></dt> <dd>Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.</dd> - <dt><a name="ch"><code>ch</code></a></dt> + <dt><code>ch</code></dt> <dd>Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.</dd> - <dt><a name="em"><code>em</code></a></dt> + <dt><code>em</code></dt> <dd> <p>Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police <em>héritée</em> de l'élément.</p> <div class="note"> - <p>Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm/">rythme vertical de la page</a>, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en <strong>em</strong>.</p> + <p><strong>Note :</strong> Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm/">rythme vertical de la page</a>, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en <strong>em</strong>.</p> </div> </dd> - <dt><a name="ex"><code>ex</code></a></dt> + <dt><code>ex</code></dt> <dd>Cette unité représente la <a href="https://fr.wikipedia.org/wiki/Hauteur_d%27x">hauteur d'x</a> de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. <code>1ex ≈ 0.5em</code> dans de nombreuses polices.</dd> <dt><code>ic</code></dt> <dd>Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.</dd> <dt><code>lh</code></dt> <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.</dd> - <dt><a name="rem"><code>rem</code></a></dt> + <dt><code>rem</code></dt> <dd> <p>Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.</p> <div class="note"> - <p>Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité <strong>em</strong>, mais la réalisation est un petit peu plus complexe.</p> + <p><strong>Note :</strong> Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité <strong>em</strong>, mais la réalisation est un petit peu plus complexe.</p> </div> </dd> <dt><code>rlh</code></dt> @@ -76,15 +76,15 @@ translation_of: Web/CSS/length <dl> <dt><code>vb</code></dt> <dd>1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.</dd> - <dt><a name="vh"><code>vh</code></a></dt> + <dt><code>vh</code></dt> <dd>1/100<sup>e</sup> de la hauteur du <em>viewport</em>.</dd> <dt><code>vi</code></dt> <dd>1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.</dd> - <dt><a name="vw"><code>vw</code></a></dt> + <dt><code>vw</code></dt> <dd>1/100<sup>e</sup> de la largeur du <em>viewport</em>.</dd> - <dt><a name="vmin"><code>vmin</code></a></dt> + <dt><code>vmin</code></dt> <dd>1/100<sup>e</sup> du côté le plus petit du <em>viewport</em>.</dd> - <dt><a name="vmax"><code>vmax</code></a></dt> + <dt><code>vmax</code></dt> <dd>1/100<sup>e</sup> du côté le plus grand du <em>viewport</em>.</dd> </dl> @@ -101,27 +101,29 @@ translation_of: Web/CSS/length </div> <dl> - <dt><a name="px"><code>px</code></a></dt> + <dt><code>px</code></dt> <dd>Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.</dd> - <dt><a name="mm"><code>mm</code></a></dt> + <dt><code>mm</code></dt> <dd>Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> <dt><code>Q</code>{{experimental_inline}}</dt> <dd>Un quart de millimètre (1/40<sup>e</sup> de centimètre).</dd> - <dt><a name="cm"><code>cm</code></a></dt> + <dt><code>cm</code></dt> <dd>Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> - <dt><a name="in"><code>in</code></a></dt> + <dt><code>in</code></dt> <dd>Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> - <dt><a name="pt"><code>pt</code></a></dt> + <dt><code>pt</code></dt> <dd>Un point pica (soit 1/72<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> - <dt><a name="pc"><code>pc</code></a></dt> + <dt><code>pc</code></dt> <dd>Un pica (soit 12 points, soit 1/6<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> - <dt><code><a name="mozmm">mozmm</a></code> {{non-standard_inline}}, retiré avec Firefox 59</dt> + <dt><code>mozmm</code> {{non-standard_inline}}, retiré avec Firefox 59</dt> <dd>Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.</dd> </dl> <h2 id="Unités_CSS_et_points_par_pouce">Unités CSS et points par pouce</h2> -<p class="note">L’unité <code>in</code> ne représente pas un pouce physique de l’écran, mais <code>96px</code>. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à <code>96dpi</code>. Sur les périphériques dotés d’une plus grande densité de pixel, <code>1in</code> fera moins d’1 pouce physique. De la même manière, <code>mm</code>, <code>cm</code>, et <code>pt</code> ne sont pas des longueurs absolues.</p> +<div class="note"> + <p><strong>Note :</strong> L’unité <code>in</code> ne représente pas un pouce physique de l’écran, mais <code>96px</code>. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à <code>96dpi</code>. Sur les périphériques dotés d’une plus grande densité de pixel, <code>1in</code> fera moins d’1 pouce physique. De la même manière, <code>mm</code>, <code>cm</code>, et <code>pt</code> ne sont pas des longueurs absolues.</p> +</div> <p>Quelques exemples particuliers :</p> @@ -133,7 +135,7 @@ translation_of: Web/CSS/length <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs du type <code><length></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.</p> +<p>Les valeurs du type <code><length></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation","",1)}} associée à l'animation.</p> <h2 id="Spécifications">Spécifications</h2> @@ -174,7 +176,7 @@ translation_of: Web/CSS/length <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel sur les unités et valeurs CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Référence des unités et valeurs en CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîtes CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel sur les unités et valeurs CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Référence des unités et valeurs en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Model">Modèle de boîtes CSS</a></li> </ul> diff --git a/files/fr/web/css/letter-spacing/index.html b/files/fr/web/css/letter-spacing/index.html index 7dadd4852a..dfd70ca730 100644 --- a/files/fr/web/css/letter-spacing/index.html +++ b/files/fr/web/css/letter-spacing/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/letter-spacing <div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/line-height-step/index.html b/files/fr/web/css/line-height-step/index.html index 2266a177ca..c13c19867d 100644 --- a/files/fr/web/css/line-height-step/index.html +++ b/files/fr/web/css/line-height-step/index.html @@ -23,7 +23,7 @@ line-height-step: 18pt; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><code><a id="<length>" name="<length>"><length></a></code></dt> + <dt><code><length></code></dt> <dd>La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir {{cssxref("<length>")}} pour plus d'informations sur ce type de valeur.</dd> </dl> @@ -33,7 +33,7 @@ line-height-step: 18pt; <h2 id="Exemples">Exemples</h2> -<p id="sect1">Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <code><h1></code> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).</p> +<p>Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <code><h1></code> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).</p> <pre class="brush: css">:root { font-size: 12pt; @@ -47,7 +47,7 @@ h1 { <p>Voici le résultat obtenu avec une capture d'écran :</p> -<p><img alt="How the line-height-step property affects the appearance of text." src="https://mdn.mozillademos.org/files/15257/line-grid-center.png" style="height: 340px; width: 144px;"></p> +<p><img alt="How the line-height-step property affects the appearance of text." src="line-grid-center.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/line-height/index.html b/files/fr/web/css/line-height/index.html index d9ba456e10..3c6f8fcb2d 100644 --- a/files/fr/web/css/line-height/index.html +++ b/files/fr/web/css/line-height/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/line-height <div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css">/* Valeur avec un mot-clé */ @@ -55,13 +53,13 @@ line-height: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="normal" name="normal"><code>normal</code></a></dt> + <dt><code>normal</code></dt> <dd>Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de <code>font-family</code>.</dd> - <dt><a id="number" name="number"><code><number></code></a></dt> + <dt><code><number></code></dt> <dd>La valeur utilisée est <strong>sans unité</strong> (type {{cssxref("<number>")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec <code><number></code>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir <code>line-height</code> et éviter les effets de l'héritage.</dd> - <dt><a id="length" name="length"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>La valeur de longueur (type {{cssxref("<length>")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("<length>")}}. Les valeurs exprimées en <code>em</code> peuvent produire des résultats inattendus.</dd> - <dt><a id="percentage" name="percentage"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("<percentage>")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en <code>em</code>.</dd> <dt><code>-moz-block-height</code> {{non-standard_inline}}</dt> <dd>La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.</dd> diff --git a/files/fr/web/css/list-style-position/index.html b/files/fr/web/css/list-style-position/index.html index ba14939fd8..7b25c5bcc1 100644 --- a/files/fr/web/css/list-style-position/index.html +++ b/files/fr/web/css/list-style-position/index.html @@ -13,17 +13,16 @@ translation_of: Web/CSS/list-style-position <div>{{EmbedInteractiveExample("pages/css/list-style-position.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}.</p> <div class="note"> -<p><strong>Notes :</strong></p> +<p><strong>Note :</strong> <ul> <li>Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>). <a href="https://www.w3.org/TR/html5/rendering.html#lists">Par défaut</a>, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</li> <li>Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec <code>list-style-position: inside</code>. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations.</li> </ul> +</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/list-style-type/index.html b/files/fr/web/css/list-style-type/index.html index 98d23f3195..0e684cba37 100644 --- a/files/fr/web/css/list-style-type/index.html +++ b/files/fr/web/css/list-style-type/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/list-style-type <p>La propriété<strong> <code>list-style-type</code></strong> permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).</p> -<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div <p>La <a href="/fr/docs/Web/CSS/color_value">couleur</a> de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.</p> @@ -59,442 +57,118 @@ list-style-type: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="symbol">{{cssxref("symbols()")}}</a></dt> + <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> + <dd>Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :</dd> + <dt>{{cssxref("symbols()")}}</dt> <dd>Définit un style de puce utilisé.</dd> - <dt><a id="none*"><code>none</code></a></dt> + <dt><code>none</code></dt> <dd>Aucun marqueur n'est affiché.</dd> - <dt><a id="str">{{cssxref("<string>")}}</a></dt> + <dt>{{cssxref("<string>")}}</dt> <dd>La chaîne de caractères indiquée sera utilisée comme puce</dd> - <dt><a id="custom-ident">{{cssxref("custom-ident", "<custom-ident>")}}</a></dt> - <dd>Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :</dd> -</dl> - -<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 20em; -webkit-columns: 20em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;"> <dt><code>disc</code></dt> - <dd> - <ul style="list-style-type: disc;"> - <li>Un disque plein (la valeur par défaut)</li> - </ul> - </dd> + <dd>Un disque plein (la valeur par défaut)</dd> <dt><code>circle</code></dt> - <dd> - <ul style="list-style-type: circle;"> - <li>Un cercle vide</li> - </ul> - </dd> + <dd>Un cercle vide</dd> <dt><code>square</code></dt> - <dd> - <ul style="list-style-type: square;"> - <li>Un carré plein</li> - </ul> - </dd> + <dd>Un carré plein</dd> <dt><code>decimal</code></dt> - <dd> - <ul style="list-style-type: decimal;"> - <li>Des nombres en base 10</li> - <li>Commençant par 1</li> - </ul> - </dd> + <dd>Des nombres décimaux, commençant par 1.</dd> <dt><code>cjk-decimal</code> {{experimental_inline}}</dt> - <dd> - <ul> - <li>Nombres décimaux Han</li> - <li>E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇</li> - </ul> - </dd> + <dd>Des nombres décimaux Han.</dd> <dt><code>decimal-leading-zero</code></dt> - <dd> - <ul style="list-style-type: decimal-leading-zero;"> - <li>Nombres en base 10</li> - <li>Avec des 0 devant</li> - <li>E.g. 01, 02, 03, … 98, 99</li> - </ul> - </dd> + <dd>Des nombres décimaux complétés par des 0.</dd> <dt><code>lower-roman</code></dt> - <dd> - <ul style="list-style-type: lower-roman;"> - <li>Nombres romains minuscules</li> - <li>Par exemple i, ii, iii, iv, v…</li> - </ul> - </dd> + <dd>Des chiffres romains en minuscules.</dd> <dt><code>upper-roman</code></dt> - <dd> - <ul style="list-style-type: upper-roman;"> - <li>Nombres romains en majuscules</li> - <li>Par exemple I, II, III, IV, V…</li> - </ul> - </dd> + <dd>Des chiffres romains en majuscules.</dd> <dt><code>lower-greek</code></dt> - <dd> - <ul style="list-style-type: lower-greek;"> - <li>Lettres grecques minuscules</li> - <li>alpha, beta, gamma…</li> - <li>Par exemple α, β, γ…</li> - </ul> - </dd> - <dt><code>lower-alpha</code></dt> - <dt><code>lower-latin</code></dt> - <dd> - <ul style="list-style-type: lower-alpha;"> - <li>Lettres ASCII en minuscules</li> - <li>Par exemple a, b, c, … z</li> - <li><code>lower-latin</code> n'est pas pris en charge par les versions avant IE7</li> - <li>Voir le tableau de compatibilité</li> - </ul> - </dd> - <dt><code>upper-alpha</code></dt> - <dt><code>upper-latin</code></dt> - <dd> - <ul style="list-style-type: upper-alpha;"> - <li>Lettres ASCII en majuscules</li> - <li>Par exemple A, B, C, … Z</li> - <li><code>upper-latin</code> n'est pas pris en charge par les versions avant IE7</li> - </ul> - </dd> - <dt><code>arabic-indic</code></dt> - <dt><code>-moz-arabic-indic</code></dt> - <dd> - <ul style="list-style-type: -moz-arabic-indic; list-style-type: arabic-indic;"> - <li>Exemple</li> - </ul> - </dd> + <dd>Des lettres grecques en minuscules.</dd> + <dt><code>lower-alpha</code>, <code>lower-latin</code></dt> + <dd>Des lettres ASCII en minuscules.</dd> + <dt><code>upper-alpha</code>, <code>upper-latin</code></dt> + <dd>Des lettres ASCII en majuscules.</dd> + <dt><code>arabic-indic</code>, <code>-moz-arabic-indic</code></dt> + <dd>Des nombres arabo-indiens.</dd> <dt><code>armenian</code></dt> - <dd> - <ul style="list-style-type: armenian;"> - <li>Système de numérotation arménien</li> - <li>(ayb/ayp, ben/pen, gim/keem…</li> - </ul> - </dd> - <dt><code>bengali</code></dt> - <dt><code>-moz-bengali</code></dt> - <dd> - <ul style="list-style-type: -moz-bengali; list-style-type: bengali;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>cambodian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: cambodian;"> - <li>Exemple</li> - <li>est un synonyme pour <code>khmer</code></li> - </ul> - </dd> - <dt><code>cjk-earthly-branch</code></dt> - <dt><code>-moz-cjk-earthly-branch</code></dt> - <dd> - <ul style="list-style-type: -moz-cjk-earthly-branch; list-style-type: cjk-earthly-branch;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>cjk-heavenly-stem</code></dt> - <dt><code>-moz-cjk-heavenly-stem</code></dt> - <dd> - <ul style="list-style-type: -moz-cjk-heavenly-stem; list-style-type: cjk-heavenly-stem;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation arménienne traditionnelle.</dd> + <dt><code>bengali</code>, <code>-moz-bengali</code></dt> + <dd>La numérotation bengali.</dd> + <dt><code>cambodian</code>/<code>khmer</code></dt> + <dd>La numérotation cambodgienne/khmer.</dd> + <dt><code>cjk-earthly-branch</code>, <code>-moz-cjk-earthly-branch</code></dt> + <dd>Des nombres ordinaux Han de la « branche terrestre ».</dd> + <dt><code>cjk-heavenly-stem</code>, <code>-moz-cjk-heavenly-stem</code></dt> + <dd>Des nombres ordinaux Han de la « souche céleste ».</dd> <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: cjk-ideographic;"> - <li>Identique à <code>trad-chinese-informal</code></li> - <li>E.g. 一萬一千一百一十一</li> - </ul> - </dd> - <dt><code>devanagari</code></dt> - <dt><code>-moz-devanagari</code></dt> - <dd> - <ul style="list-style-type: -moz-devanagari; list-style-type: devanagari;"> - <li>Exemple</li> - </ul> - </dd> + <dd>Identique à <code>trad-chinese-informal</code>.</dd> + <dt><code>devanagari</code>, <code>-moz-devanagari</code></dt> + <dd>La numérotation devanagari.</dd> <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: ethiopic-numeric;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation éthiopienne.</dd> <dt><code>georgian</code></dt> - <dd> - <ul style="list-style-type: georgian;"> - <li>Système de numérotation géorgien</li> - <li>Par exemple an, ban, gan, … he, tan, in…</li> - </ul> - </dd> - <dt><code>gujarati</code></dt> - <dt><code>-moz-gujarati</code></dt> - <dd> - <ul style="list-style-type: -moz-gujarati; list-style-type: gujarati;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>gurmukhi</code></dt> - <dt><code>-moz-gurmukhi</code></dt> - <dd> - <ul style="list-style-type: -moz-gurmukhi; list-style-type: gurmukhi;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation géorgienne traditionnelle.</dd> + <dt><code>gujarati</code>, <code>-moz-gujarati</code></dt> + <dd>La numérotation gujarati.</dd> + <dt><code>gurmukhi</code>, <code>-moz-gurmukhi</code></dt> + <dd>La numérotation gurmukhi.</dd> <dt><code>hebrew</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hebrew;"> - <li>Système de numérotation hébreux</li> - </ul> - </dd> + <dd>La numérotation hébraïque traditionnelle</dd> <dt><code>hiragana</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hiragana;"> - <li>あ, い, う, え, お, か, き , …</li> - <li>(Japonais)</li> - </ul> - </dd> + <dd>Le lettrage lexicographique hiragana.</dd> <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hiragana-iroha;"> - <li>い, ろ, は, に, ほ, へ, と …</li> - <li>{{interwiki('wikipedia', 'Iroha')}} est l'ancien ordre japonais pour les syllabes.</li> - </ul> - </dd> + <dd>Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} hiragana.</dd> <dt><code>japanese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: japanese-formal;"> - <li>Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.</li> - <li>E.g., 壱萬壱阡壱百壱拾壱</li> - <li>Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres</li> - </ul> - </dd> + <dd>La numérotation japonaise formelle utilisée pour les documents financiers ou légaux. Les kanjis sont conçus afin de ne pas pouvoir être modifié pour ressembler à un autre.</dd> <dt><code>japanese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: japanese-informal;"> - <li>Système de numérotation japonais informel</li> - </ul> - </dd> - <dt><code>kannada</code></dt> - <dt><code>-moz-kannada</code></dt> - <dd> - <ul style="list-style-type: -moz-kannada; list-style-type: kannada;"> - <li>Exemple</li> - </ul> - </dd> - <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: katakana;"> - <li>ア, イ, ウ, エ, オ, カ, キ, …</li> - <li>(Japonais)</li> - </ul> - </dd> + <dd>La numérotation japonaise informelle.</dd> + <dt><code>kannada</code>, <code>-moz-kannada</code></dt> + <dd>La numérotation kannada.</dd> + <dt><code>katakana</code> {{experimental_inline}}</dt> + <dd>Le lettrage lexicographique katakana.</dd> <dt><code>katakana-iroha</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: katakana-iroha;"> - <li>イ, ロ, ハ, ニ, ホ, ヘ, ト, …</li> - <li>{{interwiki('wikipedia', 'Iroha')}} correspond à l'ancien ordre japonais pour les syllabes.</li> - </ul> - </dd> - <dt><code>khmer</code></dt> - <dt><code>-moz-khmer</code></dt> - <dd> - <ul style="list-style-type: -moz-khmer; list-style-type: khmer;"> - <li>Exemple</li> - </ul> - </dd> + <dd>Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} katakana.</dd> <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hangul-formal;"> - <li>Système de numérotation coréen hangul .</li> - <li>E.g., 일만 일천일백일십일</li> - </ul> - </dd> + <dd>La numérotation coréenne hangul.</dd> <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hanja-formal;"> - <li>Système de numérotation formel coréen Han.</li> - <li>E.g. 壹萬 壹仟壹百壹拾壹</li> - </ul> - </dd> + <dd>La numérotation formelle coréenne Han.</dd> <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hanja-informal;"> - <li>Système de numérotation coréen hanja numbering.</li> - <li>E.g., 萬 一千百十一</li> - </ul> - </dd> - <dt><code>lao</code></dt> - <dt><code>-moz-lao</code></dt> - <dd> - <ul style="list-style-type: -moz-lao; list-style-type: lao;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation coréenne hanja.</dd> + <dt><code>lao</code>, <code>-moz-lao</code></dt> + <dd>La numérotation laotienne.</dd> <dt><code>lower-armenian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: lower-armenian;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>malayalam</code></dt> - <dt><code>-moz-malayalam</code></dt> - <dd> - <ul style="list-style-type: -moz-malayalam; list-style-type: malayalam;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation arménienne en minuscules.</dd> + <dt><code>malayalam</code>, <code>-moz-malayalam</code></dt> + <dd>La numérotation Malayalam.</dd> <dt><code>mongolian</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: mongolian;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>myanmar</code></dt> - <dt><code>-moz-myanmar</code></dt> - <dd> - <ul style="list-style-type: -moz-myanmar; list-style-type: myanmar;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>oriya</code></dt> - <dt><code>-moz-oriya</code></dt> - <dd> - <ul style="list-style-type: -moz-oriya; list-style-type: oriya;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>persian</code> {{experimental_inline}}</dt> - <dt><code>-moz-persian</code></dt> - <dd> - <ul style="list-style-type: -moz-persian; list-style-type: persian;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation mongolienne.</dd> + <dt><code>myanmar</code>, <code>-moz-myanmar</code></dt> + <dd>La numérotation birmane.</dd> + <dt><code>oriya</code>, <code>-moz-oriya</code></dt> + <dd>La numérotation Oriya.</dd> + <dt><code>persian</code> {{experimental_inline}}, <code>-moz-persian</code></dt> + <dd>La numérotation perse.</dd> <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: simp-chinese-formal;"> - <li>Système de numérotation formel chinois simplifié.</li> - <li>E.g. 壹万壹仟壹佰壹拾壹</li> - </ul> - </dd> + <dd>La numérotation formelle en chinois simplifié.</dd> <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: simp-chinese-informal;"> - <li>Système de numérotation informel chinois simplifié.</li> - <li>E.g. 一万一千一百一十一</li> - </ul> - </dd> - <dt><code>tamil</code> {{experimental_inline}}</dt> - <dt><code>-moz-tamil</code></dt> - <dd> - <ul style="list-style-type: -moz-tamil; list-style-type: tamil;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>telugu</code></dt> - <dt><code>-moz-telugu</code></dt> - <dd> - <ul style="list-style-type: -moz-telugu; list-style-type: telugu;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>thai</code></dt> - <dt><code>-moz-thai</code></dt> - <dd> - <ul style="list-style-type: -moz-thai; list-style-type: thai;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation informelle en chinois simplifié.</dd> + <dt><code>tamil</code> {{experimental_inline}}, <code>-moz-tamil</code></dt> + <dd>La numérotation tamoule.</dd> + <dt><code>telugu</code>, <code>-moz-telugu</code></dt> + <dd>La numérotation Telugu.</dd> + <dt><code>thai</code>, <code>-moz-thai</code></dt> + <dd>La numérotation thaïlandaise.</dd> <dt><code>tibetan</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: tibetan;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation tibétaine.</dd> <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: trad-chinese-formal;"> - <li>Système de numérotation formel chinois traditionnel.</li> - <li>E.g. 壹萬壹仟壹佰壹拾壹</li> - </ul> - </dd> + <dd>La numérotation formelle en chinois traditionnel.</dd> <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: trad-chinese-informal;"> - <li>Système de numérotation informel chinois traditionnel.</li> - <li>E.g. 一萬一千一百一十一</li> - </ul> - </dd> + <dd>La numérotation informelle en chinois traditionnel.</dd> <dt><code>upper-armenian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: upper-armenian;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation arménienne traditionnelle en majuscules.</dd> <dt><code>disclosure-open</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: disclosure-open;"> - <li>Symbole indiquant qu'un <em>widget</em> (comme {{HTMLElement("details")}}) est ouvert.</li> - </ul> - </dd> + <dd>Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est déplié/révélé.</dd> <dt><code>disclosure-closed</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: disclosure-closed;"> - <li>Symbole indiquant qu'un <em>widget</em> (comme {{HTMLElement("details")}}) est fermé.</li> - </ul> - </dd> -</dl> - -<h3 id="Extensions_non-standards">Extensions non-standards</h3> - -<p>D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.</p> - -<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 16em; -webkit-columns: 16em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;"> - <dt><code>-moz-ethiopic-halehame</code></dt> - <dd> - <ul style="list-style-type: -moz-ethiopic-halehame;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>-moz-ethiopic-halehame-am</code></dt> - <dd> - <ul style="list-style-type: -moz-ethiopic-halehame-am;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>ethiopic-halehame-ti-er</code></dt> - <dt><code>-moz-ethiopic-halehame-ti-er</code></dt> - <dd> - <ul style="list-style-type: -moz-ethiopic-halehame-ti-er;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>ethiopic-halehame-ti-et</code></dt> - <dt><code>-moz-ethiopic-halehame-ti-et</code></dt> - <dd> - <ul style="list-style-type: -moz-ethiopic-halehame-ti-et;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>hangul</code></dt> - <dt><code>-moz-hangul</code></dt> - <dd> - <ul style="list-style-type: -moz-hangul;"> - <li>Exemple</li> - <li>Exemple</li> - <li>Exemple</li> - </ul> - </dd> - <dt><code>hangul-consonant</code></dt> - <dt><code>-moz-hangul-consonant</code></dt> - <dd> - <ul style="list-style-type: -moz-hangul-consonant;"> - <li>Exemple</li> - <li>Exemple</li> - <li>Exemple</li> - </ul> - </dd> - <dt><code>urdu</code></dt> - <dt><code>-moz-urdu</code></dt> - <dd> - <ul style="list-style-type: -moz-urdu;"> - <li>Exemple</li> - </ul> - </dd> + <dd>Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est replié/masqué.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/list-style/index.html b/files/fr/web/css/list-style/index.html index 1bec8385a9..8022402371 100644 --- a/files/fr/web/css/list-style/index.html +++ b/files/fr/web/css/list-style/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/list-style <div>{{EmbedInteractiveExample("pages/css/list-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</p> </div> diff --git a/files/fr/web/css/list_of_proprietary_css_features/index.html b/files/fr/web/css/list_of_proprietary_css_features/index.html index ecc4f646e7..68f7371faa 100644 --- a/files/fr/web/css/list_of_proprietary_css_features/index.html +++ b/files/fr/web/css/list_of_proprietary_css_features/index.html @@ -11,25 +11,20 @@ original_slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires <p>{{CSSRef}}{{Draft}}</p> <div class="note"> -<p><strong>Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.</strong></p> +<p><strong>Note :</strong> Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.</strong></p> </div> <div class="warning"> -<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p> +<p><strong>Attention :</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p> <ul> - <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Les extensions Microsoft à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Les extensions Mozilla à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Les extensions WebKit à CSS</a></li> </ul> </div> -<div style="margin: 1em 0px; padding: 1em; background-color: rgb(255, 255, 204); text-align: center;"><strong>BROUILLON</strong> - -<div style="font-size: x-small;">Cette page est incomplète.</div> -</div> - -<p>Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir <a href="/fr/docs/Web/CSS/Implémentation_des_Brouillons_CSS" title="en/CSS/Draft_Implementations_of_CSS_Features">Implémentation des fonctionnalités CSS à l'état de brouillon</a> pour une liste de ces dernières).</p> +<p>Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir <a href="/fr/docs/conflicting/Web/CSS/Mozilla_Extensions" title="en/CSS/Draft_Implementations_of_CSS_Features">Implémentation des fonctionnalités CSS à l'état de brouillon</a> pour une liste de ces dernières).</p> <h2 id="Gecko">Gecko</h2> @@ -38,11 +33,11 @@ original_slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires <ul> <li>{{ Cssxref("-moz-force-broken-image-icon") }}</li> <li>{{ Cssxref("-moz-image-region") }}</li> - <li>{{ Cssxref("-moz-margin-end") }}</li> - <li>{{ Cssxref("-moz-margin-start") }}</li> + <li>{{ Cssxref("margin-inline-end") }}</li> + <li>{{ Cssxref("margin-inline-start") }}</li> <li>{{ Cssxref("-moz-orient") }}</li> - <li>{{ Cssxref("-moz-padding-end") }}</li> - <li>{{ Cssxref("-moz-padding-start") }}</li> + <li>{{ Cssxref("padding-inline-end") }}</li> + <li>{{ Cssxref("padding-inline-start") }}</li> <li>{{ Cssxref("-moz-stack-sizing") }}</li> <li>{{ Cssxref("-moz-window-shadow") }}</li> </ul> diff --git a/files/fr/web/css/margin-block-end/index.html b/files/fr/web/css/margin-block-end/index.html index f73899d6f9..92547fd248 100644 --- a/files/fr/web/css/margin-block-end/index.html +++ b/files/fr/web/css/margin-block-end/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/margin-block-end <p>La propriété <strong><code>margin-block-end</code></strong> définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p> -<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div <p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p> diff --git a/files/fr/web/css/margin-block-start/index.html b/files/fr/web/css/margin-block-start/index.html index 571538de48..a78bcd1869 100644 --- a/files/fr/web/css/margin-block-start/index.html +++ b/files/fr/web/css/margin-block-start/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-block-start <div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-bottom/index.html b/files/fr/web/css/margin-bottom/index.html index 2602f07e18..a984e60431 100644 --- a/files/fr/web/css/margin-bottom/index.html +++ b/files/fr/web/css/margin-bottom/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/margin-bottom <div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété n'a aucun effet sur les éléments en ligne (<em>inline</em>) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-inline-end/index.html b/files/fr/web/css/margin-inline-end/index.html index 6b51b1c17e..d5f5efa20b 100644 --- a/files/fr/web/css/margin-inline-end/index.html +++ b/files/fr/web/css/margin-inline-end/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-inline-end <div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-inline-start/index.html b/files/fr/web/css/margin-inline-start/index.html index 0a5e71337a..4a72562316 100644 --- a/files/fr/web/css/margin-inline-start/index.html +++ b/files/fr/web/css/margin-inline-start/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-inline-start <div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-left/index.html b/files/fr/web/css/margin-left/index.html index ace267defb..b0791c0906 100644 --- a/files/fr/web/css/margin-left/index.html +++ b/files/fr/web/css/margin-left/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/margin-left <div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/Fusion_des_marges"><em>la fusion de marges</em></a>.</p> +<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"><em>la fusion de marges</em></a>.</p> <p>Dans certains cas où les dimensions sont sur-contraintes (autrement dit quand <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, la taille de la zone de contenu et <code>margin-right</code> sont toutes définies), <code>margin-left</code> est ignorée. La valeur calculée sera la même que si <code>auto</code> avait été utilisée.</p> diff --git a/files/fr/web/css/margin-right/index.html b/files/fr/web/css/margin-right/index.html index b3ca53336d..cf82405f56 100644 --- a/files/fr/web/css/margin-right/index.html +++ b/files/fr/web/css/margin-right/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/margin-right <div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/Fusion_des_marges"><em>la fusion de marges</em></a>.</p> +<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"><em>la fusion de marges</em></a>.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-top/index.html b/files/fr/web/css/margin-top/index.html index ba16eebe07..c122bc0e39 100644 --- a/files/fr/web/css/margin-top/index.html +++ b/files/fr/web/css/margin-top/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/margin-top <div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (<em>inline</em>) tels que {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin/index.html b/files/fr/web/css/margin/index.html index 628251e76f..16beec5c1d 100644 --- a/files/fr/web/css/margin/index.html +++ b/files/fr/web/css/margin/index.html @@ -16,12 +16,10 @@ translation_of_original: Web/CSS/margin-new <div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les marges haute et basse n'ont aucun effet sur les élements en ligne (<em>inline</em>) qui ne sont pas <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">remplacés</a> (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).</p> <div class="note"> -<p><strong>Note : </strong>Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p> +<p><strong>Note :</strong> Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -58,11 +56,11 @@ margin: unset; <p>Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :</p> <dl> - <dt><a id="length" name="length"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("<length>")}}.</dd> - <dt><a id="percentage" name="percentage"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la <strong>largeur</strong> du bloc englobant. On peut utiliser des valeurs négatives.</dd> - <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dt><code>auto</code></dt> <dd><code>auto </code>est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, <code>div { width:50%; margin:0 auto; }</code> permet de centrer un conteneur <code>div</code> horizontalement).</dd> </dl> @@ -135,7 +133,7 @@ margin: auto; /* boîte centrée horizontalement */ <h3 id="Fusion_des_marges">Fusion des marges</h3> -<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article sur la fusion des marges</a>.</p> +<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">l'article sur la fusion des marges</a>.</p> <h2 id="Spécifications">Spécifications</h2> @@ -180,7 +178,7 @@ margin: auto; /* boîte centrée horizontalement */ <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="/fr/docs/Web/CSS/Fusion_des_marges">Fusion des marges</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Fusion des marges</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte CSS</a></li> <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li> </ul> diff --git a/files/fr/web/css/mask-border-outset/index.html b/files/fr/web/css/mask-border-outset/index.html index 2f4946c56e..3174b76051 100644 --- a/files/fr/web/css/mask-border-outset/index.html +++ b/files/fr/web/css/mask-border-outset/index.html @@ -59,7 +59,7 @@ mask-border-outset: unset; {{csssyntax}} -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/mask-border-repeat/index.html b/files/fr/web/css/mask-border-repeat/index.html index eb7c528638..dce62d1c3e 100644 --- a/files/fr/web/css/mask-border-repeat/index.html +++ b/files/fr/web/css/mask-border-repeat/index.html @@ -53,7 +53,7 @@ mask-border-repeat: unset; {{csssyntax}} -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/mask-border-slice/index.html b/files/fr/web/css/mask-border-slice/index.html index 2a76433cc7..c0b1482f6d 100644 --- a/files/fr/web/css/mask-border-slice/index.html +++ b/files/fr/web/css/mask-border-slice/index.html @@ -14,14 +14,14 @@ translation_of: Web/CSS/mask-border-slice <p>Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.</p> -<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p> +<p><a href="border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="border-image-slice.png"></a></p> <p>Le diagramme ci-avant illustre l'emplacement de chaque région.</p> <ul> - <li>Les zones de 1 à 4 sont <a id="corner-regions" name="corner-regions">les zones aux coins</a>. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.</li> - <li>Les zones 5 à 8 sont <a id="edge-regions" name="edge-regions">les zones de côtés</a>. Ces zones peuvent être <a href="/fr/docs/Web/CSS/mask-border-repeat">répétées, redimensionnées, ou modifiées</a> afin que le masque de bordule final aient les mêmes dimensions que l'élément.</li> - <li>La zone 9 est <a id="middle-region" name="middle-region">la zone centrale</a>. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé <code>fill</code> est utilisé.</li> + <li>Les zones de 1 à 4 sont les zones aux coins. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.</li> + <li>Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être <a href="/fr/docs/Web/CSS/mask-border-repeat">répétées, redimensionnées, ou modifiées</a> afin que le masque de bordule final aient les mêmes dimensions que l'élément.</li> + <li>La zone 9 est la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé <code>fill</code> est utilisé.</li> </ul> <p>Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final.</p> @@ -103,5 +103,5 @@ mask-border-slice: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies#Quelques_cas_aux_limites_épineux">Description illustrée de la syntaxe pouvant couvrir de 1 à 4 valeurs</a></li> + <li><a href="/fr/docs/Web/CSS/Shorthand_properties#quelques_cas_aux_limites_%c3%a9pineux">Description illustrée de la syntaxe pouvant couvrir de 1 à 4 valeurs</a></li> </ul> diff --git a/files/fr/web/css/mask-border-source/index.html b/files/fr/web/css/mask-border-source/index.html index f03f82be19..68cd550c2b 100644 --- a/files/fr/web/css/mask-border-source/index.html +++ b/files/fr/web/css/mask-border-source/index.html @@ -46,7 +46,7 @@ mask-border-source: unset; <p>Voir la page {{cssxref("mask-border")}}.</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/mask-border-width/index.html b/files/fr/web/css/mask-border-width/index.html index ddeb57ee97..9cd78bde87 100644 --- a/files/fr/web/css/mask-border-width/index.html +++ b/files/fr/web/css/mask-border-width/index.html @@ -68,7 +68,7 @@ mask-border-width: unset; {{csssyntax}} -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/mask-border/index.html b/files/fr/web/css/mask-border/index.html index 062f768532..f2faaaf334 100644 --- a/files/fr/web/css/mask-border/index.html +++ b/files/fr/web/css/mask-border/index.html @@ -1,19 +1,14 @@ --- title: mask-border slug: Web/CSS/mask-border -tags: - - CSS - - Experimental - - Propriété - - Propriété raccourcie - - Reference translation_of: Web/CSS/mask-border +browser-compat: css.properties.mask-border --- <div>{{cssref}}{{SeeCompatTable}}</div> <p>La propriété CSS <strong><code>mask-border</code></strong> permet de créer un masque le long de la bordure d'un élément.</p> -<p>Cette propriété est une propriété <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">raccourcie</a> pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>.</p> +<p>Cette propriété est une propriété <a href="/fr/docs/Web/CSS/Shorthand_properties">raccourcie</a> pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur <a href="/fr/docs/Web/CSS/initial_value">valeur initiale</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -57,7 +52,7 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; <p>Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png" style="height: 90px; width: 90px;"></p> +<p><img alt="" src="mask-border-diamonds.png"></p> <h4 id="HTML">HTML</h4> @@ -88,27 +83,10 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; <p>{{EmbedLiveSample("Image_matricielle_(bitmap)")}}</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">Commentairezs</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateursEdit">Compatibilité des navigateurs<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image$edit#Browser_compatibility" rel="nofollow, noindex"><span>Edit</span></a></h2> - -<p><span>TBD</span></p> +<h2 id="spécifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p>
\ No newline at end of file diff --git a/files/fr/web/css/mask-clip/index.html b/files/fr/web/css/mask-clip/index.html index 0b10fad9fb..9dad26fc80 100644 --- a/files/fr/web/css/mask-clip/index.html +++ b/files/fr/web/css/mask-clip/index.html @@ -77,7 +77,7 @@ mask-clip: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[10]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; background-color: #8cffa0; diff --git a/files/fr/web/css/mask-composite/index.html b/files/fr/web/css/mask-composite/index.html index 19bb9fcd47..33b5bc3f26 100644 --- a/files/fr/web/css/mask-composite/index.html +++ b/files/fr/web/css/mask-composite/index.html @@ -51,7 +51,7 @@ mask-composite: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[7]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; background-color: #8cffa0; @@ -65,10 +65,7 @@ mask-composite: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="masked"> +<pre class="brush: html hidden"><div id="masked"> </div> <select id="compositeMode"> <option value="add">add</option> @@ -78,14 +75,11 @@ mask-composite: unset; </select> </pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var clipBox = document.getElementById("compositeMode"); +<pre class="brush: js hidden">var clipBox = document.getElementById("compositeMode"); clipBox.addEventListener("change", function (evt) { document.getElementById("masked").style.maskClip = evt.target.value; }); </pre> -</div> <p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p> diff --git a/files/fr/web/css/mask-mode/index.html b/files/fr/web/css/mask-mode/index.html index dad074e561..f189643576 100644 --- a/files/fr/web/css/mask-mode/index.html +++ b/files/fr/web/css/mask-mode/index.html @@ -55,7 +55,7 @@ mask-mode: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[7]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; background: blue linear-gradient(red, blue); @@ -81,7 +81,7 @@ mask-mode: unset; <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; highlight[7]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; background-color: #8cffa0; diff --git a/files/fr/web/css/mask-origin/index.html b/files/fr/web/css/mask-origin/index.html index be91e88ee3..85bf81428e 100644 --- a/files/fr/web/css/mask-origin/index.html +++ b/files/fr/web/css/mask-origin/index.html @@ -75,7 +75,7 @@ mask-origin: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[9]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; margin: 10px; diff --git a/files/fr/web/css/mask-position/index.html b/files/fr/web/css/mask-position/index.html index afbcb38828..43d8db0a4a 100644 --- a/files/fr/web/css/mask-position/index.html +++ b/files/fr/web/css/mask-position/index.html @@ -55,7 +55,7 @@ mask-position: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[13]">#wrapper { +<pre class="brush: css">#wrapper { border: 1px solid black; width: 250px; height: 250px; @@ -72,10 +72,7 @@ mask-position: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="wrapper"> +<pre class="brush: html hidden"><div id="wrapper"> <div id="masked"> </div> </div> @@ -91,14 +88,11 @@ mask-position: unset; </select> </pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var maskPosition = document.getElementById("maskPosition"); +<pre class="brush: js hidden">var maskPosition = document.getElementById("maskPosition"); maskPosition.addEventListener("change", function (evt) { document.getElementById("masked").style.maskPosition = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/mask-repeat/index.html b/files/fr/web/css/mask-repeat/index.html index 54e6e8e75a..76dd23f6a1 100644 --- a/files/fr/web/css/mask-repeat/index.html +++ b/files/fr/web/css/mask-repeat/index.html @@ -44,8 +44,7 @@ mask-repeat: unset; <dl> <dt><code><repeat-style></code></dt> - <dd>La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :</dd> - <dd> + <dd>La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs : <table class="standard-table"> <tbody> <tr> @@ -78,8 +77,7 @@ mask-repeat: unset; </tr> </tbody> </table> - Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :</dd> - <dd> + Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés : <table class="standard-table"> <tbody> <tr> diff --git a/files/fr/web/css/mask-size/index.html b/files/fr/web/css/mask-size/index.html index 5af74bf8ab..bad865b3cb 100644 --- a/files/fr/web/css/mask-size/index.html +++ b/files/fr/web/css/mask-size/index.html @@ -45,7 +45,9 @@ mask-size: initial; mask-size: unset; </pre> -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après <code>mask-size</code>, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après <code>mask-size</code>, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -75,9 +77,9 @@ mask-size: unset; <dd>Une valeur de pourcentage ({{cssxref("<percentage>")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (<em>padding</em>) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.</dd> <dt><code>auto</code></dt> <dd>Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.</dd> - <dt><a><code>contain</code></a></dt> + <dt><code>contain</code></dt> <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre.</dd> - <dt><a id="cover"><code>cover</code></a></dt> + <dt><code>cover</code></dt> <dd>Un mot-clé qui se comporte à l'inverse de <code>contain</code>. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche).</dd> </dl> diff --git a/files/fr/web/css/mask-type/index.html b/files/fr/web/css/mask-type/index.html index db81ba603e..d589c35f37 100644 --- a/files/fr/web/css/mask-type/index.html +++ b/files/fr/web/css/mask-type/index.html @@ -41,111 +41,65 @@ mask-type: unset; <h2 id="Exemples">Exemples</h2> -<p>Prenons comme masque le rectangle suivant :</p> +<h3 id="setting_an_alpha_mask">Définir un masque alpha</h3> -<pre class="brush: html"><rect x="10" y="10" width="80" height="80" - fill="red" fill-opacity="0.7" /></pre> - -<div class="hidden"> -<h3 id="mask">mask</h3> - -<pre class="brush: html"><svg width="100" height="100"> - <rect x="10" y="10" width="80" height="80" - fill="red" fill-opacity="0.7"/> -</svg></pre> -</div> - -<div>Le voici : {{EmbedLiveSample('mask', '100%', '100')}}</div> - -<p>Appliquons le à cette boîte :</p> - -<div class="hidden"> -<h3 id="box">box</h3> - -<pre class="brush: css">.redsquare { - height: 100px; - width: 100px; - background-color: rgb(128, 128, 128); - border: solid 1px black; -} -</pre> +<h4 id="HTML">HTML</h4> <pre class="brush: html"><div class="redsquare"></div> -</pre> -</div> - -<div>{{EmbedLiveSample('box', '100%', '120')}}</div> - -<p>Voici le résultat, si votre navigateur prend en charge cette propriété, avec les deux valeurs de <code>mask-type</code> appliquée à l'élément {{SVGElement("mask")}}, on aura deux carrés différents :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>mask-type: alpha;</code></td> - <td><code>mask-type: luminance;</code></td> - </tr> - <tr> - <td> - <div class="hidden" id="maskalpha"> - <pre class="brush: html"> -<div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskContentUnits="objectBoundingBox" - style="mask-type:alpha"> + style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> -</svg> -</pre> +</svg></pre> - <pre class="brush: css"> -.redsquare { +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); -} -</pre> - </div> - - <div>{{EmbedLiveSample('maskalpha', '100%', '102')}}</div> - </td> - <td> - <div class="hidden" id="maskluminance"> - <pre class="brush: html"> -<div class="redsquare"></div> +}</pre> + +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample('setting_an_alpha_mask', '100%', '102')}}</p> + +<h3 id="setting_a_luminance_mask">Définir un masque de luminance</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskContentUnits="objectBoundingBox" - style="mask-type:luminance"> + style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> -</svg> -</pre> +</svg></pre> - <pre class="brush: css"> -.redsquare { +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); -} -</pre> - </div> +}</pre> - <div>{{EmbedLiveSample('maskluminance', '100%', '102')}}</div> - </td> - </tr> - </tbody> -</table> +<h4 id="result_2">Result</h4> + +<p>{{EmbedLiveSample('setting_a_luminance_mask', '100%', '102')}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/mask/index.html b/files/fr/web/css/mask/index.html index 0eae965f70..39988a8dc4 100644 --- a/files/fr/web/css/mask/index.html +++ b/files/fr/web/css/mask/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/mask <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-number">/* Valeurs avec un mot-clé */ +<pre class="brush:css">/* Valeurs avec un mot-clé */ mask: none; /* Valeurs d'image */ @@ -59,12 +59,10 @@ mask: unset; <dd>Cette valeur définit la zone qui est impactée par l'image du masque. Voir {{cssxref("mask-clip")}}.</dd> <dt><code><compositing-operator></code></dt> <dd>Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir {{cssxref("mask-composite")}}.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - </dt> </dl> -{{csssyntax}} +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +<p>{{csssyntax}}</p> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/max()/index.html b/files/fr/web/css/max()/index.html index 3ca7ea988c..a660acc748 100644 --- a/files/fr/web/css/max()/index.html +++ b/files/fr/web/css/max()/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/max() <p>La fonction CSS <code><strong>max</strong></code><strong><code>()</code></strong> permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction <code>max()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée.</p> -<pre class="brush: css no-line-numbers notranslate">/* property: max(expression<code class="css plain"> [, expression]</code>) */ +<pre class="brush: css no-line-numbers">/* property: max(expression<code class="css plain"> [, expression]</code>) */ width: max(10vw, 4em, 80px); </pre> @@ -44,14 +44,14 @@ width: max(10vw, 4em, 80px); <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.logo { +<pre class="brush: css">.logo { width: max(50vw, 300px); } </pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> <h4 id="Résultat">Résultat</h4> @@ -65,7 +65,7 @@ width: max(10vw, 4em, 80px); <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 2rem; } h1.responsive { @@ -77,7 +77,7 @@ h1.responsive { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1> +<pre class="brush: html"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1> <h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1> </pre> diff --git a/files/fr/web/css/max-block-size/index.html b/files/fr/web/css/max-block-size/index.html index 7ef2682502..099822388a 100644 --- a/files/fr/web/css/max-block-size/index.html +++ b/files/fr/web/css/max-block-size/index.html @@ -18,8 +18,6 @@ translation_of: Web/CSS/max-block-size <div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/max-height/index.html b/files/fr/web/css/max-height/index.html index 0aae0a9399..1cbdfaca41 100644 --- a/files/fr/web/css/max-height/index.html +++ b/files/fr/web/css/max-height/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/max-height <div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de <code>max-height</code> surcharge la valeur de {{cssxref("height")}} mais elle est surchargée par {{cssxref("min-height")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/max-inline-size/index.html b/files/fr/web/css/max-inline-size/index.html index a1d6952c1b..9d99076ece 100644 --- a/files/fr/web/css/max-inline-size/index.html +++ b/files/fr/web/css/max-inline-size/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/max-inline-size <div>{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/max-width/index.html b/files/fr/web/css/max-width/index.html index cf06efaae9..b8ca12a219 100644 --- a/files/fr/web/css/max-width/index.html +++ b/files/fr/web/css/max-width/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/max-width <p>La propriété <strong><code>max-width</code></strong> est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par <code>max-width</code> (autrement dit, <code>max-width</code> est une borne supérieur pour <code>width</code>).</p> -<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div <p>La valeur de <code>max-width</code> surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.</p> diff --git a/files/fr/web/css/media_queries/index.html b/files/fr/web/css/media_queries/index.html index ad2a10fb01..1acb40d913 100644 --- a/files/fr/web/css/media_queries/index.html +++ b/files/fr/web/css/media_queries/index.html @@ -23,12 +23,10 @@ original_slug: Web/CSS/Requêtes_média <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@import")}}</li> <li>{{cssxref("@media")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html index 21228d0eaf..b87d5cba87 100644 --- a/files/fr/web/css/media_queries/using_media_queries/index.html +++ b/files/fr/web/css/media_queries/using_media_queries/index.html @@ -35,17 +35,19 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <p>Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques <code>not</code> ou <code>only</code>. Par défaut, le type de média utilisé est <code>all</code>.</p> <dl> - <dt><code id="all">all</code></dt> + <dt><code>all</code></dt> <dd>Correspond pour tous les appareils.</dd> - <dt><code id="print">print</code></dt> + <dt><code>print</code></dt> <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Paged_Media">les médias paginés</a>.</dd> - <dt><code id="screen">screen</code></dt> + <dt><code>screen</code></dt> <dd>Correspond aux appareils dotés d'un écran.</dd> - <dt><code id="speech">speech</code></dt> + <dt><code>speech</code></dt> <dd>Correspond aux outils de synthèse vocale.</dd> </dl> -<div class="note"><strong>Note : Les types de média dépréciés</strong> CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="https://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les types de média dépréciés CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="https://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</p> +</div> <h3 id="media_features">Caractéristiques média (<i lang="en">media features</i>)</h3> @@ -247,7 +249,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <pre class="brush: css">@media screen, print { ... }</pre> -<p>Pour une liste complète des types de média, voir <a class="internal" href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p> +<p>Pour une liste complète des types de média, voir <a href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p> <h2 id="targeting_media_features">Cibler des caractéristiques média</h2> @@ -260,7 +262,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <pre class="brush: css">@media (max-width: 1250px) { ... }</pre> <div class="note"> -<p>Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p> +<p><strong>Note :</strong> Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p> </div> <p>Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou <code>none</code> pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :</p> diff --git a/files/fr/web/css/microsoft_extensions/index.html b/files/fr/web/css/microsoft_extensions/index.html index b9982e6bc0..e48424afce 100644 --- a/files/fr/web/css/microsoft_extensions/index.html +++ b/files/fr/web/css/microsoft_extensions/index.html @@ -18,7 +18,6 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft <p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.</p> </div> -<div class="index"> <ul> <li>{{CSSxRef("-ms-accelerator")}}</li> <li>{{CSSxRef("-ms-block-progression")}}</li> @@ -66,11 +65,9 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft <li>{{CSSxRef("-ms-wrap-through")}}</li> <li>{{CSSxRef("zoom")}}</li> </ul> -</div> <h2 id="Pseudo-éléments">Pseudo-éléments</h2> -<div class="index"> <ul> <li>{{CSSxRef("::-ms-browse")}}</li> <li>{{CSSxRef("::-ms-check")}}</li> @@ -87,19 +84,15 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft <li>{{CSSxRef("::-ms-track")}}</li> <li>{{CSSxRef("::-ms-value")}}</li> </ul> -</div> <h2 id="Caractéristiques_média">Caractéristiques média</h2> -<div class="index"> <ul> <li>{{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}</li> </ul> -</div> <h2 id="API_DOM_relatives_à_CSS">API DOM relatives à CSS</h2> -<div class="index"> <ul> <li>{{DOMxRef("msContentZoomFactor")}}</li> <li>{{DOMxRef("msGetPropertyEnabled")}}</li> @@ -107,7 +100,6 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft <li>{{DOMxRef("MSRangeCollection")}}</li> <li>{{DOMxRef("msRegionOverflow")}}</li> </ul> -</div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/min()/index.html b/files/fr/web/css/min()/index.html index f7a8c561c9..ddcab65cd2 100644 --- a/files/fr/web/css/min()/index.html +++ b/files/fr/web/css/min()/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/min() <p>La fonction CSS <code><strong>min()</strong></code> permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction <code>min()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée.</p> -<pre class="brush: css no-line-numbers notranslate">/* property: min(expression<code class="css plain"> [, expression]</code>) */ +<pre class="brush: css no-line-numbers">/* property: min(expression<code class="css plain"> [, expression]</code>) */ width: min(10vw, 4em, 80px); </pre> @@ -44,14 +44,14 @@ width: min(10vw, 4em, 80px); <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.logo { +<pre class="brush: css">.logo { width: min(50vw, 300px); } </pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> <h4 id="Résultat">Résultat</h4> @@ -63,7 +63,7 @@ width: min(10vw, 4em, 80px); <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">input, label { +<pre class="brush: css">input, label { padding: 2px; box-sizing: border-box; display: inline-block; @@ -82,7 +82,7 @@ form { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <label>Saisir quelque chose :</label> <input type="text"> </form> @@ -94,7 +94,7 @@ form { <p>Lorsqu'on utilise <code>min()</code> afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à <code>min()</code> dans <code><a href="/fr/docs/Web/CSS/max">max()</a></code> utilisant <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a> en deuxième argument afin de garantir une lisibilité minimale :</p> -<pre class="brush: css notranslate">small { +<pre class="brush: css">small { font-size: max(min(0.5vw, 0.5em), 1rem); }</pre> diff --git a/files/fr/web/css/min-block-size/index.html b/files/fr/web/css/min-block-size/index.html index d251282f2f..81260b6760 100644 --- a/files/fr/web/css/min-block-size/index.html +++ b/files/fr/web/css/min-block-size/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/min-block-size <div>{{EmbedInteractiveExample("pages/css/min-block-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si le mode d'écriture est orienté verticalement, <code>min-block-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/min-height/index.html b/files/fr/web/css/min-height/index.html index d7aa9e1dbf..8e1229db64 100644 --- a/files/fr/web/css/min-height/index.html +++ b/files/fr/web/css/min-height/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/min-height <div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de la propriété <code>min-height</code> surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque <code>min-height</code> est supérieure.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -132,7 +130,7 @@ min-height: unset; <li>{{cssxref("width")}}</li> <li>{{cssxref("height")}}</li> <li>{{cssxref("max-height")}}</li> - <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîtes</a></li> <li>{{cssxref("min-width")}}</li> <li>{{cssxref("box-sizing")}}</li> <li>{{cssxref("height")}}</li> diff --git a/files/fr/web/css/min-inline-size/index.html b/files/fr/web/css/min-inline-size/index.html index c4e5c5d6f7..45112c237f 100644 --- a/files/fr/web/css/min-inline-size/index.html +++ b/files/fr/web/css/min-inline-size/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/min-inline-size <div>{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si le mode d'écriture est orienté verticalement, <code>min-inline-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/min-width/index.html b/files/fr/web/css/min-width/index.html index 3eee767ee7..8421821e5e 100644 --- a/files/fr/web/css/min-width/index.html +++ b/files/fr/web/css/min-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/min-width <div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de <code>min-width</code> surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/minmax()/index.html b/files/fr/web/css/minmax()/index.html index 90a84ac5d6..5ca7fb623d 100644 --- a/files/fr/web/css/minmax()/index.html +++ b/files/fr/web/css/minmax()/index.html @@ -17,8 +17,6 @@ translation_of: Web/CSS/minmax() <div>{{EmbedInteractiveExample("pages/css/function-minmax.html")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Syntax">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs de type <inflexible-breadth>, <track-breadth>*/ @@ -89,7 +87,7 @@ minmax(auto, 300px) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3]">#container { +<pre class="brush: css">#container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; diff --git a/files/fr/web/css/mix-blend-mode/index.html b/files/fr/web/css/mix-blend-mode/index.html index 792a30d1eb..33029b3111 100644 --- a/files/fr/web/css/mix-blend-mode/index.html +++ b/files/fr/web/css/mix-blend-mode/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/mix-blend-mode <div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <blend-mode> */ @@ -52,12 +50,11 @@ mix-blend-mode: unset; {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +<h2 id="exemples">Exemples</h2> -<div class="hidden" id="mix-blend-mode"> -<pre class="brush: html"><div class="grid"> +<pre class="brush: html hidden"><div class="grid"> <div class="col"> - <div class="note">Blending isolé (pas de blending avec l'arrière-plan)</div> + <div class="note">Blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> @@ -267,7 +264,7 @@ mix-blend-mode: unset; </div> </div> - <div class="note">Blending étendu (avec l'arrière-plan)</div> + <div class="note">Blending globally (blend with the background)</div> <div class="row"> <div class="cell"> normal <div class="container normal"> @@ -465,7 +462,7 @@ mix-blend-mode: unset; </div> </div></pre> -<pre class="brush: css">html,body { +<pre class="brush: css hidden">html,body { height: 100%; box-sizing: border-box; background: #EEE; @@ -558,9 +555,8 @@ mix-blend-mode: unset; .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; }</pre> -</div> -<div>{{EmbedLiveSample("mix-blend-mode", "100%", 500, "", "", "example-outcome-frame")}}</div> +<div>{{EmbedLiveSample("exemples", "100%", 1600, "", "", "example-outcome-frame")}}</div> <h3 id="Exemple_avec_SVG">Exemple avec SVG</h3> diff --git a/files/fr/web/css/mozilla_extensions/index.html b/files/fr/web/css/mozilla_extensions/index.html index 355b715a7d..e4552cad87 100644 --- a/files/fr/web/css/mozilla_extensions/index.html +++ b/files/fr/web/css/mozilla_extensions/index.html @@ -19,7 +19,6 @@ original_slug: Web/CSS/Extensions_Mozilla <p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a>.</p> </div> -<div class="index"> <h3 id="B">B</h3> <ul> @@ -28,12 +27,12 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef("-moz-box-align")}}</li> - <li>{{CSSxRef("-moz-box-direction")}}</li> - <li>{{CSSxRef("-moz-box-flex")}}</li> + <li>{{CSSxRef("box-align")}}</li> + <li>{{CSSxRef("box-direction")}}</li> + <li>{{CSSxRef("box-flex")}}</li> <li>{{CSSxRef("-moz-box-ordinal-group")}}</li> - <li>{{CSSxRef("-moz-box-orient")}}</li> - <li>{{CSSxRef("-moz-box-pack")}}</li> + <li>{{CSSxRef("box-orient")}}</li> + <li>{{CSSxRef("box-pack")}}</li> </ul> <h3 id="C_–_I">C – I</h3> @@ -64,22 +63,21 @@ original_slug: Web/CSS/Extensions_Mozilla <ul> <li>{{CSSxRef("-moz-stack-sizing")}}</li> - <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef("-moz-user-focus")}}</li> <li>{{CSSxRef("-moz-user-input")}}</li> - <li>{{CSSxRef("-moz-user-modify")}}</li> + <li>{{CSSxRef("user-modify")}}</li> <li>{{CSSxRef("-moz-window-dragging")}}</li> <li>{{CSSxRef("-moz-window-shadow")}}</li> </ul> -</div> <h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><span class="highlight-span">Anciennes propriétés spécifiques, désormais standardisées</span></h2> @@ -87,7 +85,6 @@ original_slug: Web/CSS/Extensions_Mozilla <p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p> </div> -<div class="index"> <ul> <li> <h3 id="A">A</h3> @@ -108,7 +105,7 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li> <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li> <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li> - <li>{{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]</li> + <li>{{CSSxRef("box-decoration-break")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]</li> <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li> <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]</li> <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]</li> @@ -179,21 +176,17 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li> <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li> </ul> -</div> <h2 id="Valeurs">Valeurs</h2> <h3 id="Valeurs_globales">Valeurs globales</h3> -<div class="index"> <ul> <li>{{cssxref("initial","-moz-initial")}}</li> </ul> -</div> -<h3 id="Cssxref(-moz-appearance)">{{Cssxref("-moz-appearance")}}</h3> +<h3 id="Cssxref(-moz-appearance)">{{Cssxref("appearance")}}</h3> -<div class="index"> <ul> <li><code>button</code></li> <li><code>button-arrow-down</code></li> @@ -280,14 +273,12 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>treeview</code></li> <li><code>window</code></li> </ul> -</div> <h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3> -<div class="index"> <ul> <li> - <h4 id="Dégradés_Gecko_minversion_inline(1.9.2)">Dégradés {{Gecko_minversion_inline("1.9.2")}}</h4> + <h4 id="Dégradés_Gecko_minversion_inline(1.9.2)">Dégradés </h4> <ul> <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li> @@ -295,43 +286,37 @@ original_slug: Web/CSS/Extensions_Mozilla </ul> </li> <li> - <h4 id="Éléments_gecko_minversion_inline(2.0)">Éléments {{gecko_minversion_inline("2.0")}}</h4> + <h4 id="Éléments_gecko_minversion_inline(2.0)">Éléments </h4> <ul> <li>{{cssxref("-moz-element")}}</li> </ul> </li> <li> - <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images {{gecko_minversion_inline("2.0")}}</h4> + <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images </h4> <ul> <li>{{cssxref("-moz-image-rect")}}</li> </ul> </li> </ul> -</div> <h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3> -<div class="index"> <ul> - <li><code>-moz-use-text-color</code> {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; <a href="/fr/docs/Web/CSS/color_value#currentColor_keyword">currentcolor</a> doit être utilisée à la place.</li> + <li><code>-moz-use-text-color</code> {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; <a href="/fr/docs/Web/CSS/color_value#currentcolor_keyword">currentcolor</a> doit être utilisée à la place.</li> </ul> -</div> <h3 id="Cssxref(border-style)_et_Cssxref(outline-style)">{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}</h3> -<div class="index"> <ul> <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li> <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li> <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li> </ul> -</div> <h3 id="Mots-clés_pour_cssxref(<color>)">Mots-clés pour {{cssxref("<color>")}}</h3> -<div class="index"> <ul> <li><code>-moz-activehyperlinktext</code></li> <li><code>-moz-hyperlinktext</code></li> @@ -339,8 +324,8 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-buttondefault</code></li> <li><code>-moz-buttonhoverface</code></li> <li><code>-moz-buttonhovertext</code></li> - <li><code>-moz-default-background-color</code>{{Gecko_minversion_inline("5.0")}}</li> - <li><code>-moz-default-color</code>{{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-default-background-color</code></li> + <li><code>-moz-default-color</code></li> <li><code>-moz-cellhighlight</code></li> <li><code>-moz-cellhighlighttext</code></li> <li><code>-moz-field</code></li> @@ -355,8 +340,8 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-mac-accentlightshadow</code></li> <li><code>-moz-mac-accentregularhighlight</code></li> <li><code>-moz-mac-accentregularshadow</code></li> - <li><code>-moz-mac-chrome-active</code>{{Gecko_minversion_inline("1.9.1")}}</li> - <li><code>-moz-mac-chrome-inactive</code>{{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-chrome-active</code></li> + <li><code>-moz-mac-chrome-inactive</code></li> <li><code>-moz-mac-focusring</code></li> <li><code>-moz-mac-menuselect</code></li> <li><code>-moz-mac-menushadow</code></li> @@ -364,14 +349,12 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-menuhover</code></li> <li><code>-moz-menuhovertext</code></li> <li><code>-moz-win-communicationstext</code></li> - <li><code>-moz-win-mediatext</code>{{gecko_minversion_inline(1.9)}}</li> - <li><code>-moz-nativehyperlinktext</code>{{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-win-mediatext</code></li> + <li><code>-moz-nativehyperlinktext</code></li> </ul> -</div> <h3 id="Cssxref(display)">{{Cssxref("display")}}</h3> -<div class="index"> <ul> <li><code>-moz-box</code> {{Deprecated_Inline}}</li> <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li> @@ -388,19 +371,15 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li> <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li> </ul> -</div> <h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3> -<div class="index"> <ul> <li><code>-moz-show-background</code> (valeur par défaut en <em>quirks mode</em>)</li> </ul> -</div> <h3 id="Cssxref(font)">{{Cssxref("font")}}</h3> -<div class="index"> <ul> <li><code>-moz-button</code></li> <li><code>-moz-info</code></li> @@ -413,35 +392,27 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-pull-down-menu</code></li> <li><code>-moz-field</code> (également une couleur)</li> </ul> -</div> <h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3> -<div class="index"> <ul> <li><code>-moz-fixed</code></li> </ul> -</div> <h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3> -<div class="index"> <ul> - <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} </li> </ul> -</div> <h3 id="cssxref(<length>)">{{cssxref("<length>")}}</h3> -<div class="index"> <ul> - <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref("-moz-calc")}} </li> </ul> -</div> <h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3> -<div class="index"> <ul> <li><code>-moz-arabic-indic</code></li> <li><code>-moz-bengali</code></li> @@ -475,69 +446,57 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-trad-chinese-informal</code></li> <li><code>-moz-urdu</code></li> </ul> -</div> <h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3> -<div class="index"> <ul> <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li> <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li> <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li> <li>{{Cssxref("-moz-hidden-unscrollable")}}</li> </ul> -</div> <h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3> -<div class="index"> <ul> <li><code>-moz-center</code></li> <li><code>-moz-left</code></li> <li><code>-moz-right</code></li> </ul> -</div> <h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3> -<div class="index"> <ul> <li><code>-moz-anchor-decoration</code></li> </ul> -</div> <h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3> -<div class="index"> <ul> <li><code>-moz-all</code></li> <li><code>-moz-none</code></li> </ul> -</div> <h3 id="Cssxref(width)_Cssxref(min-width)_and_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}</h3> -<div class="index"> <ul> <li><code>-moz-min-content</code></li> <li><code>-moz-fit-content</code></li> <li><code>-moz-max-content</code></li> <li><code>-moz-available</code></li> </ul> -</div> <h2 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h2> -<div class="index"> <ul> <li> <h3 id="A_–_D">A – D</h3> </li> - <li>{{CSSxRef("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432</li> <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li> - <li>{{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-any")}}</li> <li>{{CSSxRef(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li> - <li>{{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-broken")}}</li> <li>{{CSSxRef("::-moz-canvas")}}</li> <li>{{CSSxRef("::-moz-color-swatch")}}</li> <li>{{CSSxRef("::-moz-cell-content")}}</li> @@ -548,12 +507,12 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef(":-moz-first-node")}}</li> <li>{{CSSxRef("::-moz-focus-inner")}}</li> <li>{{CSSxRef("::-moz-focus-outer")}}</li> - <li>{{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}</li> - <li>{{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}</li> - <li>{{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}</li> - <li>{{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}</li> + <li>{{CSSxRef(":-moz-focusring")}}</li> + <li>{{CSSxRef(":-moz-full-screen")}}</li> + <li>{{CSSxRef(":-moz-full-screen-ancestor")}}</li> + <li>{{CSSxRef(":-moz-handler-blocked")}}</li> + <li>{{CSSxRef(":-moz-handler-crashed")}}</li> + <li>{{CSSxRef(":-moz-handler-disabled")}}</li> <li>{{CSSxRef("::-moz-inline-table")}}</li> <li> <h3 id="L">L</h3> @@ -561,23 +520,23 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef(":-moz-last-node")}}</li> <li>{{CSSxRef(":-moz-list-bullet")}}</li> <li>{{CSSxRef(":-moz-list-number")}}</li> - <li>{{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-loading")}}</li> + <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}</li> + <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}</li> + <li>{{CSSxRef(":-moz-lwtheme")}}</li> + <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}</li> + <li>{{CSSxRef(":-moz-lwtheme-darktext")}}</li> <li> <h3 id="N_–_R">N – R</h3> </li> - <li>{{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}</li> + <li>{{CSSxRef(":-moz-native-anonymous")}}</li> <li>{{CSSxRef(":-moz-only-whitespace")}}</li> <li>{{CSSxRef("::-moz-page")}}</li> <li>{{CSSxRef("::-moz-page-sequence")}}</li> <li>{{CSSxRef("::-moz-pagebreak")}}</li> <li>{{CSSxRef("::-moz-pagecontent")}}</li> - <li>{{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}</li> - <li>{{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}</li> + <li>{{CSSxRef(":placeholder-shown")}}{{Obsolete_Inline("51")}}</li> + <li>{{CSSxRef("::placeholder")}}{{Deprecated_Inline("51")}}</li> <li>{{CSSxRef("::-moz-progress-bar")}}</li> <li>{{CSSxRef("::-moz-range-progress")}}</li> <li>{{CSSxRef("::-moz-range-thumb")}}</li> @@ -591,8 +550,8 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("::-moz-scrolled-content")}}</li> <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li> <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li> - <li>{{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-submit-invalid")}}</li> + <li>{{CSSxRef(":-moz-suppressed")}}</li> <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li> <li> <h3 id="T">T</h3> @@ -606,7 +565,7 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("::-moz-table-row-group")}}</li> <li>{{CSSxRef(":-moz-tree-cell")}}</li> <li>{{CSSxRef(":-moz-tree-cell-text")}}</li> - <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}</li> <li>{{CSSxRef(":-moz-tree-checkbox")}}</li> <li>{{CSSxRef(":-moz-tree-column")}}</li> <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li> @@ -615,65 +574,58 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef(":-moz-tree-line")}}</li> <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li> <li>{{CSSxRef(":-moz-tree-row")}}</li> - <li>{{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-tree-row(hover)")}}</li> <li>{{CSSxRef(":-moz-tree-separator")}}</li> <li>{{CSSxRef(":-moz-tree-twisty")}}</li> <li> <h3 id="U_–_X">U – X</h3> </li> - <li>{{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":user-invalid")}}</li> + <li>{{CSSxRef(":-moz-ui-valid")}}</li> + <li>{{CSSxRef(":-moz-user-disabled")}}</li> <li>{{CSSxRef("::-moz-viewport")}}</li> <li>{{CSSxRef("::-moz-viewport-scroll")}}</li> - <li>{{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-window-inactive")}}</li> <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li> </ul> -</div> <h2 id="Règles">Règles @</h2> -<div class="index"> <ul> <li>{{Cssxref("@-moz-document")}}</li> </ul> -</div> <h2 id="Caractéristiques">Caractéristiques</h2> -<div class="index"> <ul> - <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}</li> + <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}</li> + <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}</li> <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}</li> + <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}</li> <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li> - <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li> + <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}</li> + <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li> <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li> - <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li> </ul> -</div> <h2 id="Autres">Autres</h2> -<div class="index"> <ul> <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li> </ul> -</div> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="/fr/docs/Mozilla/Gecko/Chrome/CSS">CSS Mozilla uniquement destiné au chrome (l'interface du navigateur)</a></li> - <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Extensions CSS spécifiques à Microsoft</a></li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Extensions CSS spécifiques à WebKit</a></li> + <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Extensions CSS spécifiques à Microsoft</a></li> + <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Extensions CSS spécifiques à WebKit</a></li> </ul> diff --git a/files/fr/web/css/number/index.html b/files/fr/web/css/number/index.html index c69bd7c8f5..0c055f3739 100644 --- a/files/fr/web/css/number/index.html +++ b/files/fr/web/css/number/index.html @@ -17,13 +17,13 @@ translation_of: Web/CSS/number <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs de type <code><number></code> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce <a href="/fr/docs/Web/CSS/timing-function">à la fonction de temporisation</a> associée à l'animation.</p> +<p>Les valeurs de type <code><number></code> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce <a href="/fr/docs/Web/CSS/easing-function">à la fonction de temporisation</a> associée à l'animation.</p> <h2 id="Exemples">Exemples</h2> <p>Voici des exemples de valeurs <code><number></code> valides :</p> -<pre class="eval example-good">12 Un entier (<a href="/fr/docs/Web/CSS/integer"><integer></a>) est également un <number> +<pre class="brush: css example-good">12 Un entier (<a href="/fr/docs/Web/CSS/integer"><integer></a>) est également un <number> 4.01 Un nombre (décimal) positif -456.8 Un nombre décimal négatif 0.0 Zéro @@ -36,7 +36,7 @@ translation_of: Web/CSS/number <p>Voici des exemples de valeurs invalides :</p> -<pre class="eval example-bad">12. Le point doit être suivi par des chiffres +<pre class="brush: css example-bad">12. Le point doit être suivi par des chiffres +-12.2 Seul un +/- est autorisé. 12.1.1 Seul un point est autorisé. </pre> diff --git a/files/fr/web/css/object-fit/index.html b/files/fr/web/css/object-fit/index.html index 55089a4cbc..4345f75418 100644 --- a/files/fr/web/css/object-fit/index.html +++ b/files/fr/web/css/object-fit/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/object-fit <div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Selon la valeur utilisée pour <code>object-fit</code>, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.</p> <div class="note"> diff --git a/files/fr/web/css/object-position/index.html b/files/fr/web/css/object-position/index.html index 698403990c..8ef2e87a95 100644 --- a/files/fr/web/css/object-position/index.html +++ b/files/fr/web/css/object-position/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/object-position <div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.</p> </div> diff --git a/files/fr/web/css/offset-anchor/index.html b/files/fr/web/css/offset-anchor/index.html index 799506efed..8d0243dfcc 100644 --- a/files/fr/web/css/offset-anchor/index.html +++ b/files/fr/web/css/offset-anchor/index.html @@ -63,14 +63,14 @@ offset-anchor: unset;</pre> <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><section> - <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor1</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">> +<pre class="brush: html"><section> + <div class="offset-anchor1"></div> </section> <section> -</span><span class="tag token"><span class="punctuation token"> <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor2</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">> + <div class="offset-anchor2"></div> </section> <section> -</span><span class="tag token"><span class="punctuation token"> <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor3</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code> + <div class="offset-anchor3"></div> </section> </pre> @@ -146,5 +146,5 @@ section { <li>{{cssxref("offset")}}</li> <li>{{cssxref("offset-distance")}}</li> <li>{{cssxref("offset-rotation")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">L'élément SVG <code><path></code></a></li> + <li><a href="/fr/docs/Web/SVG/Tutorial/Paths">L'élément SVG <code><path></code></a></li> </ul> diff --git a/files/fr/web/css/offset-distance/index.html b/files/fr/web/css/offset-distance/index.html index b4e23dcb22..5189bfdf52 100644 --- a/files/fr/web/css/offset-distance/index.html +++ b/files/fr/web/css/offset-distance/index.html @@ -26,8 +26,7 @@ offset-distance: 40px;</pre> <dl> <dt><code>{{cssxref('<length-percentage>')}}</code></dt> - <dd>Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}).</dd> - <dd>La valeur 100% représente la longueur totale du chemin (lorsque <code>offset-path</code> est défini par une forme simple ou grâce à la fonction <code>path()</code>).</dd> + <dd>Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}). La valeur 100% représente la longueur totale du chemin (lorsque <code>offset-path</code> est défini par une forme simple ou grâce à la fonction <code>path()</code>).</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -89,7 +88,7 @@ offset-distance: 40px;</pre> <p>{{CSSInfo}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Dans les versions antérieures de la spécification, cette propriété était intitulée <code>motion-offset</code>.</p> </div> diff --git a/files/fr/web/css/offset-path/index.html b/files/fr/web/css/offset-path/index.html index d23be3eb8b..3a3b342f15 100644 --- a/files/fr/web/css/offset-path/index.html +++ b/files/fr/web/css/offset-path/index.html @@ -13,13 +13,11 @@ translation_of: Web/CSS/offset-path <div>{{EmbedInteractiveExample("pages/css/offset-path.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.</p> <p>La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée <code>0</code> de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Dans des versions antérieures des spécifications, cette propriété était intitulée <code>motion-path</code>. Le nom a été modifié en <code>offset-path</code> afin de décrire un chemin statique plutôt qu'un chemin en mouvement.</p> </div> @@ -52,7 +50,9 @@ offset-path: unset; <h3 id="Valeurs">Valeurs</h3> -<div class="warning"><strong>Attention !</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</div> +<div class="warning"> + <p><strong>Attention :</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</p> +</div> <dl> <dt><code>ray()</code></dt> @@ -60,8 +60,7 @@ offset-path: unset; <dt><code>url()</code></dt> <dd>Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code> ou <code>rect</code> et d'utiliser la géométrie de la forme visée pour construire le chemin.</dd> <dt><code><basic-shape></code></dt> - <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>.</dd> - <dd> + <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>. <dl> <dt><code>path()</code></dt> <dd>Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.</dd> @@ -77,7 +76,7 @@ offset-path: unset; <h2 id="Exemples">Exemples</h2> -<p>L'exemple qui suit est tiré de <a href="http://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code><path></code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p> +<p>L'exemple qui suit est tiré de <a href="https://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code><path></code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/css/offset-position/index.html b/files/fr/web/css/offset-position/index.html index 3aa89b7ab7..a73e9d4b41 100644 --- a/files/fr/web/css/offset-position/index.html +++ b/files/fr/web/css/offset-position/index.html @@ -7,9 +7,9 @@ translation_of: Web/CSS/offset-position <p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>offset-position</code></strong> définit la <a href="https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position">position initiale</a> de {{cssxref("offset-path")}}.</p> -<h2 id="Syntax" name="Syntax">Syntax</h2> +<h2 id="Syntax">Syntax</h2> -<pre class="brush: css no-line-numbers notranslate">/* Valeurs de mots clefs */ +<pre class="brush: css no-line-numbers">/* Valeurs de mots clefs */ offset-position: auto; offset-position: top; offset-position: bottom; @@ -37,12 +37,12 @@ offset-position: initial; offset-position: unset; </pre> -<h3 id="Values" name="Values">Values</h3> +<h3 id="Values">Values</h3> <dl> <dt><code>auto</code></dt> <dd>La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}.</dd> - <dt id="<position>"><code><position></code></dt> + <dt><code><position></code></dt> <dd>Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme <code>center</code>. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}.</dd> </dl> @@ -58,10 +58,10 @@ offset-position: unset; <h3 id="Définir_la_valeur_initiale_de_offset-position">Définir la valeur initiale de offset-position</h3> -<pre class="brush: html notranslate"><div id="motion-demo"></div> +<pre class="brush: html"><div id="motion-demo"></div> </pre> -<pre class="brush: css notranslate">#motion-demo { +<pre class="brush: css">#motion-demo { offset-path: path('M20,20 C20,100 200,0 200,100'); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; diff --git a/files/fr/web/css/opacity/index.html b/files/fr/web/css/opacity/index.html index 7051c95abd..4f33f117e4 100644 --- a/files/fr/web/css/opacity/index.html +++ b/files/fr/web/css/opacity/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/opacity <div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser <code>opacity</code>, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : <code>background: rgba(0, 0, 0, 0.4);</code>).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/order/index.html b/files/fr/web/css/order/index.html index ed0854e8b5..e41e565c0f 100644 --- a/files/fr/web/css/order/index.html +++ b/files/fr/web/css/order/index.html @@ -13,10 +13,8 @@ translation_of: Web/CSS/order <div>{{EmbedInteractiveExample("pages/css/order.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> -<p><strong>Note </strong>: <code>order</code> est uniquement conçue pour affecter <strong>l'ordre visuel</strong>. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. <code><strong>order</strong></code> ne doit pas être utilisée avec les média non visuels comme les informations vocales.</p> +<p><strong>Note :</strong> <code>order</code> est uniquement conçue pour affecter <strong>l'ordre visuel</strong>. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. <code><strong>order</strong></code> ne doit pas être utilisée avec les média non visuels comme les informations vocales.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -89,7 +87,7 @@ order: unset; <ul> <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/"><em>Flexbox & the keyboard navigation disconnect — Tink</em> (en anglais)</a></li> - <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html"><em>Source Order Matters, Adrian Roselli</em> (en anglais)</a></li> + <li><a href="https://adrianroselli.com/2015/09/source-order-matters.html"><em>Source Order Matters, Adrian Roselli</em> (en anglais)</a></li> <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles du WCAG 1.3</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html"><em>Understanding Success Criterion 1.3.2, W3C Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> @@ -122,7 +120,7 @@ order: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base</a></em></li> - <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li> - <li>Le guide sur la grille CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">La disposition en grille et l'accessibilité</a></em></li> + <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de base</a></em></li> + <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li> + <li>Le guide sur la grille CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">La disposition en grille et l'accessibilité</a></em></li> </ul> diff --git a/files/fr/web/css/outline-color/index.html b/files/fr/web/css/outline-color/index.html index 243233ec9e..daf0293821 100644 --- a/files/fr/web/css/outline-color/index.html +++ b/files/fr/web/css/outline-color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-color <div>{{EmbedInteractiveExample("pages/css/outline-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété <code>outline-color</code> est également synthétisée avec la propriété raccourcie {{cssxref("outline")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/outline-offset/index.html b/files/fr/web/css/outline-offset/index.html index f83b472e4a..98bcb9014e 100644 --- a/files/fr/web/css/outline-offset/index.html +++ b/files/fr/web/css/outline-offset/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-offset <div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/outline-style/index.html b/files/fr/web/css/outline-style/index.html index 41758c4d5e..5a98aa4cf7 100644 --- a/files/fr/web/css/outline-style/index.html +++ b/files/fr/web/css/outline-style/index.html @@ -9,17 +9,15 @@ translation_of: Web/CSS/outline-style --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>outline-style</code></strong> permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a> et peut être utilisée afin de faire ressortir l'élément.</p> +<p>La propriété <strong><code>outline-style</code></strong> permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de bordure</a> et peut être utilisée afin de faire ressortir l'élément.</p> <div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est synthétisée grâce à la propriété {{cssxref("outline")}} qui regroupe outline-style, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ outline-style: auto; outline-style: none; outline-style: dotted; @@ -72,7 +70,7 @@ outline-style: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.exemple-groove { +<pre class="brush: css">.exemple-groove { outline-style: groove; outline-color: red; outline-width: 2px; @@ -86,7 +84,7 @@ outline-style: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p class="exemple-groove">Ça c'est le groove</p> +<pre class="brush: html"><p class="exemple-groove">Ça c'est le groove</p> <p class="exemple-outset">Et ça c'est outset</p> </pre> @@ -94,13 +92,13 @@ outline-style: unset; <p>{{EmbedLiveSample("Exemple_simple","100%","100%")}}</p> -<h3 id="Example_0_-_auto" name="Example_0_-_auto">Utilisation de la valeur <code>auto</code></h3> +<h3 id="utilisation_de_la_valeur_auto">Utilisation de la valeur auto</h3> <p>La valeur <code>auto</code> indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.</p> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">.auto { +<pre class="brush: css">.auto { outline-style: auto; /* same result as "outline: auto" */ } @@ -109,7 +107,7 @@ outline-style: unset; <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="auto">Outline Demo</p> </div> </pre> diff --git a/files/fr/web/css/outline-width/index.html b/files/fr/web/css/outline-width/index.html index 0a46eda6aa..b0a97a057c 100644 --- a/files/fr/web/css/outline-width/index.html +++ b/files/fr/web/css/outline-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-width <div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot clé */ diff --git a/files/fr/web/css/outline/index.html b/files/fr/web/css/outline/index.html index 235e8239cd..7b505019a2 100644 --- a/files/fr/web/css/outline/index.html +++ b/files/fr/web/css/outline/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/outline <p>La propriété <strong><code>outline</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p> -<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div <p>À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec <a href="/fr/docs/Web/CSS/Valeur_initiale">leur valeur initiale</a>.</p> @@ -46,7 +44,7 @@ outline: initial; outline: unset; </pre> -<p id="Values">La propriété <code>outline</code> peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.</p> +<p>La propriété <code>outline</code> peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.</p> <div class="note"> <p><strong>Note :</strong> Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut <code>none</code>).</p> diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html index eacd32baed..cecf8f743f 100644 --- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -45,8 +45,8 @@ original_slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement overflow-anchor: none; } </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong> : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) <code>overflow-anchor: auto</code> à un autre endroit du document.</p> +<div class="note"> +<p><strong>Note :</strong> Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) <code>overflow-anchor: auto</code> à un autre endroit du document.</p> </div> <h3 id="Supression_triggers">Supression triggers</h3> diff --git a/files/fr/web/css/overflow-block/index.html b/files/fr/web/css/overflow-block/index.html index 9a8d35a650..ee9da652bc 100644 --- a/files/fr/web/css/overflow-block/index.html +++ b/files/fr/web/css/overflow-block/index.html @@ -100,9 +100,7 @@ overflow-block: unset; <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> @@ -129,7 +127,7 @@ overflow-block: unset; <p>{{Compat("css.properties.overflow-block")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li> diff --git a/files/fr/web/css/overflow-inline/index.html b/files/fr/web/css/overflow-inline/index.html index c3a616fa8f..845fe83f15 100644 --- a/files/fr/web/css/overflow-inline/index.html +++ b/files/fr/web/css/overflow-inline/index.html @@ -100,9 +100,7 @@ overflow-inline: unset; <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> @@ -129,7 +127,7 @@ overflow-inline: unset; <p>{{Compat("css.properties.overflow-inline")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li> diff --git a/files/fr/web/css/overflow-wrap/index.html b/files/fr/web/css/overflow-wrap/index.html index 0cc851c2f4..af17d340b6 100644 --- a/files/fr/web/css/overflow-wrap/index.html +++ b/files/fr/web/css/overflow-wrap/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/overflow-wrap <div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> À la différence de {{cssxref("word-break")}}, <code>overflow-wrap</code> créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.</p> </div> @@ -45,13 +43,12 @@ overflow-wrap: unset; <dd>Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd> <dt><code>break-word</code></dt> <dd>Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure <strong>ne sont pas</strong> prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - - {{csssyntax}} - </dt> </dl> +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<p>{{csssyntax}}</p> + <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/css/overflow-x/index.html b/files/fr/web/css/overflow-x/index.html index 598b2b8916..daef74255a 100644 --- a/files/fr/web/css/overflow-x/index.html +++ b/files/fr/web/css/overflow-x/index.html @@ -17,8 +17,6 @@ translation_of: Web/CSS/overflow-x <div>{{EmbedInteractiveExample("pages/css/overflow-x.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -110,9 +108,7 @@ overflow-x: unset; <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/overflow-y/index.html b/files/fr/web/css/overflow-y/index.html index 0ed664de32..c91f18849d 100644 --- a/files/fr/web/css/overflow-y/index.html +++ b/files/fr/web/css/overflow-y/index.html @@ -17,8 +17,6 @@ translation_of: Web/CSS/overflow-y <div>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -115,9 +113,7 @@ overflow-y: unset; <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/overflow/index.html b/files/fr/web/css/overflow/index.html index 54a4d86f53..58dcae523b 100644 --- a/files/fr/web/css/overflow/index.html +++ b/files/fr/web/css/overflow/index.html @@ -14,9 +14,7 @@ translation_of: Web/CSS/overflow <div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p> +<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p> <p>Afin que la propriété <code>overflow</code> puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir <code>white-space</code> avec la valeur <code>nowrap.</code></p> @@ -25,7 +23,7 @@ translation_of: Web/CSS/overflow </div> <div class="note"> -<p><strong>Note </strong>: Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p> +<p><strong>Note :</strong> Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -68,16 +66,13 @@ overflow: unset; <dl> <dt><code>-moz-scrollbars-none </code>{{obsolete_inline}}</dt> - <dd><code>overflow:hidden</code> doit être utilisé à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd><code>overflow:hidden</code> doit être utilisé à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-scrollbars-horizontal </code>{{Deprecated_inline}}</dt> - <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-scrollbars-vertical </code>{{Deprecated_inline}}</dt> - <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt> <dd>Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <code><html></code>, <code> <body></code> (avec les flèches du clavier et la roue de la souris).</dd> @@ -89,45 +84,79 @@ overflow: unset; <h2 id="Exemples">Exemples</h2> -<pre class="brush: css">p { - width: 12em; - height: 6em; +<h3 id="définir_différentes_valeurs_d_overflow_pour_le_texte">Définir différentes valeurs d'overflow pour le texte</h3> + +<h4>HTML</h4> + +<pre class="brush: html"> + <div> + <code>visible</code> + <p class="visible"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>hidden</code> + <p class="hidden"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>scroll</code> + <p class="scroll"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>auto</code> + <p class="auto"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> +</pre> + +<h4>CSS</h4> + +<pre class="brush: css"> +body { + display: flex; + justify-content: space-around; +} + +div { + margin: 1em; + font-size: 1.2em; +} + +p { + width: 8em; + height: 5em; border: dotted; +} - /* le contenu n'est pas rogné */ +p.visible { overflow: visible; } -</pre> -<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* pas d'ascenseur fourni */ +p.hidden { overflow: hidden; } -</pre> -<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* les ascenseurs sont toujours affichés */ +p.scroll { overflow: scroll; } -</pre> -<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* les ascenseurs sont affichés si nécessaires */ +p.auto { overflow: auto; } </pre> -<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> +<h4>Résultat</h4> + +<p>{{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/overscroll-behavior-x/index.html b/files/fr/web/css/overscroll-behavior-x/index.html index 7369eb8152..6863618b75 100644 --- a/files/fr/web/css/overscroll-behavior-x/index.html +++ b/files/fr/web/css/overscroll-behavior-x/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/overscroll-behavior-x <p>La propriété CSS <strong><code>overscroll-behavior-x</code></strong> définit le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe horizontal.</p> <div class="note"> -<p><strong>Note</strong> : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p> +<p><strong>Note :</strong> Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/overscroll-behavior-y/index.html b/files/fr/web/css/overscroll-behavior-y/index.html index 75c5d85354..2b9e86b5ad 100644 --- a/files/fr/web/css/overscroll-behavior-y/index.html +++ b/files/fr/web/css/overscroll-behavior-y/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/overscroll-behavior-y <p>La propriété CSS <strong><code>overscroll-behavior-y</code></strong> permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.</p> <div class="note"> -<p><strong>Note</strong> : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p> +<p><strong>Note :</strong> Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/overscroll-behavior/index.html b/files/fr/web/css/overscroll-behavior/index.html index 12689d8d21..7145aa1b6e 100644 --- a/files/fr/web/css/overscroll-behavior/index.html +++ b/files/fr/web/css/overscroll-behavior/index.html @@ -55,7 +55,7 @@ overflow: unset; <p>Dans notre exemple sur <code><a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior</a></code> (cf. <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">le code source</a> associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion. </p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p> +<p><img alt="" src="example.png"></p> <p>Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> fonctionnerait également) sur la fenêtre de discussion :</p> diff --git a/files/fr/web/css/padding-block-end/index.html b/files/fr/web/css/padding-block-end/index.html index 77365bdb63..91344ee297 100644 --- a/files/fr/web/css/padding-block-end/index.html +++ b/files/fr/web/css/padding-block-end/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-block-end <div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-block-start/index.html b/files/fr/web/css/padding-block-start/index.html index b75dee980f..8a70d9e330 100644 --- a/files/fr/web/css/padding-block-start/index.html +++ b/files/fr/web/css/padding-block-start/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-block-start <div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-bottom/index.html b/files/fr/web/css/padding-bottom/index.html index 1b84a4d296..4e2f06874c 100644 --- a/files/fr/web/css/padding-bottom/index.html +++ b/files/fr/web/css/padding-bottom/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-bottom <div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-bottom</code> donc).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/padding-inline-end/index.html b/files/fr/web/css/padding-inline-end/index.html index eae949899b..5ba370f4da 100644 --- a/files/fr/web/css/padding-inline-end/index.html +++ b/files/fr/web/css/padding-inline-end/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-inline-end <div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-inline-start/index.html b/files/fr/web/css/padding-inline-start/index.html index cffa148b81..0c58a3d67e 100644 --- a/files/fr/web/css/padding-inline-start/index.html +++ b/files/fr/web/css/padding-inline-start/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-inline-start <p>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</p> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-inline/index.html b/files/fr/web/css/padding-inline/index.html index 7af32a6705..b4fd3ffbf3 100644 --- a/files/fr/web/css/padding-inline/index.html +++ b/files/fr/web/css/padding-inline/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/padding-inline <p>La propriété <strong><code>padding-inline</code></strong> définit l'espace de remplissage (<em>padding</em>) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs de longueur */ +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ /* Type <length> */ padding-inline: 10px 20px; /* Des longueurs absolues */ padding-inline: 1em 2em; /* Des longueurs relatives à la taille du texte */ @@ -45,7 +45,7 @@ padding-inline: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { background-color: yellow; width: 120px; height: 120px; @@ -59,7 +59,7 @@ padding-inline: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="texteExemple">Texte d'exemple</p> </div> </pre> diff --git a/files/fr/web/css/padding-left/index.html b/files/fr/web/css/padding-left/index.html index cbcb040f4d..616f871991 100644 --- a/files/fr/web/css/padding-left/index.html +++ b/files/fr/web/css/padding-left/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-left <div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-left</code> donc).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/padding-right/index.html b/files/fr/web/css/padding-right/index.html index 3571c821c7..245c6797fd 100644 --- a/files/fr/web/css/padding-right/index.html +++ b/files/fr/web/css/padding-right/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-right <div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-right</code> donc).</p> </div> diff --git a/files/fr/web/css/padding-top/index.html b/files/fr/web/css/padding-top/index.html index 6dd515752c..97b9a7760d 100644 --- a/files/fr/web/css/padding-top/index.html +++ b/files/fr/web/css/padding-top/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/padding-top <div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-top</code> donc).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/padding/index.html b/files/fr/web/css/padding/index.html index 35002900d1..3b643b258d 100644 --- a/files/fr/web/css/padding/index.html +++ b/files/fr/web/css/padding/index.html @@ -10,13 +10,11 @@ translation_of: Web/CSS/padding --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>padding</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">les boîtes CSS</a>). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</p> +<p>La propriété <strong><code>padding</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#les_propri%c3%a9t%c3%a9s_des_bo%c3%aetes">les boîtes CSS</a>). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</p> <div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>La <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.</p> +<p>La <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.</p> <div class="note"> <p><strong>Note :</strong> Le <em>padding</em> permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.</p> @@ -134,7 +132,7 @@ h3 { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box model">CSS : Le modèle de boîtes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">CSS : Le modèle de boîtes</a></li> <li>Les quatres propriétés détaillées synthétisées par <code>padding</code> : <ul> <li>{{cssxref("padding-top")}}</li> diff --git a/files/fr/web/css/page-break-after/index.html b/files/fr/web/css/page-break-after/index.html index b01e767e9c..6c40401c7f 100644 --- a/files/fr/web/css/page-break-after/index.html +++ b/files/fr/web/css/page-break-after/index.html @@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-after --- <div>{{CSSRef}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.</p> </div> <p>La propriété CSS <strong><code>page-break-after</code></strong> permet d'ajuster les sauts de page placés <em>après</em> l'élément courant.</p> diff --git a/files/fr/web/css/page-break-before/index.html b/files/fr/web/css/page-break-before/index.html index 67fdbe48f5..ebbbfaa167 100644 --- a/files/fr/web/css/page-break-before/index.html +++ b/files/fr/web/css/page-break-before/index.html @@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-before --- <div>{{CSSRef}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.</p> </div> <p>La propriété CSS <strong><code>page-break-before</code></strong> permet d'ajuster les sauts de page placés <em>avant</em> l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p> diff --git a/files/fr/web/css/page-break-inside/index.html b/files/fr/web/css/page-break-inside/index.html index 5fa07bd2f5..3dc045c5ee 100644 --- a/files/fr/web/css/page-break-inside/index.html +++ b/files/fr/web/css/page-break-inside/index.html @@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-inside --- <div>{{CSSRef}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.</p> </div> <p>La propriété <strong><code>page-break-inside</code></strong> ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.</p> diff --git a/files/fr/web/css/paint-order/index.html b/files/fr/web/css/paint-order/index.html index 77c5356938..ffbc99c063 100644 --- a/files/fr/web/css/paint-order/index.html +++ b/files/fr/web/css/paint-order/index.html @@ -41,7 +41,7 @@ paint-order: markers stroke fill; <p>Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.</p> <div class="note"> -<p><strong>Note </strong>: Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés <code>marker-*</code> (e.g. <code><a href="/fr/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) ou l'élément <code><a href="/fr/docs/Web/SVG/Element/marker"><marker></a></code>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre <code>stroke</code> et <code>fill</code> importe.</p> +<p><strong>Note :</strong> Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés <code>marker-*</code> (e.g. <code><a href="/fr/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) ou l'élément <code><a href="/fr/docs/Web/SVG/Element/marker"><marker></a></code>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre <code>stroke</code> et <code>fill</code> importe.</p> </div> <h3 id="Valeurs">Valeurs</h3> diff --git a/files/fr/web/css/path()/index.html b/files/fr/web/css/path()/index.html index 2f6d56f241..7be4d1a072 100644 --- a/files/fr/web/css/path()/index.html +++ b/files/fr/web/css/path()/index.html @@ -57,5 +57,5 @@ path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); <li>{{cssxref("<shape-outside>")}}</li> <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Formes CSS</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Vue d'ensemble des formes CSS</a></li> - <li><a href="https://css-tricks.com/svg-path-syntax-illustrated-guide/"><i lang="en-US">SVG Path Syntax Illustrated Guide</i> (en anglais)</a></li> + <li><a href="https://css-tricks.com/svg-path-syntax-illustrated-guide/"><i lang="en">SVG Path Syntax Illustrated Guide</i> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/perspective-origin/index.html b/files/fr/web/css/perspective-origin/index.html index 86f51bfa86..8a8768ebf1 100644 --- a/files/fr/web/css/perspective-origin/index.html +++ b/files/fr/web/css/perspective-origin/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/perspective-origin <div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés <code>perspective-origin</code> et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code> s'applique à même l'élément qu'on veut placer en 3D.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/perspective/index.html b/files/fr/web/css/perspective/index.html index 306bcb7936..e29b24aa7a 100644 --- a/files/fr/web/css/perspective/index.html +++ b/files/fr/web/css/perspective/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/perspective <div>{{EmbedInteractiveExample("pages/css/perspective.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété <code>perspective</code>) ne sont pas dessiné.</p> <p>Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}.</p> diff --git a/files/fr/web/css/place-content/index.html b/files/fr/web/css/place-content/index.html index 4dc5d23259..58064fcb1f 100644 --- a/files/fr/web/css/place-content/index.html +++ b/files/fr/web/css/place-content/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/place-content <p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-content</code></strong> permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.</p> -<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> @@ -46,7 +44,7 @@ place-content: unset;</pre> <p>La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour <code>justify-content</code>.</p> <div class="warning"> -<p><strong>Attention !</strong> Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.</p> +<p><strong>Attention :</strong> Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.</p> </div> <h3 id="Valeurs">Valeurs</h3> @@ -89,7 +87,7 @@ place-content: unset;</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[7]">#container { +<pre class="brush: css">#container { display: flex; height:240px; width: 240px; @@ -171,10 +169,7 @@ div > div { </select><code>;</code> </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var update = function () { +<pre class="brush: js hidden">var update = function () { document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value; } @@ -193,7 +188,6 @@ direction.addEventListener("change", function (evt) { document.getElementById("container").style.direction = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -235,10 +229,10 @@ direction.addEventListener("change", function (evt) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles en CSS</a></li> - <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles en CSS</a></li> + <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li> <li>La propriété {{cssxref("align-content")}}</li> <li>La propriété {{cssxref("justify-content")}}</li> diff --git a/files/fr/web/css/place-items/index.html b/files/fr/web/css/place-items/index.html index edcda65124..c5b670ba70 100644 --- a/files/fr/web/css/place-items/index.html +++ b/files/fr/web/css/place-items/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/place-items <div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css">/* Valeurs avec un mot-clé */ @@ -97,7 +95,7 @@ place-items: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">#container { +<pre class="brush: css">#container { height:200px; width: 240px; place-items: center; /* Cette valeur peut être modifiée dans l'exemple */ @@ -115,8 +113,7 @@ place-items: unset; } </pre> -<div class="hidden"> -<pre class="brush: css;">div > div { +<pre class="brush: css hidden">div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; @@ -164,9 +161,7 @@ select { margin-top: 10px; }</pre> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container" class="flex"> +<pre class="brush: html hidden"><div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> @@ -210,9 +205,7 @@ select { </div> </pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var values = document.getElementById('values'); +<pre class="brush: js hidden">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -224,7 +217,6 @@ display.addEventListener('change', function (evt) { container.className = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/place-self/index.html b/files/fr/web/css/place-self/index.html index 15cec4eb4f..e996026df7 100644 --- a/files/fr/web/css/place-self/index.html +++ b/files/fr/web/css/place-self/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/place-self <div>{{EmbedInteractiveExample("pages/css/place-self.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/pointer-events/index.html b/files/fr/web/css/pointer-events/index.html index 69583602c8..84f450cbbe 100644 --- a/files/fr/web/css/pointer-events/index.html +++ b/files/fr/web/css/pointer-events/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/pointer-events <div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Lorsque cette propriété n'est pas définie, pour le contenu SVG, on aura le même effet qu'avec la valeur <code>visiblePainted</code>. Lorsqu'on utilise la valeur <code>none</code>, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -125,7 +123,7 @@ pointer-events: unset; </tbody> </table> -<p>L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification <em>CSS Basic User Interface Module Level 3</em>, a été remise à la spécification de <a class="external" href="https://wiki.csswg.org/spec/css4-ui#pointer-events"> niveau 4</a>.</p> +<p>L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification <em>CSS Basic User Interface Module Level 3</em>, a été remise à la spécification de <a href="https://wiki.csswg.org/spec/css4-ui#pointer-events"> niveau 4</a>.</p> <p>{{cssinfo}}</p> @@ -139,6 +137,6 @@ pointer-events: unset; <li>L'attribut SVG {{SVGAttr("pointer-events")}}</li> <li>L'attribut SVG {{SVGAttr("visibility")}}</li> <li>La propriété {{cssxref("user-select")}} qui contrôle lorsque l'utilisateur peut sélectionner du texte</li> - <li><a class="external" href="https://webkit.org/specs/PointerEventsProperty.html">« Spécification » WebKit pour étendre la propriété pointer-events</a> au contenu (X)HTML</li> + <li><a href="https://webkit.org/specs/PointerEventsProperty.html">« Spécification » WebKit pour étendre la propriété pointer-events</a> au contenu (X)HTML</li> <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">Un défilement à 60fps en utilisant <code>pointer-events: none</code> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/position/index.html b/files/fr/web/css/position/index.html index 848e6053cb..cb8cffc082 100644 --- a/files/fr/web/css/position/index.html +++ b/files/fr/web/css/position/index.html @@ -13,12 +13,10 @@ translation_of: Web/CSS/position <div>{{EmbedInteractiveExample("pages/css/position.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h3 id="Types_de_positionnement">Types de positionnement</h3> <ul> - <li>Un <strong>élément positionné</strong> est un élément dont la propriété de position <a href="/fr/docs/Web/CSS/Valeur_calculée">calculée</a> est <code>relative</code>, <code>absolute</code>, <code>fixed</code> ou <code>sticky</code>.</li> + <li>Un <strong>élément positionné</strong> est un élément dont la propriété de position <a href="/fr/docs/Web/CSS/computed_value">calculée</a> est <code>relative</code>, <code>absolute</code>, <code>fixed</code> ou <code>sticky</code>.</li> <li>Un <strong>élément positionné de façon relative</strong> est un élément dont la propriété de position calculée est <code>relative</code>. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal.</li> <li>Un <strong>élément positionné de façon absolue</strong> est un élément dont la propriété de position calculée est <code>absolute</code> ou <code>fixed</code>. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.</li> <li>Un <strong>élément positionné en adhérence</strong> est un élément dont la propriété de position calculée vaut <code>sticky</code>. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.</li> @@ -56,17 +54,13 @@ position: unset; <dt><code>static</code></dt> <dd>Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas.</dd> <dt><code>relative</code></dt> - <dd>L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec <code>static</code>.</dd> - <dd>Cette valeur crée un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. L'effet de cette valeur n'est pas défini pour les éléments <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> et <code>table-caption</code>.</dd> + <dd>L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec <code>static</code>. Cette valeur crée un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. L'effet de cette valeur n'est pas défini pour les éléments <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> et <code>table-caption</code>.</dd> <dt><code>absolute</code></dt> - <dd>L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>.</dd> - <dd>Cette valeur crée un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.</dd> + <dd>L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Cette valeur crée un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.</dd> <dt><code>fixed</code></dt> - <dd>L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<em>viewport</em>), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code> (voir <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">la spécification sur les transformations CSS</a>) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour <em>chaque page</em>). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de <code>perspective</code> et <code>filter</code> pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>.</dd> - <dd>Cette valeur crée toujours un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a>. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour <em>chacune des pages</em>.</dd> + <dd>L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<em>viewport</em>), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code> (voir <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">la spécification sur les transformations CSS</a>) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour <em>chaque page</em>). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de <code>perspective</code> et <code>filter</code> pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Cette valeur crée toujours un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a>. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour <em>chacune des pages</em>.</dd> <dt><code>sticky</code></dt> - <dd>La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à <a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">son bloc englobant</a> selon les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Dans tous les cas, y compris avec les éléments <code>table</code>, cela n'affecte pas la position des autres éléments.</dd> - <dd>Cette valeur entraîne toujours la création d'un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a>. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand <code>overflow</code> vaut <code>hidden</code>, <code>scroll</code>, <code>auto</code> ou <code>overlay</code>) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut <code>overflow: hidden</code> ou <code>auto</code> (<a href="https://github.com/w3c/csswg-drafts/issues/865">cf.: cette <em>issue</em> GitHub</a>).</dd> + <dd>La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à <a href="/fr/docs/Web/CSS/Containing_block">son bloc englobant</a> selon les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Dans tous les cas, y compris avec les éléments <code>table</code>, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a>. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand <code>overflow</code> vaut <code>hidden</code>, <code>scroll</code>, <code>auto</code> ou <code>overlay</code>) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut <code>overflow: hidden</code> ou <code>auto</code> (<a href="https://github.com/w3c/csswg-drafts/issues/865">cf.: cette <em>issue</em> GitHub</a>).</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -303,7 +297,7 @@ dd + dd { <p>Il faut s'assurer que les éléments positionnés avec <code>absolute</code> ou <code>fixed</code> ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/position_value/index.html b/files/fr/web/css/position_value/index.html index 8cd69cf9ff..5b6dd45473 100644 --- a/files/fr/web/css/position_value/index.html +++ b/files/fr/web/css/position_value/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/Type_position <h2 id="Syntaxe">Syntaxe</h2> -<p>On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera <img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).</p> +<p><img alt="" src="position_type.png">On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).</p> <p>Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).</p> @@ -51,7 +51,7 @@ original_slug: Web/CSS/Type_position <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("<timing-function>")}}) et le point se déplacera donc sur une ligne.</p> +<p>Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne.</p> <h2 id="Exemples">Exemples</h2> @@ -120,8 +120,8 @@ original_slug: Web/CSS/Type_position <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Valeurs et unités en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li> <li>{{cssxref("background-position")}}</li> <li>{{cssxref("radial-gradient","radial-gradient()")}}</li> <li>{{cssxref("conic-gradient","conic-gradient()")}}</li> diff --git a/files/fr/web/css/pseudo-classes/index.html b/files/fr/web/css/pseudo-classes/index.html index 8c7425003c..22ba65100c 100644 --- a/files/fr/web/css/pseudo-classes/index.html +++ b/files/fr/web/css/pseudo-classes/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/Pseudo-classes --- <div>{{CSSRef}}</div> -<p class="summary">Une <strong>pseudo-classe</strong> est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).</p> +<p>Une <strong>pseudo-classe</strong> est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).</p> <pre class="brush: css no-line-numbers">div:hover { background-color: #F89B4D; @@ -19,8 +19,8 @@ translation_of: Web/CSS/Pseudo-classes <p>Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).</p> -<div class="blockIndicator note"> -<p><strong>Note:</strong> À la différence des pseudo-classes, <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">les pseudo-éléments</a> peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.</p> +<div class="note"> +<p><strong>Note :</strong> À la différence des pseudo-classes, <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">les pseudo-éléments</a> peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -34,7 +34,6 @@ translation_of: Web/CSS/Pseudo-classes <h2 id="Liste_des_pseudo-classes_standards">Liste des pseudo-classes standards</h2> -<div class="index" id="index"> <ul> <li>{{CSSxRef(":active")}}</li> <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li> @@ -97,7 +96,6 @@ translation_of: Web/CSS/Pseudo-classes <li>{{CSSxRef(":visited")}}</li> <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li> </ul> -</div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/pseudo-elements/index.html b/files/fr/web/css/pseudo-elements/index.html index eec809e01b..e25886b602 100644 --- a/files/fr/web/css/pseudo-elements/index.html +++ b/files/fr/web/css/pseudo-elements/index.html @@ -22,8 +22,8 @@ p::first-line { -<div class="blockIndicator note"> -<p><strong>Note:</strong> À la différence des pseudo-éléments, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a> peuvent être utilisées afin de mettre en forme un élément en fonction de son état.</p> +<div class="note"> +<p><strong>Note :</strong> À la différence des pseudo-éléments, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a> peuvent être utilisées afin de mettre en forme un élément en fonction de son état.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -38,7 +38,6 @@ p::first-line { <h2 id="Liste_des_pseudo-éléments">Liste des pseudo-éléments</h2> -<div class="index" id="index"> <ul> <li>{{CSSxRef("::after", "::after (:after)")}}</li> <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li> @@ -54,7 +53,6 @@ p::first-line { <li>{{CSSxRef("::slotted", "::slotted()")}}</li> <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li> </ul> -</div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/quotes/index.html b/files/fr/web/css/quotes/index.html index 968b934472..ca406df88d 100644 --- a/files/fr/web/css/quotes/index.html +++ b/files/fr/web/css/quotes/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/quotes <p>La propriété <strong><code>quotes</code></strong> indique la façon dont les marques de citation sont affichées.</p> -<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/ratio/index.html b/files/fr/web/css/ratio/index.html index 361f14cb36..cd2fc22936 100644 --- a/files/fr/web/css/ratio/index.html +++ b/files/fr/web/css/ratio/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/ratio --- <div>{{CSSRef}}</div> -<p>Le type de donnée CSS <strong><code><ratio></code></strong> permet de décrire les proportions <a href="/fr/docs/Web/CSS/Media_queries">dans les <em>media queries</em></a> (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.</p> +<p>Le type de donnée CSS <strong><code><ratio></code></strong> permet de décrire les proportions <a href="/fr/docs/Web/CSS/Media_Queries">dans les <em>media queries</em></a> (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -33,23 +33,23 @@ translation_of: Web/CSS/ratio </thead> <tbody> <tr> - <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td> + <td><img src="ratio4_3.png"></td> <td><code>4/3</code></td> <td>Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle.</td> </tr> <tr> - <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td> + <td><img src="ratio16_9.png"></td> <td><code>16/9</code></td> <td>Format « moderne » des télévisions.</td> </tr> <tr> - <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td> + <td><img src="ratio1_1.85.png"></td> <td><code>185/100</code> = <code>91/50</code><br> <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td> <td>Le format le plus utilisé pour la projection de films depuis les années 1960.</td> </tr> <tr> - <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td> + <td><img src="ratio1_2.39.png"></td> <td><code>239/100</code><br> <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td> <td>Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).</td> @@ -103,6 +103,6 @@ translation_of: Web/CSS/ratio <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="/fr/docs/Web/CSS/Media_queries">Les <em>media queries</em> CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> CSS</a></li> <li><a href="/fr/docs/Web/CSS/@media/aspect-ratio">La caractéristique média aspect-ratio</a></li> </ul> diff --git a/files/fr/web/css/reference/index.html b/files/fr/web/css/reference/index.html index 8aa4af3b7a..8b41901dc5 100644 --- a/files/fr/web/css/reference/index.html +++ b/files/fr/web/css/reference/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/Reference tags: - CSS - CSS Data Types - - 'I10n:priority' + - I10n:priority - Overview - Reference - Types CSS @@ -12,7 +12,7 @@ translation_of: Web/CSS/Reference --- <div>{{CSSRef}}</div> -<p>Cette <strong>référence CSS</strong> fournit un <strong><a href="#Index_des_mots-clés">index alphabétique</a></strong> de toutes les propriétés <a href="/fr/docs/Web/CSS">CSS</a> standards, des <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a>, des <a href="/fr/docs/Web/CSS/Types_CSS">types de données</a> et des <a href="/fr/docs/Web/CSS/Règles_@">règles @</a>. Vous pouvez également trouver une liste alphabétique de tous les <strong><a href="#Sélecteurs">sélecteurs CSS par type</a></strong> et une liste des <strong><a href="#Concepts">concepts clés de CSS</a></strong>. Enfin est inclus un bref sommaire de <strong><a href="#DOM-CSS_CSSOM">référence sur DOM-CSS / CSSOM</a></strong>.</p> +<p>Cette <strong>référence CSS</strong> fournit un <strong><a href="#index_des_mots-clés">index alphabétique</a></strong> de toutes les propriétés <a href="/fr/docs/Web/CSS">CSS</a> standards, des <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a>, des <a href="/fr/docs/Web/CSS/CSS_Types">types de données</a> et des <a href="/fr/docs/Web/CSS/At-rule">règles @</a>. Vous pouvez également trouver une liste alphabétique de tous les <strong><a href="#sélecteurs">sélecteurs CSS par type</a></strong> et une liste des <strong><a href="#concepts">concepts clés de CSS</a></strong>. Enfin est inclus un bref sommaire de <strong><a href="#dom-css_cssom">référence sur DOM-CSS / CSSOM</a></strong>.</p> <h2 id="Syntaxe_de_règle_basique">Syntaxe de règle basique</h2> @@ -34,7 +34,7 @@ translation_of: Web/CSS/Reference <var> [propriété </var><strong>:</strong> <var>valeur] [</var><strong>; </strong><var>liste-de-propriétés]</var> </pre> -<p>Voir aussi les <a href="#Sélecteurs"><em>sélecteurs</em></a>, <a href="#Pseudo-classes"><em>pseudo-classes</em></a>, et <em><a href="#Pseudo-éléments">pseudo-éléments</a></em> listés ci-dessous. La syntaxe des <em>valeurs</em> dépend du type de données attendu pour chaque <em>propriété</em> indiquée.</p> +<p>Voir aussi les <a href="#sélecteurs"><em>sélecteurs</em></a>, <a href="#pseudo-classes"><em>pseudo-classes</em></a>, et <em><a href="#pseudo-éléments">pseudo-éléments</a></em> listés ci-dessous. La syntaxe des <em>valeurs</em> dépend du type de données attendu pour chaque <em>propriété</em> indiquée.</p> <h4 id="Exemples_de_règle_de_style">Exemples de règle de style</h4> @@ -51,11 +51,11 @@ div.menu-bar li:hover > ul { <h3 id="Syntaxe_des_règles"><strong>Syntaxe des règles @</strong></h3> -<p>Comme la structure des règles @ varie grandement, veuillez consulter <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> pour trouver la syntaxe que vous souhaitez.</p> +<p>Comme la structure des règles @ varie grandement, veuillez consulter <a href="/fr/docs/Web/CSS/At-rule">règle @</a> pour trouver la syntaxe que vous souhaitez.</p> <h2 id="Index_des_mots-clés"><strong>Index des mots-clés</strong></h2> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Les noms de propriétés de cet index n’incluent <strong>pas</strong> les <a href="/fr/docs/Web/CSS/CSS_Properties_Reference">noms de l’API DOM JavaScript</a> lorsqu’ils sont différents des noms standards CSS.</p> </div> @@ -63,18 +63,18 @@ div.menu-bar li:hover > ul { <h2 id="Sélecteurs">Sélecteurs</h2> -<p>Sont indiqués dans ce qui suit les divers <a href="/fr/docs/Web/CSS/Sélecteurs_CSS">sélecteurs</a>, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.</p> +<p>Sont indiqués dans ce qui suit les divers <a href="/fr/docs/Web/CSS/CSS_Selectors">sélecteurs</a>, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.</p> -<h3 id="Sélecteurs_simples"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_sélecteurs_simples/fr/docs/Web/CSS/Sélecteurs_CSS">Sélecteurs simples</a></h3> +<h3 id="Sélecteurs_simples"><a href="/fr/docs/Web/CSS/CSS_Selectors#les_s%c3%a9lecteurs_simples/fr/docs/web/css/s%c3%a9lecteurs_css">Sélecteurs simples</a></h3> <p>Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.</p> <ul> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a> <code><var>nomElement</var></code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a> <code><strong>.</strong><var>nomClasse</var></code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d’identifiant</a> <code><strong>#</strong><var>nomID</var></code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a> <code><strong>*</strong></code>, <code><var>ns</var><strong>|*</strong></code>, <code><strong>*|*</strong></code>, <code><strong>|*</strong></code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d’attribut</a> <code><strong>[</strong><var>attr</var><strong>=</strong><var>valeur</var><strong>]</strong></code></li> + <li><a href="/fr/docs/Web/CSS/Type_selectors">Sélecteur de type</a> <code><var>nomElement</var></code></li> + <li><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a> <code><strong>.</strong><var>nomClasse</var></code></li> + <li><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d’identifiant</a> <code><strong>#</strong><var>nomID</var></code></li> + <li><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a> <code><strong>*</strong></code>, <code><var>ns</var><strong>|*</strong></code>, <code><strong>*|*</strong></code>, <code><strong>|*</strong></code></li> + <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d’attribut</a> <code><strong>[</strong><var>attr</var><strong>=</strong><var>valeur</var><strong>]</strong></code></li> </ul> <h3 id="Sélecteur_de_groupe">Sélecteur de groupe</h3> @@ -84,41 +84,34 @@ div.menu-bar li:hover > ul { <dd>Indique que les éléments des sélecteurs <code>A</code> et <code>B</code> doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.</dd> </dl> -<h3 id="Combinateurs"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_combinateurs">Combinateurs</a></h3> +<h3 id="Combinateurs"><a href="/fr/docs/Web/CSS/CSS_Selectors#les_combinateurs">Combinateurs</a></h3> <p>Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".</p> <dl> - <dt><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Combinateur de voisin direct</a> <code><var>A</var> <strong>+</strong> <var>B</var></code></dt> + <dt><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Combinateur de voisin direct</a> <code><var>A</var> <strong>+</strong> <var>B</var></code></dt> <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit immédiatement celui sélectionné par <code>A</code>.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Combinateur de voisin général</a> <code><var>A</var> <strong>~</strong> <var>B</var></code></dt> + <dt><a href="/fr/docs/Web/CSS/General_sibling_combinator">Combinateur de voisin général</a> <code><var>A</var> <strong>~</strong> <var>B</var></code></dt> <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit celui sélectionné par <code>A</code>, mais pas nécessairement immédiatement après lui.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Combinateur d’enfant</a> <code><var>A</var> <strong>></strong> <var>B</var></code></dt> + <dt><a href="/fr/docs/Web/CSS/Child_combinator">Combinateur d’enfant</a> <code><var>A</var> <strong>></strong> <var>B</var></code></dt> <dd>Indique que l’élément sélectionné par <code>B</code> est un enfant direct de l’élément sélectionné par <code>A</code>.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Combinateur de descendant</a> <code><var>A</var> <var>B</var></code></dt> + <dt><a href="/fr/docs/Web/CSS/Descendant_combinator">Combinateur de descendant</a> <code><var>A</var> <var>B</var></code></dt> <dd>Indique que l’élément sélectionné par <code>B</code> est un descendant de l’élément sélectionné par <code>A</code>, mais n’en est pas nécessairement un enfant direct.</dd> <dt><a href="/fr/docs/Web/CSS/Column_combinator">Combinateur de colonne</a> <code><var>A</var> <strong>||</strong> <var>B</var></code> {{Experimental_Inline}}</dt> <dd>Indique que l’élément sélectionné par <code>B</code> est situé dans la colonne de table indiquée par <code>A</code>. Les éléments qui s’étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.</dd> </dl> -<h3 id="Pseudo-classes"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_pseudo-classes">Pseudo-classes</a></h3> +<h3 id="Pseudo">Pseudo</h3> -<div class="index"> -<ul> - <li class="hidden">{{Page("/fr/docs/Web/CSS/Pseudo-classes", "index")}}</li> -</ul> -</div> - -<h3 id="Pseudo-éléments"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_pseudo-éléments">Pseudo-éléments</a></h3> - -<div class="index"> -<ul> - <li class="hidden">{{Page("/fr/docs/Web/CSS/Pseudo-elements", "index")}}</li> -</ul> -</div> +<dl> + <dt><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> <code>:</code></dt> + <dd>Définit un état spécial pour le ou les éléments ciblés.</dd> + <dt><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-éléments</a> <code>::</code></dt> + <dd>Représente des entités qui ne sont pas incluses en HTML.</dd> +</dl> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Une <a href="https://www.w3.org/TR/selectors/#overview">liste complète des sélecteurs</a> existe dans le module de spécification Selectors de niveau 4.</p> +<div class="callout"> +<p>See also <a href="https://www.w3.org/TR/selectors/#overview">Selectors in the Selectors Level 4 specification</a>.</p> </div> <h2 id="Concepts">Concepts</h2> @@ -126,40 +119,40 @@ div.menu-bar li:hover > ul { <h3 id="Syntaxe_et_sémantique">Syntaxe et sémantique</h3> <ul> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Règles_@">Règles @ (<em>at-rules</em>)</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade</a></li> + <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Syntaxe CSS</a></li> + <li><a href="/fr/docs/Web/CSS/At-rule">Règles @ (<em>at-rules</em>)</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade</a></li> <li><a href="/fr/docs/Web/CSS/Comments">Commentaires</a></li> - <li><a href="/fr/docs/Glossaire/Descripteur_(CSS)">Descripteurs</a></li> - <li><a href="/fr/docs/Web/CSS/Héritage">Héritage</a></li> - <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Propriétés raccourcies</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">Spécificité</a></li> - <li><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">Syntaxe de définition des valeurs</a></li> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Unités et valeurs CSS</a></li> + <li><a href="/fr/docs/Glossary/Descriptor_(CSS)">Descripteurs</a></li> + <li><a href="/fr/docs/Web/CSS/inheritance">Héritage</a></li> + <li><a href="/fr/docs/Web/CSS/Shorthand_properties">Propriétés raccourcies</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#sp%c3%a9cificit%c3%a9">Spécificité</a></li> + <li><a href="/fr/docs/Web/CSS/Value_definition_syntax">Syntaxe de définition des valeurs</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Unités et valeurs CSS</a></li> </ul> <h3 id="Valeurs">Valeurs</h3> <ul> - <li><a href="/fr/docs/Web/CSS/valeur_reelle">Valeur réelle</a></li> - <li><a href="/fr/docs/Web/CSS/Valeur_calculée">Valeur calculée</a></li> - <li><a href="/fr/docs/Web/CSS/Valeur_initiale">Valeur initiale</a></li> - <li><a href="/fr/docs/Web/CSS/valeur_résolue">Valeur résolue</a></li> - <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">Valeur spécifiée</a></li> - <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">Valeur utilisée</a></li> + <li><a href="/fr/docs/Web/CSS/actual_value">Valeur réelle</a></li> + <li><a href="/fr/docs/Web/CSS/computed_value">Valeur calculée</a></li> + <li><a href="/fr/docs/Web/CSS/initial_value">Valeur initiale</a></li> + <li><a href="/fr/docs/Web/CSS/resolved_value">Valeur résolue</a></li> + <li><a href="/fr/docs/Web/CSS/specified_value">Valeur spécifiée</a></li> + <li><a href="/fr/docs/Web/CSS/used_value">Valeur utilisée</a></li> </ul> <h3 id="Disposition">Disposition</h3> <ul> - <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Contexte de formatage de bloc</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Modèle de boîte</a></li> - <li><a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">Bloc englobant</a></li> - <li><a href="/fr/docs/Web/CSS/Mode_de_mise_en_page">Modes de disposition</a></li> - <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">Fusion des marges</a></li> - <li><a href="/fr/docs/Web/CSS/Élément_remplacé">Éléments remplacés</a></li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">Contexte d'empilement</a></li> - <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Modèle de mise en forme visuelle</a></li> + <li><a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">Contexte de formatage de bloc</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Modèle de boîte</a></li> + <li><a href="/fr/docs/Web/CSS/Containing_block">Bloc englobant</a></li> + <li><a href="/fr/docs/Web/CSS/Layout_mode">Modes de disposition</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Fusion des marges</a></li> + <li><a href="/fr/docs/Web/CSS/Replaced_element">Éléments remplacés</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Contexte d'empilement</a></li> + <li><a href="/fr/docs/Web/CSS/Visual_formatting_model">Modèle de mise en forme visuelle</a></li> </ul> <h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> @@ -167,7 +160,7 @@ div.menu-bar li:hover > ul { <h3 id="Principaux_types_dobjets">Principaux types d'objets</h3> <ul> - <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li> + <li>{{DOMxRef("Document.styleSheets")}}</li> <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li> <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> (sélecteur et style)</li> <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li> @@ -187,7 +180,7 @@ div.menu-bar li:hover > ul { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Extensions spécifiques de Mozilla à CSS</a> (préfixées avec <code>-moz-</code>)</li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Extensions spécifiques de WebKit à CSS</a> (préfixées pour la plupart avec <code>-webkit-</code>)</li> - <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Extensions spécifiques de Microsoft à CSS</a> (préfixées pour la plupart avec <code>-ms-</code>)</li> + <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Extensions spécifiques de Mozilla à CSS</a> (préfixées avec <code>-moz-</code>)</li> + <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Extensions spécifiques de WebKit à CSS</a> (préfixées pour la plupart avec <code>-webkit-</code>)</li> + <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Extensions spécifiques de Microsoft à CSS</a> (préfixées pour la plupart avec <code>-ms-</code>)</li> </ul> diff --git a/files/fr/web/css/repeat()/index.html b/files/fr/web/css/repeat()/index.html index cea02f4230..e5657510f3 100644 --- a/files/fr/web/css/repeat()/index.html +++ b/files/fr/web/css/repeat()/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/repeat() <p>Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles.</p> -<pre class="brush: css no-line-numbers notranslate">/* Valeurs de type <track-repeat> */ +<pre class="brush: css no-line-numbers">/* Valeurs de type <track-repeat> */ repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) @@ -82,7 +82,7 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3] notranslate">#container { +<pre class="brush: css">#container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; @@ -101,7 +101,7 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div> Un élément qui mesure 50 pixels de large. </div> diff --git a/files/fr/web/css/resize/index.html b/files/fr/web/css/resize/index.html index e0054df978..e2cde42faa 100644 --- a/files/fr/web/css/resize/index.html +++ b/files/fr/web/css/resize/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/resize <div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -50,7 +48,9 @@ resize: unset; <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.</dd> </dl> -<div class="note"><strong>Note :</strong> <code>resize</code> ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut <code>visible</code>.</div> +<div class="note"> + <p><strong>Note :</strong> <code>resize</code> ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut <code>visible</code>.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/resolution/index.html b/files/fr/web/css/resolution/index.html index 404a790051..46e7ea706a 100644 --- a/files/fr/web/css/resolution/index.html +++ b/files/fr/web/css/resolution/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/resolution --- <div>{{CSSRef}}</div> -<p>Le type de donnée CSS <strong><code><resolution></code></strong>, utilisé dans les <em><a href="/fr/docs/Web/CSS/Media_queries">media queries</a></em>, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.</p> +<p>Le type de donnée CSS <strong><code><resolution></code></strong>, utilisé dans les <em><a href="/fr/docs/Web/CSS/Media_Queries">media queries</a></em>, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.</p> <p>Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.</p> @@ -22,13 +22,13 @@ translation_of: Web/CSS/resolution <h3 id="Unités">Unités</h3> <dl> - <dt><code><a name="dpi">dpi</a></code></dt> + <dt><code>dpi</code></dt> <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce">points par pouce</a>. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, <code>1 dpi ≈ 0,39 dpcm</code>.</dd> - <dt><code><a name="dpcm">dpcm</a></code></dt> + <dt><code>dpcm</code></dt> <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion">points par centimètre</a>. Puisque 1 pouce équivaut à 2.54 cm, <code>1dpcm ≈ 2,54 dpi</code>.</dd> - <dt><code><a name="dppx">dppx</a></code></dt> - <dd>Cette unité représente le nombre de points par unité CSS <code>px</code>. Puisque le ratio entre les unités CSS <code class="css">in</code> et CSS <code class="css">px</code> vaut 1:96, <code class="css">1 dppx</code> est équivalent à <code class="css">96 dpi</code>, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.</dd> - <dt><a id="x" name="x"><code>x</code></a></dt> + <dt><code>dppx</code></dt> + <dd>Cette unité représente le nombre de points par unité CSS <code>px</code>. Puisque le ratio entre les unités CSS <code>in</code> et CSS <code>px</code> vaut 1:96, <code>1 dppx</code> est équivalent à <code>96 dpi</code>, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.</dd> + <dt><code>x</code></dt> <dd>Un alias pour <code>dppx</code>.</dd> </dl> @@ -43,7 +43,7 @@ translation_of: Web/CSS/resolution <p>Voici quelques exemples d'utilisation correcte de données de type <code><resolution></code> :</p> <pre class="brush: css">96dpi Usage correct : un {{cssxref("<number>")}} (ici un {{cssxref("<integer>")}}) suivi d'une unité. -@media print and (min-resolution: 300dpi) { ... } Usage correct dans le contexte d'une <a href="/fr/docs/CSS/Media_queries">media query</a>. +@media print and (min-resolution: 300dpi) { ... } Usage correct dans le contexte d'une <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">media query</a>. </pre> <h3 id="Usages_incorrects">Usages incorrects</h3> @@ -120,6 +120,6 @@ ten dpi Incorrect : seules des expressions numériques sont acceptées. <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Media_queries">Les <em>media queries</em> CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> CSS</a></li> <li><a href="/fr/docs/Web/CSS/@media/resolution">La caractéristique média <code>resolution</code></a></li> </ul> diff --git a/files/fr/web/css/revert/index.html b/files/fr/web/css/revert/index.html index 7794fbac93..def309ccef 100644 --- a/files/fr/web/css/revert/index.html +++ b/files/fr/web/css/revert/index.html @@ -26,11 +26,11 @@ translation_of: Web/CSS/revert <p><code>revert</code> n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> <code>revert</code> est une simple valeur, il est toujours possible de la surcharger par une autre avec une règle d'une <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificité</a> supérieure.</p> </div> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Le mot-clé <code>revert</code> est différent de {{cssxref("initial")}} et ne doit pas être confondu avec ce dernier. {{cssxref("initial")}} utilise <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a>, définie pour chaque propriété par les spécifications CSS. En revanche, les feuilles de style des agents utilisateurs définissent des valeurs par défaut selon les sélecteurs CSS. Par exemple, <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> de {{cssxref("display")}} est <code>inline</code> mais un agent utilisateur pourra définir les valeurs par défaut suivante dans sa feuille de style : <code>block</code> pour {{HTMLElement("div")}}, <code>table</code> pour {{HTMLElement("table")}} etc.</p> </div> diff --git a/files/fr/web/css/right/index.html b/files/fr/web/css/right/index.html index 8ac85f97e1..2d1f94619b 100644 --- a/files/fr/web/css/right/index.html +++ b/files/fr/web/css/right/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/right <div>{{EmbedInteractiveExample("pages/css/right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'effet de la propriété <code>right</code> dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :</p> <ul> diff --git a/files/fr/web/css/rotate/index.html b/files/fr/web/css/rotate/index.html index 0ad8b2277d..591a0fd5a3 100644 --- a/files/fr/web/css/rotate/index.html +++ b/files/fr/web/css/rotate/index.html @@ -38,7 +38,7 @@ rotate: 1 1 1 90deg;</pre> <dd>Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (<code>"x"</code>, "<code>y</code>" ou "<code>z"</code>), puis une valeur {{cssxref("<angle>")}} qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code>.</dd> <dt>Un vecteur et l'angle associé</dt> <dd>Trois nombres (valeurs {{cssxref("<number>")}}) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur {{cssxref("<angle>")}} qui indique l'angle de rotation. Cela est équivalent à la fonction <code>rotate3d()</code>.</dd> - <dt id="none"><code>none</code></dt> + <dt><code>none</code></dt> <dd>Cette valeur indique qu'aucune rotation ne devrait être appliquée.</dd> </dl> diff --git a/files/fr/web/css/row-gap/index.html b/files/fr/web/css/row-gap/index.html index dc90a53689..7133eec821 100644 --- a/files/fr/web/css/row-gap/index.html +++ b/files/fr/web/css/row-gap/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/row-gap <div>{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette propriété préfixée a ensuite été remplacée par <code>row-gap</code> dans le module <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Alignment</a> afin d'être généralisée à d'autres modes de disposition. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p> </div> @@ -57,7 +55,7 @@ row-gap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[4]">#flexbox { +<pre class="brush: css">#flexbox { display: flex; flex-wrap: wrap; width: 300px; @@ -91,14 +89,12 @@ row-gap: unset; <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css">#grid { +<pre class="brush: css hidden">#grid { grid-row-gap: 20px; } </pre> -</div> -<pre class="brush: css; highlight[6]">#grid { +<pre class="brush: css">#grid { display: grid; height: 200px; grid-template-columns: 200px; diff --git a/files/fr/web/css/ruby-align/index.html b/files/fr/web/css/ruby-align/index.html index ac0f175cb5..51d72cbbe4 100644 --- a/files/fr/web/css/ruby-align/index.html +++ b/files/fr/web/css/ruby-align/index.html @@ -55,7 +55,7 @@ ruby-align: unset; <h3 id="Alignement_par_rapport_au_début_du_texte_de_base">Alignement par rapport au début du texte de base</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> @@ -71,7 +71,7 @@ ruby-align: unset; <h3 id="Alignement_par_rapport_au_centre">Alignement par rapport au centre</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> @@ -87,7 +87,7 @@ ruby-align: unset; <h3 id="Un_espace_supplémentaire_entre_les_éléments_ruby">Un espace supplémentaire entre les éléments ruby</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> diff --git a/files/fr/web/css/ruby-position/index.html b/files/fr/web/css/ruby-position/index.html index bd7ca3a8cb..a0b683a0e5 100644 --- a/files/fr/web/css/ruby-position/index.html +++ b/files/fr/web/css/ruby-position/index.html @@ -52,7 +52,7 @@ ruby-position: unset; <h3 id="Au-dessus_du_texte">Au-dessus du texte</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> @@ -68,7 +68,7 @@ ruby-position: unset; <h3 id="En-dessous_du_texte">En-dessous du texte</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> diff --git a/files/fr/web/css/scale/index.html b/files/fr/web/css/scale/index.html index 5b0f0ea731..87f30418cd 100644 --- a/files/fr/web/css/scale/index.html +++ b/files/fr/web/css/scale/index.html @@ -37,7 +37,7 @@ scale: 2 0.5 2;</pre> <dd>Deux longueurs ou pourcentages qui définissent respectivement les composantes horizontale et verticale de l'agrandissement/rétrécissement en deux dimensions. Cela est équivalent à la fonction <code>scale()</code> appelée avec ces deux arguments.</dd> <dt>Trois valeurs de longueur/pourcentage</dt> <dd>Trois longueurs ou pourcentages qui définissent respectivement les composantes horizontale, verticale et en profondeur de la mise à l'échelle sur trois dimensions. Cela est équivalent à la fonction <code>scale3d()</code> appelée avec ces trois arguments.</dd> - <dt id="none"><code>none</code></dt> + <dt><code>none</code></dt> <dd>Cette valeur indique qu'aucune mise à l'échelle ne devrait être appliquée.</dd> </dl> diff --git a/files/fr/web/css/scaling_of_svg_backgrounds/index.html b/files/fr/web/css/scaling_of_svg_backgrounds/index.html index 8e48618b9b..8abfc2fcc4 100644 --- a/files/fr/web/css/scaling_of_svg_backgrounds/index.html +++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.html @@ -33,17 +33,16 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG <p>Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.</p> -<p><img alt="no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5860/=no-dimensions-or-ratio.png"></p> - -<p><a href="/@api/deki/files/5864/=no-dimensions-or-ratio.svg">Fichier source SVG</a></p> +<p><img src="no-dimensions-or-ratio.png"></p> +<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3469/6587a382ffb2c944462a6b110b079496/no-dimensions-or-ratio.svg" title="no-dimensions-or-ratio.svg">Fichier SVG source</a></p> <h3 id="Image_sans_proportion_avec_une_dimension_fixée">Image sans proportion avec une dimension fixée</h3> <p>Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.</p> -<p><img alt="100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5858/=100px-wide-no-height-or-ratio.png"></p> +<p><img src="100px-wide-no-height-or-ratio.png"></p> -<p><a href="/@api/deki/files/5863/=100px-wide-no-height-or-ratio.svg">Fichier source SVG</a></p> +<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3468/af73bea307a10ffe2559df42fad199e3/100px-wide-no-height-or-ratio.svg" title="100px-wide-no-height-or-ratio.svg">Fichier SVG source</a></p> <h3 id="Image_avec_une_dimension_fixée_et_des_proportions_intrinsèques">Image avec une dimension fixée et des proportions intrinsèques</h3> @@ -51,23 +50,25 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG <p>On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.</p> -<p><img alt="100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5857/=100px-height-3x4-ratio.png"></p> +<p><img src="100px-height-3x4-ratio.png"></p> -<p><a href="/@api/deki/files/5862/=100px-height-3x4-ratio.svg">Fichier source SVG</a></p> +<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3467/fd0c534c506be06d52f0a954a59863a6/100px-height-3x4-ratio.svg" title="100px-height-3x4-ratio.svg">Fichier SVG source</a></p> <h3 id="Image_sans_largeur_ni_hauteur_mais_avec_des_proportions_intrinsèques">Image sans largeur ni hauteur mais avec des proportions intrinsèques</h3> <p>Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.</p> -<p><img alt="no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5859/=no-dimensions-1x1-ratio.png"></p> +<p><img src="no-dimensions-1x1-ratio.png"></p> -<p><a href="/@api/deki/files/5861/=no-dimensions-1x1-ratio.svg">Fichier source SVG</a></p> +<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3466/a3398e03c058d99fb2b7837167cdbc26/no-dimensions-1x1-ratio.svg" title="no-dimensions-1x1-ratio.svg">Fichier SVG source</a></p> <h2 id="Exemples_de_redimensionnement">Exemples de redimensionnement</h2> <p>Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec <code>no-repeat</code> pour plus de clarté..</p> -<div class="note"><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</div> +<div class="note"> + <p><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</p> +</div> <h3 id="Indiquer_des_dimensions_fixées_sur_les_deux_axes">Indiquer des dimensions fixées sur les deux axes</h3> @@ -77,49 +78,49 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG <p>Avec ces déclarations CSS :</p> -<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-or-ratio.svg); background-size: 125px 175px; </pre> <p>On doit obtenir un résultat semblable à :</p> -<p><img alt="fixed-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5868/=fixed-no-dimensions-or-ratio.png"></p> +<p><img src="fixed-no-dimensions-or-ratio.png"></p> <h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion">SVG source : Une dimension définie et aucune proportion</h4> <p>Avec ces déclarations CSS :</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: 250px 150px; </pre> <p>On doit obtenir un résultat semblable à :</p> -<p><img alt="fixed-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5866/=fixed-100px-wide-no-height-or-ratio.png"></p> +<p><img src="fixed-100px-wide-no-height-or-ratio.png"></p> <h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques">SVG source : Une dimension définie et des proportions intrinsèques</h4> <p>Avec ces déclarations CSS :</p> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: 275px 125px; </pre> <p>On doit obtenir un résultat semblable à :</p> -<p><img alt="fixed-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5865/=fixed-100px-height-3x4-ratio.png"></p> +<p><img src="fixed-100px-height-3x4-ratio.png"></p> <h4 id="SVG_source_Aucune_largeur_ni_hauteur_définie_mais_des_proportions_intrinsèques">SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques</h4> <p>Avec ces déclarations CSS :</p> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: 250px 100px; </pre> <p>On doit obtenir un résultat semblable à :</p> -<p><img alt="fixed-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5867/=fixed-no-dimensions-1x1-ratio.png"></p> +<p><img src="fixed-no-dimensions-1x1-ratio.png"></p> <h3 id="Utiliser_contain_ou_cover">Utiliser <code>contain</code> ou <code>cover</code></h3> @@ -131,25 +132,25 @@ background-size: 250px 100px; <p>Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).</p> -<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-or-ratio.svg); background-size: contain; </pre> <p>Le résultat obtenu sera :</p> -<p><img alt="no-dimensions-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5874/=no-dimensions-or-ratio-contain.png"></p> +<p><img src="no-dimensions-or-ratio-contain.png"></p> <h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion_2">SVG source : Une dimension définie et aucune proportion</h4> <p>De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: contain; </pre> <p>Le résultat obtenu sera :</p> -<p><img alt="100px-wide-no-height-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5871/=100px-wide-no-height-or-ratio-contain.png"></p> +<p><img src="100px-wide-no-height-or-ratio-contain.png"></p> <h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques_2">SVG source : Une dimension définie et des proportions intrinsèques</h4> @@ -157,25 +158,25 @@ background-size: contain; <h5 id="contain"><code>contain</code></h5> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: contain; </pre> <p>Le résultat obtenu sera :</p> -<p><img alt="100px-height-3x4-ratio-contain.png" class="default internal" src="/@api/deki/files/5869/=100px-height-3x4-ratio-contain.png"></p> +<p><img src="100px-height-3x4-ratio-contain.png"></p> <p>On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.</p> <h5 id="cover"><code>cover</code></h5> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: cover; </pre> <p>Le résultat obtenu sera :</p> -<p><img alt="100px-height-3x4-ratio-cover.png" class="default internal" src="/@api/deki/files/5870/=100px-height-3x4-ratio-cover.png"></p> +<p><img src="100px-height-3x4-ratio-cover.png"></p> <p>Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.</p> @@ -185,25 +186,25 @@ background-size: cover; <h5 id="contain_2"><code>contain</code></h5> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: contain; </pre> <p>Le résultat ressemblera à :</p> -<p><img alt="no-dimensions-1x1-ratio-contain.png" class="default internal" src="/@api/deki/files/5872/=no-dimensions-1x1-ratio-contain.png"></p> +<p><img src="no-dimensions-1x1-ratio-contain.png"></p> <p>On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.</p> <h5 id="cover_2"><code>cover</code></h5> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: cover; </pre> <p>Le résultat ressemblera à :</p> -<p><img alt="no-dimensions-1x1-ratio-cover.png" class="default internal" src="/@api/deki/files/5873/=no-dimensions-1x1-ratio-cover.png"></p> +<p><img src="no-dimensions-1x1-ratio-cover.png"></p> <p>Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.</p> @@ -215,25 +216,25 @@ background-size: cover; <p>Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.</p> -<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-or-ratio.svg); background-size: auto auto; </pre> <p>Voici le résultat obtenu :</p> -<p><img alt="auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5878/=auto-no-dimensions-or-ratio.png"></p> +<p><img src="auto-no-dimensions-or-ratio.png"></p> <h4 id="SVG_source_une_dimension_mais_aucune_proportion_intrinsèque">SVG source : une dimension mais aucune proportion intrinsèque</h4> <p>S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: auto auto; </pre> <p>Voici le résultat obtenu :</p> -<p><img alt="auto-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5876/=auto-100px-wide-no-height-or-ratio.png"></p> +<p><img src="auto-100px-wide-no-height-or-ratio.png"></p> <p>Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).</p> @@ -241,13 +242,13 @@ background-size: auto auto; <p>Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.</p> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: auto auto; </pre> <p>Le résultat sera le suivant :</p> -<p><img alt="auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5875/=auto-100px-height-3x4-ratio.png"></p> +<p><img src="auto-100px-height-3x4-ratio.png"></p> <p>Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec <code>auto</code>.</p> @@ -255,13 +256,13 @@ background-size: auto auto; <p>Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour <code>contain</code>.</p> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: auto auto; </pre> <p>Le résultat ressemblera à :</p> -<p><img alt="auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5877/=auto-no-dimensions-1x1-ratio.png"></p> +<p><img src="auto-no-dimensions-1x1-ratio.png"></p> <h3 id="Utiliser_auto_et_une_dimension_fixée">Utiliser <code>auto</code> et une dimension fixée</h3> @@ -271,11 +272,11 @@ background-size: auto auto; <p>Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour <code>auto</code>.</p> -<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-or-ratio.svg); background-size: auto 140px; </pre> -<p><img alt="1auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5881/=1auto-no-dimensions-or-ratio.png"></p> +<p><img src="1auto-no-dimensions-or-ratio.png"></p> <p>Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).</p> @@ -283,19 +284,19 @@ background-size: auto 140px; <p>Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut <code>auto</code> dans le code CSS.</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: 200px auto; </pre> -<p><img alt="100px-wide-no-height-or-ratio-length-auto.png" class="default internal" src="/@api/deki/files/5883/=100px-wide-no-height-or-ratio-length-auto.png"></p> +<p><img src="100px-wide-no-height-or-ratio-length-auto.png"></p> <p>Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur <code>auto</code>, l'image fera la même hauteur que la zone pour l'arrière-plan.</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: auto 125px; </pre> -<p><img alt="100px-wide-no-height-or-ratio-auto-length.png" class="default internal" src="/@api/deki/files/5882/=100px-wide-no-height-or-ratio-auto-length.png"></p> +<p><img src="100px-wide-no-height-or-ratio-auto-length.png"></p> <p>Ici, c'est la largeur qui vaut <code>auto</code> et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.</p> @@ -303,11 +304,11 @@ background-size: auto 125px; <p>Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.</p> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: 150px auto; </pre> -<p><img alt="1auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5879/=1auto-100px-height-3x4-ratio.png"></p> +<p><img src="1auto-100px-height-3x4-ratio.png"></p> <p>Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (<code>auto</code> dans la feuille de style).</p> @@ -315,11 +316,11 @@ background-size: 150px auto; <p>Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).</p> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: 150px auto; </pre> -<p><img alt="1auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5880/=1auto-no-dimensions-1x1-ratio.png"></p> +<p><img src="1auto-no-dimensions-1x1-ratio.png"></p> <p>La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.</p> diff --git a/files/fr/web/css/scroll-behavior/index.html b/files/fr/web/css/scroll-behavior/index.html index 0d144f612a..b36cc1c52b 100644 --- a/files/fr/web/css/scroll-behavior/index.html +++ b/files/fr/web/css/scroll-behavior/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/scroll-behavior <div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément <code>body</code>, elle ne se propage pas à la zone d'affichage (<em>viewport</em>).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-margin-block-end/index.html b/files/fr/web/css/scroll-margin-block-end/index.html index 1ace40f8df..a74b5f68b8 100644 --- a/files/fr/web/css/scroll-margin-block-end/index.html +++ b/files/fr/web/css/scroll-margin-block-end/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/scroll-margin-block-end <div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-block-start/index.html b/files/fr/web/css/scroll-margin-block-start/index.html index c41b7d29c2..7b3be15a1c 100644 --- a/files/fr/web/css/scroll-margin-block-start/index.html +++ b/files/fr/web/css/scroll-margin-block-start/index.html @@ -14,9 +14,6 @@ translation_of: Web/CSS/scroll-margin-block-start <div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-block/index.html b/files/fr/web/css/scroll-margin-block/index.html index 354b01a2e3..b6dc166495 100644 --- a/files/fr/web/css/scroll-margin-block/index.html +++ b/files/fr/web/css/scroll-margin-block/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/scroll-margin-block <div>{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-margin-bottom/index.html b/files/fr/web/css/scroll-margin-bottom/index.html index a85df0779b..0986de2acb 100644 --- a/files/fr/web/css/scroll-margin-bottom/index.html +++ b/files/fr/web/css/scroll-margin-bottom/index.html @@ -13,10 +13,6 @@ translation_of: Web/CSS/scroll-margin-bottom <div>{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-inline-end/index.html b/files/fr/web/css/scroll-margin-inline-end/index.html index 6dc94a9c6a..18711e98e7 100644 --- a/files/fr/web/css/scroll-margin-inline-end/index.html +++ b/files/fr/web/css/scroll-margin-inline-end/index.html @@ -14,9 +14,6 @@ translation_of: Web/CSS/scroll-margin-inline-end <div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-inline-start/index.html b/files/fr/web/css/scroll-margin-inline-start/index.html index a560718073..4df15ab81d 100644 --- a/files/fr/web/css/scroll-margin-inline-start/index.html +++ b/files/fr/web/css/scroll-margin-inline-start/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/scroll-margin-inline-start <div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-left/index.html b/files/fr/web/css/scroll-margin-left/index.html index 0cfcdbb86b..0dfa5d2da7 100644 --- a/files/fr/web/css/scroll-margin-left/index.html +++ b/files/fr/web/css/scroll-margin-left/index.html @@ -13,9 +13,6 @@ translation_of: Web/CSS/scroll-margin-left <div>{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-right/index.html b/files/fr/web/css/scroll-margin-right/index.html index 88e47ad18c..40c8d6a091 100644 --- a/files/fr/web/css/scroll-margin-right/index.html +++ b/files/fr/web/css/scroll-margin-right/index.html @@ -13,9 +13,6 @@ translation_of: Web/CSS/scroll-margin-right <div>{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-top/index.html b/files/fr/web/css/scroll-margin-top/index.html index c97d727a70..4224a5fa9d 100644 --- a/files/fr/web/css/scroll-margin-top/index.html +++ b/files/fr/web/css/scroll-margin-top/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/scroll-margin-top <div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin/index.html b/files/fr/web/css/scroll-margin/index.html index 726be65991..e26d030e58 100644 --- a/files/fr/web/css/scroll-margin/index.html +++ b/files/fr/web/css/scroll-margin/index.html @@ -13,9 +13,6 @@ translation_of: Web/CSS/scroll-margin <p>La propriété <code>scroll-margin</code> est une propriété raccourcie qui permet de définir l'ensemble des propriétés <code>scroll-margin-top</code>, <code>scroll-margin-left</code>, <code>scroll-margin-bottom</code> et <code>scroll-margin-right</code> (de la même façon que la propriété <code>margin</code> définit les différents côtés des marges).</p> <div>{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les valeurs de <code>scroll-margin</code> correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-padding-block-end/index.html b/files/fr/web/css/scroll-padding-block-end/index.html index 72378e2c4f..611ab1bdd8 100644 --- a/files/fr/web/css/scroll-padding-block-end/index.html +++ b/files/fr/web/css/scroll-padding-block-end/index.html @@ -16,10 +16,6 @@ translation_of: Web/CSS/scroll-padding-block-end <div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-block-start/index.html b/files/fr/web/css/scroll-padding-block-start/index.html index f8687498fe..5d844f73ef 100644 --- a/files/fr/web/css/scroll-padding-block-start/index.html +++ b/files/fr/web/css/scroll-padding-block-start/index.html @@ -16,10 +16,6 @@ translation_of: Web/CSS/scroll-padding-block-start <div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-block/index.html b/files/fr/web/css/scroll-padding-block/index.html index 448fc5ae5b..4e7e1f9fed 100644 --- a/files/fr/web/css/scroll-padding-block/index.html +++ b/files/fr/web/css/scroll-padding-block/index.html @@ -14,9 +14,6 @@ translation_of: Web/CSS/scroll-padding-block <p>La propriété <code><strong>scroll-padding-block</strong></code> est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir <code>scroll-padding-block-end</code> et <code>scroll-padding-block-start</code>.</p> <div>{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-padding-bottom/index.html b/files/fr/web/css/scroll-padding-bottom/index.html index 2fab84e198..d592b7a908 100644 --- a/files/fr/web/css/scroll-padding-bottom/index.html +++ b/files/fr/web/css/scroll-padding-bottom/index.html @@ -15,10 +15,6 @@ translation_of: Web/CSS/scroll-padding-bottom <div>{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-inline-end/index.html b/files/fr/web/css/scroll-padding-inline-end/index.html index 7c840c2e1f..f85b1011ab 100644 --- a/files/fr/web/css/scroll-padding-inline-end/index.html +++ b/files/fr/web/css/scroll-padding-inline-end/index.html @@ -16,9 +16,6 @@ translation_of: Web/CSS/scroll-padding-inline-end <div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-inline-start/index.html b/files/fr/web/css/scroll-padding-inline-start/index.html index ddf0641a80..554c8f1ae2 100644 --- a/files/fr/web/css/scroll-padding-inline-start/index.html +++ b/files/fr/web/css/scroll-padding-inline-start/index.html @@ -16,10 +16,6 @@ translation_of: Web/CSS/scroll-padding-inline-start <div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-inline/index.html b/files/fr/web/css/scroll-padding-inline/index.html index fe625af647..3aadefb3d9 100644 --- a/files/fr/web/css/scroll-padding-inline/index.html +++ b/files/fr/web/css/scroll-padding-inline/index.html @@ -15,9 +15,6 @@ translation_of: Web/CSS/scroll-padding-inline <div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-padding-left/index.html b/files/fr/web/css/scroll-padding-left/index.html index 31c4412dbc..92133375ec 100644 --- a/files/fr/web/css/scroll-padding-left/index.html +++ b/files/fr/web/css/scroll-padding-left/index.html @@ -15,10 +15,6 @@ translation_of: Web/CSS/scroll-padding-left <div>{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-right/index.html b/files/fr/web/css/scroll-padding-right/index.html index c2fa824567..5640c3bcd9 100644 --- a/files/fr/web/css/scroll-padding-right/index.html +++ b/files/fr/web/css/scroll-padding-right/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/scroll-padding-right <div>{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-top/index.html b/files/fr/web/css/scroll-padding-top/index.html index 9a14746299..0239142642 100644 --- a/files/fr/web/css/scroll-padding-top/index.html +++ b/files/fr/web/css/scroll-padding-top/index.html @@ -15,9 +15,6 @@ translation_of: Web/CSS/scroll-padding-top <div>{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding/index.html b/files/fr/web/css/scroll-padding/index.html index 199bc9cea5..4cc7897009 100644 --- a/files/fr/web/css/scroll-padding/index.html +++ b/files/fr/web/css/scroll-padding/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/scroll-padding <div>{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés <code>scroll-padding-*</code> permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-snap-align/index.html b/files/fr/web/css/scroll-snap-align/index.html index a19eb9da69..713109b208 100644 --- a/files/fr/web/css/scroll-snap-align/index.html +++ b/files/fr/web/css/scroll-snap-align/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/scroll-snap-align <p>La propriété <strong><code>scroll-snap-align</code></strong> définit la position de la boîte d'accroche (<em>snap positions</em>) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ scroll-snap-align: none; @@ -24,7 +24,7 @@ scroll-snap-align: initial; scroll-snap-align: unset; </pre> -<h3 id="Values" name="Values">Valeurs</h3> +<h3 id="Values">Valeurs</h3> <dl> <dt><code>none</code></dt> @@ -66,6 +66,6 @@ scroll-snap-align: unset; <p>{{Compat("css.properties.scroll-snap-align")}}</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">le bug n°191865</a>.</p> +<div class="warning"> +<p><strong>Attention :</strong> Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">le bug n°191865</a>.</p> </div> diff --git a/files/fr/web/css/scroll-snap-type/index.html b/files/fr/web/css/scroll-snap-type/index.html index a6e4473b78..7e2c8520c4 100644 --- a/files/fr/web/css/scroll-snap-type/index.html +++ b/files/fr/web/css/scroll-snap-type/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/scroll-snap-type <div>{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ diff --git a/files/fr/web/css/scrollbar-color/index.html b/files/fr/web/css/scrollbar-color/index.html index b150656878..a15e992993 100644 --- a/files/fr/web/css/scrollbar-color/index.html +++ b/files/fr/web/css/scrollbar-color/index.html @@ -13,7 +13,6 @@ translation_of: Web/CSS/scrollbar-color <p>{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}</p> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scrollbar-width/index.html b/files/fr/web/css/scrollbar-width/index.html index f0ac30fe71..c39f16f385 100644 --- a/files/fr/web/css/scrollbar-width/index.html +++ b/files/fr/web/css/scrollbar-width/index.html @@ -13,9 +13,6 @@ translation_of: Web/CSS/scrollbar-width <p>{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}</p> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/shape-image-threshold/index.html b/files/fr/web/css/shape-image-threshold/index.html index 5efb59cee7..61b0f75207 100644 --- a/files/fr/web/css/shape-image-threshold/index.html +++ b/files/fr/web/css/shape-image-threshold/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/shape-image-threshold <div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Touts les pixels dont la composante alpha est supérieure à ce seuil seront retenus pour délimiter les contours de la formes. Une valeur de 0.5 indiquera par exemple qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50%.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -47,7 +45,7 @@ shape-image-threshold: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; hightlight[9]">#gradient-shape { +<pre class="brush: css">#gradient-shape { width: 150px; height: 150px; float: left; @@ -108,7 +106,7 @@ shape-image-threshold: unset; <ul> <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS</a></li> <li>{{cssxref("<basic-shape>")}}</li> <li>{{cssxref("shape-outside")}}</li> <li>{{cssxref("shape-margin")}}</li> diff --git a/files/fr/web/css/shape-margin/index.html b/files/fr/web/css/shape-margin/index.html index bb1c36fd2d..7c382292a1 100644 --- a/files/fr/web/css/shape-margin/index.html +++ b/files/fr/web/css/shape-margin/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/shape-margin <div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.</p> <pre class="brush:css no-line-numbers">/* Valeur de longueur */ diff --git a/files/fr/web/css/shape-outside/index.html b/files/fr/web/css/shape-outside/index.html index 529b4c5e07..477ed8e018 100644 --- a/files/fr/web/css/shape-outside/index.html +++ b/files/fr/web/css/shape-outside/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/shape-outside <div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -54,8 +52,7 @@ shape-outside: unset; <dt><code><basic-shape></code></dt> <dd>Une valeur de type {{cssxref("<basic-shape>")}}. La forme est calculée selon une valeur parmi <code><a href="/fr/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>, ou <code><a href="/fr/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>. Si une valeur <code><shape-box></code> est fournie, cela définira la boîte de référence dans laquelle appliquée la forme définie avec la fonction <code><basic-shape></code>. Si <code><shape-box></code> n'est pas fournie, la valeur par défaut sera '<code>margin-box</code>'.</dd> <dt><code><image></code></dt> - <dd>La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}.</dd> - <dd>Les agents utilisateurs doivent utiliser la méthode <code>fetch</code>, éventuellement avec CORS pour les URL utilisées dans <code>shape-outside</code>. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du <em>referrer</em> comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur <code><strong>none</strong></code>.</dd> + <dd>La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}. Les agents utilisateurs doivent utiliser la méthode <code>fetch</code>, éventuellement avec CORS pour les URL utilisées dans <code>shape-outside</code>. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du <em>referrer</em> comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur <code><strong>none</strong></code>.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -91,7 +88,7 @@ shape-outside: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[13,14,21,22]">.main { +<pre class="brush: css">.main { width: 530px; } @@ -155,10 +152,10 @@ p { <ul> <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS : le module de spécification <em>CSS Shapes</em></a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Créer_formes_boîtes">Créer des formes à partir des boîtes</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">Les formes simples : le type de donnée <code><basic-shape></code></a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">Créer des formes à partir d'images</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/From_box_values">Créer des formes à partir des boîtes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Les formes simples : le type de donnée <code><basic-shape></code></a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Créer des formes à partir d'images</a></li> <li>{{cssxref("<basic-shape>")}}</li> <li>{{cssxref("shape-margin")}}</li> <li>{{cssxref("shape-image-threshold")}}</li> diff --git a/files/fr/web/css/shape/index.html b/files/fr/web/css/shape/index.html index 844883ab78..ced200af32 100644 --- a/files/fr/web/css/shape/index.html +++ b/files/fr/web/css/shape/index.html @@ -25,7 +25,7 @@ translation_of: Web/CSS/shape <h4 id="Valeurs">Valeurs</h4> -<p><img alt="rect.png" class="internal rwrap" src="/@api/deki/files/5730/=rect.png" style="float: right;"></p> +<p><img alt="rect.png" src="rect.png"></p> <dl> <dt><code><em>haut</em></code></dt> @@ -49,30 +49,18 @@ translation_of: Web/CSS/shape <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs de type <code><shape></code> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs <code>haut</code>, <code>droite</code>, <code>bas</code> et <code>gauche</code> comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à <a href="/fr/docs/Web/CSS/timing-function">la fonction de temporisation</a> associée à l'animation.</p> +<p>Les valeurs de type <code><shape></code> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs <code>haut</code>, <code>droite</code>, <code>bas</code> et <code>gauche</code> comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à <a href="/fr/docs/Web/CSS/easing-function">la fonction de temporisation</a> associée à l'animation.</p> <h2 id="Exemples">Exemples</h2> -<h3 id="CSS">CSS</h3> +<h3 id="exemple_illustrant_un_usage_correct_de_la_fonction_rect">Exemple illustrant un usage correct de la fonction rect()</h3> -<pre class="brush:css">.exemple { - position: absolute; - top: 0px; - left: 360px; - clip: rect(0px, 175px, 113px, 0px); +<pre class="brush: css"> +img.clip04 { + clip: rect(10px, 20px, 20px, 10px); } </pre> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p> - <img class="exemple" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Rogné en haut à gauche"> -</p></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","120","120")}}</p> - <h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> diff --git a/files/fr/web/css/shorthand_properties/index.html b/files/fr/web/css/shorthand_properties/index.html index 9bfeea32ff..fa605b0d38 100644 --- a/files/fr/web/css/shorthand_properties/index.html +++ b/files/fr/web/css/shorthand_properties/index.html @@ -21,7 +21,7 @@ original_slug: Web/CSS/Propriétés_raccourcies <ol> <li>Une valeur qui n'est pas définie pour la propriété raccourcie <strong>sera réinitialisée avec sa valeur initiale</strong>. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : - <pre class="brush:css notranslate">background-color: red; + <pre class="brush:css">background-color: red; background: url(images/bg.gif) no-repeat top right; </pre> ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} <code>transparent</code> car la deuxième déclaration prend le pas sur la première.</li> @@ -32,19 +32,19 @@ background: url(images/bg.gif) no-repeat top right; <table> <tbody> <tr> - <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> + <td style="width: 79px;"><img alt="border1.png" src="border1.png"></td> <td><em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique s'adresse à tous les côtés.</td> </tr> <tr> - <td><img alt="border2.png" src="/files/3647/border2.png"></td> + <td><img alt="border2.png" src="border2.png"></td> <td><em>2 valeurs </em>: <code>border-width: 1em 2em</code> — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.</td> </tr> <tr> - <td><img alt="border3.png" src="/files/3648/border3.png"></td> + <td><img alt="border3.png" src="border3.png"></td> <td><em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.</td> </tr> <tr> - <td><img alt="border4.png" src="/files/3649/border4.png"></td> + <td><img alt="border4.png" src="border4.png"></td> <td> <p><em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).</p> </td> @@ -56,19 +56,19 @@ background: url(images/bg.gif) no-repeat top right; <table> <tbody> <tr> - <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> + <td style="width: 69px;"><img alt="corner1.png" src="corner1.png"></td> <td><em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur s'applique à tous les coins.</td> </tr> <tr> - <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> + <td><img alt="corner2.png" src="corner2.png"></td> <td><em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.</td> </tr> <tr> - <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> + <td><img alt="corner3.png" src="corner3.png"></td> <td><em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.</td> </tr> <tr> - <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> + <td><img alt="corner4.png" src="corner4.png"></td> <td> <p><em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).</p> </td> @@ -84,14 +84,14 @@ background: url(images/bg.gif) no-repeat top right; <p>Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :</p> -<pre class="brush:css notranslate">background-color: #000; +<pre class="brush:css">background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: top right;</pre> <p>On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :</p> -<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre> +<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre> <div class="note"> <p><strong>Note :</strong> Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute <code>background-attachment: scroll</code> et d'autres propriétés avec CSS3).</p> @@ -103,7 +103,7 @@ background-position: top right;</pre> <p>Les déclarations suivantes :</p> -<pre class="brush:css notranslate">font-style: italic; +<pre class="brush:css">font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; @@ -111,7 +111,7 @@ font-family: Arial, sans-serif;</pre> <p>Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :</p> -<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre> +<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre> <div class="note"> <p><strong>Note :</strong> Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera <code>font-variant: normal</code> et <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> @@ -121,32 +121,32 @@ font-family: Arial, sans-serif;</pre> <p>Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,</p> -<pre class="brush:css notranslate">border-width: 1px; +<pre class="brush:css">border-width: 1px; border-style: solid; border-color: #000;</pre> <p>peut être écrit ainsi :</p> -<pre class="brush:css notranslate">border: 1px solid #000;</pre> +<pre class="brush:css">border: 1px solid #000;</pre> <h2 id="Les_propriétés_liées_à_la_marge_et_au_remplissage_padding">Les propriétés liées à la marge et au remplissage (<em>padding</em>)</h2> <p>Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (<em>padding</em>) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :</p> -<pre class="brush:css notranslate">margin-top: 10px; +<pre class="brush:css">margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px;</pre> <p>sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à <em>trouble</em>) :</p> -<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre> +<pre class="brush:css">margin: 10px 5px 10px 5px;</pre> <h2 id="La_propriété_raccourcie_universelle">La propriété raccourcie universelle</h2> <p>CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.</p> -<p>Voir l'article sur <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p> +<p>Voir l'article sur <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/string/index.html b/files/fr/web/css/string/index.html index b58feeb115..e9f88f93dd 100644 --- a/files/fr/web/css/string/index.html +++ b/files/fr/web/css/string/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/string <p>Les caractères peuvent être décrits en utilisant leur <a href="https://fr.wikipedia.org/wiki/Unicode#Partitionnement">point de code Unicode</a> hexadécimal, qui doit alors être échappé à l'aide du caractère <code>\</code>. <code>\27</code> représente par exemple le guillemet droit simple (<code>'</code>) et <code>\A9</code> le symbole du <em>copyright</em> ©.</p> <div class="note"> -<p><strong>Note :</strong> Les <a href="/fr/docs/Glossaire/Entity">entités</a> telles que <code>&nbsp;</code> ou <code>&#8212;</code> ne peuvent pas être utilisées pour les chaînes de caractères CSS.</p> +<p><strong>Note :</strong> Les <a href="/fr/docs/Glossary/Entity">entités</a> telles que <code>&nbsp;</code> ou <code>&#8212;</code> ne peuvent pas être utilisées pour les chaînes de caractères CSS.</p> </div> <h2 id="Exemples">Exemples</h2> @@ -39,7 +39,9 @@ de caractères" "Une grande chaîne de caractères" </pre> -<div class="note"><strong>Note</strong> : on peut également échapper des doubles quotes avec <code>\22</code> et les simples quotes avec <code>\27</code>.</div> +<div class="note"> + <p><strong>Note :</strong> on peut également échapper des doubles quotes avec <code>\22</code> et les simples quotes avec <code>\27</code>.</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -77,7 +79,7 @@ de caractères" <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Types_CSS">Types de donnée en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Valeurs et unités en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Types">Types de donnée en CSS</a></li> </ul> diff --git a/files/fr/web/css/tab-size/index.html b/files/fr/web/css/tab-size/index.html index 1cef8374e1..bb78bd950c 100644 --- a/files/fr/web/css/tab-size/index.html +++ b/files/fr/web/css/tab-size/index.html @@ -92,5 +92,5 @@ tab-size: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Contrôler la taille du caractère de tabulation (U+0009)</cite></a>, un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).</li> + <li><a href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html">Contrôler la taille du caractère de tabulation (U+0009)</a>, un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).</li> </ul> diff --git a/files/fr/web/css/table-layout/index.html b/files/fr/web/css/table-layout/index.html index fd1c7ced52..c61d102988 100644 --- a/files/fr/web/css/table-layout/index.html +++ b/files/fr/web/css/table-layout/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/table-layout <div>{{EmbedInteractiveExample("pages/css/table-layout.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur utilisant un mot-clé */ diff --git a/files/fr/web/css/text-align-last/index.html b/files/fr/web/css/text-align-last/index.html index d984006b5e..8b798074b4 100644 --- a/files/fr/web/css/text-align-last/index.html +++ b/files/fr/web/css/text-align-last/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/text-align-last <div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs utilisant un mot-clé */ diff --git a/files/fr/web/css/text-align/index.html b/files/fr/web/css/text-align/index.html index 5d5b257d8d..77b812babb 100644 --- a/files/fr/web/css/text-align/index.html +++ b/files/fr/web/css/text-align/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/text-align <p>La propriété <strong><code>text-align</code></strong> définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.</p> -<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/text-combine-upright/index.html b/files/fr/web/css/text-combine-upright/index.html index 5f7afccdc4..3d47144c98 100644 --- a/files/fr/web/css/text-combine-upright/index.html +++ b/files/fr/web/css/text-combine-upright/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/text-combine-upright <p>La propriété <strong><code>text-combine-upright</code></strong> définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'<code>1em</code>, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur <code>1em</code>. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.</p> -<p>Cela permet d'obtenir un effet appelé tate-chū-yoko (<span lang="ja">縦中横</span>) en japonais ou <span lang="zh-Hant">直書橫向</span> en chinois.</p> +<p>Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois.</p> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ text-combine-upright: none; diff --git a/files/fr/web/css/text-decoration-color/index.html b/files/fr/web/css/text-decoration-color/index.html index b1013af9b9..8cd3cb905e 100644 --- a/files/fr/web/css/text-decoration-color/index.html +++ b/files/fr/web/css/text-decoration-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/text-decoration-color <div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie {{cssxref("text-decoration")}}.</p> </div> diff --git a/files/fr/web/css/text-decoration-line/index.html b/files/fr/web/css/text-decoration-line/index.html index 2787525f9d..0e9fdff6ac 100644 --- a/files/fr/web/css/text-decoration-line/index.html +++ b/files/fr/web/css/text-decoration-line/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/text-decoration-line <div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/text-decoration-skip-ink/index.html b/files/fr/web/css/text-decoration-skip-ink/index.html index 4608c2ed51..1e998a6778 100644 --- a/files/fr/web/css/text-decoration-skip-ink/index.html +++ b/files/fr/web/css/text-decoration-skip-ink/index.html @@ -31,8 +31,7 @@ text-decoration-skip: unset; <dt><code>none</code></dt> <dd>La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.</dd> <dt><code>auto</code></dt> - <dd>La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe.</dd> - <dd><img alt='An example of "text-decoration-skip: ink;".' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd> + <dd>La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe. <img alt='An example of "text-decoration-skip: ink;".' src="decoration-skip-ink.png"></dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -47,7 +46,7 @@ text-decoration-skip: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">p { +<pre class="brush: css">p { margin: 0; font-size: 2em; text-decoration: underline blue; diff --git a/files/fr/web/css/text-decoration-skip/index.html b/files/fr/web/css/text-decoration-skip/index.html index 6122d360b6..54d576be1c 100644 --- a/files/fr/web/css/text-decoration-skip/index.html +++ b/files/fr/web/css/text-decoration-skip/index.html @@ -50,8 +50,7 @@ text-decoration-skip: unset; <dt><code>trailing-spaces</code></dt> <dd>Comportement analogue à <code>spaces</code> mais seuls les espaces après les mots sont ignorés.</dd> <dt><code>edges</code></dt> - <dd>La décoration de <code>text-decoration</code> est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche..</dd> - <dd><img alt='An example of "text-decoration-skip: edges;".' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png" style="height: 77px; margin: 0px auto; width: 223px;"></dd> + <dd>La décoration de <code>text-decoration</code> est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche. <img alt='An example of "text-decoration-skip: edges;".' src="decoration-skip-edges.png"></dd> <dt><code>box-decoration</code></dt> <dd>La propriété <code>text-decoration</code> n'est pas appliquée pour les marges, bordures et zones de remplissage (<em>padding</em>) des éléments fils.</dd> </dl> @@ -64,7 +63,7 @@ text-decoration-skip: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">p { +<pre class="brush: css">p { margin: 0; font-size: 3em; text-decoration: underline; diff --git a/files/fr/web/css/text-decoration-style/index.html b/files/fr/web/css/text-decoration-style/index.html index f91fccbaaa..5b355fadf1 100644 --- a/files/fr/web/css/text-decoration-style/index.html +++ b/files/fr/web/css/text-decoration-style/index.html @@ -17,8 +17,6 @@ translation_of: Web/CSS/text-decoration-style <div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple {{HTMLElement("del")}} ou {{HTMLElement("s")}}). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.</p> <p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p> diff --git a/files/fr/web/css/text-decoration-thickness/index.html b/files/fr/web/css/text-decoration-thickness/index.html index cfa80256ed..2053caab1f 100644 --- a/files/fr/web/css/text-decoration-thickness/index.html +++ b/files/fr/web/css/text-decoration-thickness/index.html @@ -93,7 +93,7 @@ text-decoration-thickness: unset; </tbody> </table> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété était initialement intitulée <code>text-decoration-width</code> mais fut renommée en 2019 en <code>text-decoration-thickness</code>.</p> </div> diff --git a/files/fr/web/css/text-decoration/index.html b/files/fr/web/css/text-decoration/index.html index 49f244c559..0cee3a8764 100644 --- a/files/fr/web/css/text-decoration/index.html +++ b/files/fr/web/css/text-decoration/index.html @@ -12,19 +12,17 @@ translation_of: Web/CSS/text-decoration <p>La propriété <strong><code>text-decoration</code></strong> est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}.</p> -<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div <p>Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <code><p>Ce texte a <em> des mots mis en avant</em> dedans.</p></code>, et cette règle CSS <code>p { text-decoration: underline; }</code>, on aura tout le paragraphe souligné, même si on applique la règle <code>em { text-decoration: none; }</code>, cela n'aurait aucun impact. En revanche, ajouter la règle <code>em { text-decoration: overline; }</code> entraînerait un cumul des décorations pour « des mots mis en avant ».</p> -<div class="note style-wrap"> -<p><strong>Note : </strong>La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p> +<div class="note"> +<p><strong>Note :</strong> La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css no-line-numbers notranslate">/* Valeurs avec mots-clés */ +<pre class="brush: css no-line-numbers">/* Valeurs avec mots-clés */ text-decoration: none; /* Aucune décoration */ text-decoration: underline red; /* On souligne en rouge */ text-decoration: underline wavy red; /* On souligne en rouge avec */ @@ -55,7 +53,7 @@ text-decoration: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">.under { +<pre class="brush: css">.under { text-decoration: underline red; } @@ -82,7 +80,7 @@ text-decoration: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p class="under">Ce texte a une ligne en dessous.</p> +<pre class="brush: html"><p class="under">Ce texte a une ligne en dessous.</p> <p class="over">Ce texte a une ligne au dessus.</p> <p class="line">Ce texte est barré d'une ligne.</p> <p>Ce <a class="plain" href="#">lien ne sera pas souligné</a>, diff --git a/files/fr/web/css/text-emphasis-position/index.html b/files/fr/web/css/text-emphasis-position/index.html index 66c4d9f540..f818083fef 100644 --- a/files/fr/web/css/text-emphasis-position/index.html +++ b/files/fr/web/css/text-emphasis-position/index.html @@ -52,8 +52,8 @@ text-emphasis-position: unset; <td>Japanese</td> <td rowspan="2">au dessus</td> <td rowspan="2">à droite</td> - <td rowspan="2"><img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png" style="height: 28px; width: 225px;" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"></td> - <td rowspan="3"><img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif" style="height: 89px; width: 34px;" title="Emphasis applied on the right of a fragment of Japanese text"></td> + <td rowspan="2"><img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." src="text-emphasis-ja.png" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"></td> + <td rowspan="3"><img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." src="text-emphasis-v.gif" title="Emphasis applied on the right of a fragment of Japanese text"></td> </tr> <tr> <td>Mongolian</td> @@ -62,7 +62,7 @@ text-emphasis-position: unset; <td>Chinese</td> <td>en dessous</td> <td>à droite</td> - <td><img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif" style="height: 28px; width: 133px;" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"></td> + <td><img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." src="text-emphasis-zh.gif" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"></td> </tr> </tbody> </table> diff --git a/files/fr/web/css/text-emphasis/index.html b/files/fr/web/css/text-emphasis/index.html index d9e5f18d41..b092b6b058 100644 --- a/files/fr/web/css/text-emphasis/index.html +++ b/files/fr/web/css/text-emphasis/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/text-emphasis <div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété <code>text-emphasis</code> est différente de {{cssxref("text-decoration")}}. La propriété <code>text-decoration</code> n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, <code>text-emphasis</code> a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.</p> <p>La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. <code>text-emphasis</code> peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.</p> diff --git a/files/fr/web/css/text-indent/index.html b/files/fr/web/css/text-indent/index.html index 6fe05a6106..e2db574dea 100644 --- a/files/fr/web/css/text-indent/index.html +++ b/files/fr/web/css/text-indent/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/text-indent <div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/text-orientation/index.html b/files/fr/web/css/text-orientation/index.html index 93fa5237de..21d80a577d 100644 --- a/files/fr/web/css/text-orientation/index.html +++ b/files/fr/web/css/text-orientation/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/text-orientation <p>La propriété <strong><code>text-orientation</code></strong> définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand {{cssxref("writing-mode")}} n'est pas <code>horizontal-tb</code>). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.</p> -<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/text-overflow/index.html b/files/fr/web/css/text-overflow/index.html index e9d59099d9..7e1716ebd2 100644 --- a/files/fr/web/css/text-overflow/index.html +++ b/files/fr/web/css/text-overflow/index.html @@ -9,15 +9,13 @@ translation_of: Web/CSS/text-overflow --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p> +<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code>U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p> <div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (<code>''</code>).</p> -<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code class="css">white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p> +<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code>white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p> <p>Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que <code>text-overflow</code> soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec <code>hidden</code> et {{cssxref("white-space")}} avec <code>nowrap</code>.</p> @@ -63,17 +61,17 @@ text-overflow: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="clip" name="clip"><code>clip</code></a></dt> - <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd> - <dt><a id="ellipsis" name="ellipsis"><code>ellipsis</code></a></dt> - <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd> - <dt><a id="fade" name="fade"><code>fade</code></a> {{experimental_inline}}</dt> + <dt><code>clip</code></dt> + <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd> + <dt><code>ellipsis</code></dt> + <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code>U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd> + <dt><code>fade</code> {{experimental_inline}}</dt> <dd>Ce mot-clé indique que le contenu qui dépasse est rogné avec un effet de dégradé en transparence. Au bout de la boîte, le contenu est totalement transparent.</dd> - <dt><a id="fade_fun" name="fade_fun"><code>fade( <length> | <percentage> )</code></a> {{experimental_inline}}</dt> + <dt><code>fade( <length> | <percentage> )</code> {{experimental_inline}}</dt> <dd>Cette fonction permet de rogner le contenu qui dépasse et d'appliquer un effet de dégradé en transparence. Au bout de la boîte, on a une transparence totale.<br> L'argument passé à la fonction détermine la distance sur laquelle cet effet est appliqué. La valeur en pourcentage est relative à la largeur de la boîte. Les valeurs inférieures à <code>0</code> sont ramenées à <code>0</code>. Les valeurs supérieures à la largeur de la boîte sont écrétées à la largeur de la boîte.</dd> - <dt><a id="string" name="string"><code><string></code></a> {{experimental_inline}}</dt> - <dd>Une chaîne de caractères (type {{cssxref("<string>")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd> + <dt><code><string></code> {{experimental_inline}}</dt> + <dd>Une chaîne de caractères (type {{cssxref("<string>")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -82,22 +80,49 @@ text-overflow: unset; <h2 id="Exemples">Exemples</h2> -<h3 id="CSS">CSS</h3> +<h2 id="Examples">Examples</h2> + +<h3 id="one-value_syntax">Syntaxe avec une valeur</h3> + +<p>Cet exemple illustre différentes valeurs pour <code>text-overflow</code>, appliquée à un paragraphe, pour des textes écrits de gauche à droite et de droite à gauche.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"> + +<div class="ltr"> + <h2>Left to right text</h2> + <pre>clip</pre> + <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>ellipsis</pre> + <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>" [..]"</pre> + <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</div> + +<div class="rtl"> + <h2>Right to left text</h2> + <pre>clip</pre> + <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>ellipsis</pre> + <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>" [..]"</pre> + <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> <pre class="brush: css">p { width: 200px; border: 1px solid; padding: 2px 5px; - /* Nécessaires pour text-overflow */ + /* Les deux règles suivantes sont nécessaires pour text-overflow */ white-space: nowrap; overflow: hidden; } -.overflow-visible { - white-space: initial; -} - .overflow-clip { text-overflow: clip; } @@ -107,199 +132,87 @@ text-overflow: unset; } .overflow-string { - /* Cette forme n'est pas prise en charge - par la plupart des navigateurs. cf. la - section Compatibilité ci-après */ text-overflow: " [..]"; } + +body { + display: flex; + justify-content: space-around; +} + +.ltr > p { + direction: ltr; +} + +.rtl > p { + direction: rtl; +} </pre> -<h3 id="HTML">HTML</h3> +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample('one-value_syntax', 600, 320)}}</p> -<pre class="brush: html"><p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<h3 id="two-value_syntax">Syntaxe avec deux valeurs</h3> -<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<p>Cette exemple illustre la syntaxe à deux valeurs pour <code>text-overflow</code>, où on peut définir un comportement de débordement différent pour le début et la fin du texte. Pour illustrer l'effet, on doit faire défiler la ligne et le début de la ligne est donc caché.</p> -<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<h4 id="HTML">HTML</h4> -<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre class="brush: html"> +<pre>clip clip</pre> +<p class="overflow-clip-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>clip ellipsis</pre> +<p class="overflow-clip-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>ellipsis ellipsis</pre> +<p class="overflow-ellipsis-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>ellipsis " [..]"</pre> +<p class="overflow-ellipsis-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </pre> -<h3 id="Résultat">Résultat</h3> +<h4 id="CSS">CSS</h4> -<p>{{EmbedLiveSample('Exemples', 300, 220, '', 'Web/CSS/text-overflow')}}</p> +<pre class="brush: css">p { + width: 200px; + border: 1px solid; + padding: 2px 5px; -<table class="standard-table"> - <thead> - <tr> - <th colspan="1" rowspan="2" scope="col">Valeur CSS</th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th> - </tr> - <tr> - <th scope="col">Résultat attendu</th> - <th scope="col">Résultat du navigateur</th> - <th scope="col">Résultat attendu</th> - <th scope="col">Résultat du navigateur</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>overflow:visible</code></td> - <td style="font-family: monospace;">1234567890</td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">0987654321</td> - <td> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip</code></td> - <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div> - </td> - <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ''</code></td> - <td style="font-family: monospace;">12345</td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div> - </td> - <td style="font-family: monospace;">54321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis</code></td> - <td style="font-family: monospace;">1234…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: '.'</code></td> - <td style="font-family: monospace;">1234.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">.4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip clip</code></td> - <td style="font-family: monospace;">123456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">654321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip ellipsis</code></td> - <td style="font-family: monospace;">1234…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">6543…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip '.'</code></td> - <td style="font-family: monospace;">1234.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">6543.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis clip</code></td> - <td style="font-family: monospace;">…3456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis ellipsis</code></td> - <td style="font-family: monospace;">…34…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…43…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis '.'</code></td> - <td style="font-family: monospace;">…34.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…43.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' clip</code></td> - <td style="font-family: monospace;">,3456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' ellipsis</code></td> - <td style="font-family: monospace;">,34…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,43…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' '.'</code></td> - <td style="font-family: monospace;">,34.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,43.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - </tbody> -</table> + /* Les deux règles suivantes sont nécessaires pour text-overflow */ + white-space: nowrap; + overflow: scroll; +} + +.overflow-clip-clip { + text-overflow: clip clip; +} + +.overflow-clip-ellipsis { + text-overflow: clip ellipsis; +} + +.overflow-ellipsis-ellipsis { + text-overflow: ellipsis ellipsis; +} + +.overflow-ellipsis-string { + text-overflow: ellipsis " [..]"; +} +</pre> + + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">// On fait défiler chaque paragraphe afin que le début soit également caché +const paras = document.querySelectorAll("p"); + +for (let para of paras) { + para.scroll(100, 0); +} +</pre> + +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample('two-value_syntax', 600, 360)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/text-shadow/index.html b/files/fr/web/css/text-shadow/index.html index 3fdc6055b4..359a0acb0e 100644 --- a/files/fr/web/css/text-shadow/index.html +++ b/files/fr/web/css/text-shadow/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/text-shadow <div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* offset-x | offset-y | blur-radius | color */ @@ -64,9 +62,9 @@ text-shadow: unset; <h2 id="Exemples">Exemples</h2> -<h3 id="Ombre_simple">Ombre simple</h3> +<h3 id="ombre_simple">Ombre simple</h3> + -<div id="Example1"> <pre class="brush: css">.red-text-shadow { text-shadow: red 0 -2px; }</pre> @@ -74,13 +72,11 @@ text-shadow: unset; <pre class="brush: html"><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre> -</div> -<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p> +<p>{{EmbedLiveSample('ombre_simple', '660px', '90px')}}</p> -<h3 id="Ombres_multiples">Ombres multiples</h3> +<h3 id="ombres_multiples">Ombres multiples</h3> -<div id="Example2"> <pre class="brush:css">.white-text-with-blue-shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; @@ -90,9 +86,8 @@ text-shadow: unset; <pre class="brush: html"><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore.</p></pre> -</div> -<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p> +<p>{{EmbedLiveSample('ombres_multiples', '660px', '170px')}}</p> <h2 id="Spécifications">Spécifications</h2> @@ -113,7 +108,7 @@ text-shadow: unset; <tr> <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td> <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>La propriété CSS <code>text-shadow</code> était <a class="external" href="https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">incorrectement définie dans CSS2</a> et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td> + <td>La propriété CSS <code>text-shadow</code> était <a href="https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">incorrectement définie dans CSS2</a> et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td> </tr> </tbody> </table> diff --git a/files/fr/web/css/text-size-adjust/index.html b/files/fr/web/css/text-size-adjust/index.html index 9cce3d4b8d..3cfaa33d46 100644 --- a/files/fr/web/css/text-size-adjust/index.html +++ b/files/fr/web/css/text-size-adjust/index.html @@ -81,6 +81,6 @@ text-size-adjust: unset; <ul> <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">La documentation d'Apple</a></li> - <li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Le comportement de Gecko décrit par L. David Baron</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">La documentation de Microsoft</a></li> + <li><a href="http://dbaron.org/log/20111126-font-inflation">Le comportement de Gecko décrit par L. David Baron</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">La documentation de Microsoft</a></li> </ul> diff --git a/files/fr/web/css/text-transform/index.html b/files/fr/web/css/text-transform/index.html index 403a879fa4..b7d87fe8e2 100644 --- a/files/fr/web/css/text-transform/index.html +++ b/files/fr/web/css/text-transform/index.html @@ -9,12 +9,10 @@ translation_of: Web/CSS/text-transform --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>text-transform</code></strong> définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations <a href="/fr/docs/HTML/Element/ruby">Ruby</a>.</p> +<p>La propriété <strong><code>text-transform</code></strong> définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations <a href="/fr/docs/Web/HTML/Element/ruby">Ruby</a>.</p> <div>{{EmbedInteractiveExample("pages/css/text-transform.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété <code>text-transform</code> gère les différences liées aux langues, par exemple :</p> <ul> @@ -33,7 +31,7 @@ translation_of: Web/CSS/text-transform <li>En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant <code>text-transform: uppercase</code> à <code>ar aon tslí</code>, on obtiendra <code>AR AON tSLÍ</code> et non <code>AR AON TSLÍ</code>. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : <code>an t-uisce</code> deviendra <code>AN tUISCE </code>(le trait-d'union sera bien réinséré avec <code>text-transform: lowercase</code>)</li> </ul> -<p>La langue d'un document HTML est définie par l'attribut XML <code>xml:lang</code>, qui a la priorité sur l'attribut global <code><a href="/fr/docs/Web/HTML/Attributs_globaux/lang">lang</a></code>.</p> +<p>La langue d'un document HTML est définie par l'attribut XML <code>xml:lang</code>, qui a la priorité sur l'attribut global <code><a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a></code>.</p> <p>Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, <a href="#compat">voir le tableau de compatibilité des navigateurs</a>.</p> @@ -60,7 +58,7 @@ text-transform: unset; <dd> <p>En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.</p> - <p class="note">Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.</p> + <div class="note"><p><strong>Note :</strong> Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.</p></div> </dd> <dt><code>uppercase</code></dt> <dd>En utilisant ce mot-clé, tous les caractères seront écrits en capitales.</dd> @@ -143,7 +141,7 @@ p.full-size-kana { <p>De grandes portions de texte utilisant <code>text-transform</code> avec la valeur <code>uppercase</code> peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> @@ -178,7 +176,7 @@ p.full-size-kana { <p>{{cssinfo}}</p> -<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> <p>{{Compat("css.properties.text-transform")}}</p> diff --git a/files/fr/web/css/text-underline-offset/index.html b/files/fr/web/css/text-underline-offset/index.html index 29f82ce231..332cc62d99 100644 --- a/files/fr/web/css/text-underline-offset/index.html +++ b/files/fr/web/css/text-underline-offset/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/text-underline-offset <div>{{EmbedInteractiveExample("pages/css/text-underline-offset.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> <code>text-underline-offset</code> n'est pas une propriété détaillée de {{cssxref('text-decoration')}}. Bien qu'un élément puisse avoir plusieurs lignes décoratives, <code>text-underline-offset</code> n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par {{cssxref('text-decoration-line')}} avec <code>overline</code> ou <code>line-through</code>).</p> </div> diff --git a/files/fr/web/css/time/index.html b/files/fr/web/css/time/index.html index f83edacff3..79b98d327e 100644 --- a/files/fr/web/css/time/index.html +++ b/files/fr/web/css/time/index.html @@ -20,9 +20,9 @@ translation_of: Web/CSS/time <h3 id="Unités">Unités</h3> <dl> - <dt><code><a id="s">s</a></code></dt> + <dt><code>s</code></dt> <dd>Cette unité permet d'exprimer le temps en secondes. Par exemple : <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd> - <dt><code><a id="ms">ms</a></code></dt> + <dt><code>ms</code></dt> <dd>Cette unité permet d'exprimer le temps en millisecondes. Par exemple : <code>0ms</code>, <code>1500ms</code>, <code>-6000ms</code>.</dd> </dl> diff --git a/files/fr/web/css/tools/linear-gradient_generator/index.html b/files/fr/web/css/tools/linear-gradient_generator/index.html index 4a3dc87e32..e8206cae93 100644 --- a/files/fr/web/css/tools/linear-gradient_generator/index.html +++ b/files/fr/web/css/tools/linear-gradient_generator/index.html @@ -10,5 +10,5 @@ original_slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires <p>{{Draft}}</p> <div class="note"> -<p><strong>Note</strong><strong> :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p> +<p><strong>Note :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p> </div> diff --git a/files/fr/web/css/top/index.html b/files/fr/web/css/top/index.html index 679efee57d..c07040d0aa 100644 --- a/files/fr/web/css/top/index.html +++ b/files/fr/web/css/top/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/top <div>{{EmbedInteractiveExample("pages/css/top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'effet de la propriété <code>top</code> dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :</p> <ul> diff --git a/files/fr/web/css/touch-action/index.html b/files/fr/web/css/touch-action/index.html index 02ac50d507..bd126a4d85 100644 --- a/files/fr/web/css/touch-action/index.html +++ b/files/fr/web/css/touch-action/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/touch-action <p>La propriété <strong><code>touch-action</code></strong> définit si une région donnée peut être manipulée par l'utilisateur grâce à des interactions tactiles (en déplaçant ou en zoomant) et comment cette interaction fonctionnera.</p> -<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Avec un mot-clé */ touch-action: auto; touch-action: none; touch-action: pan-x; @@ -35,7 +35,7 @@ touch-action: unset; <p>Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs de <code>touch-action</code> pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui peut défiler/zoomer). En pratique, <code>touch-action</code> est généralement uniquement appliquée aux éléments de plus haut niveau ayant besoin d'un comportement spécifique. Il n'est pas nécessaire de redéfinir <code>touch-action</code> sur les descendants.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Lorsqu'un geste est déjà initié, tout changement sur <code>touch-action</code> n'aura aucun impact sur le geste en cours.</p> </div> @@ -77,7 +77,7 @@ touch-action: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><ul>Ma list +<pre class="brush: html"><ul>Ma list <li>UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li> <li>UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li> </ul> @@ -85,7 +85,7 @@ touch-action: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">ul { +<pre class="brush: css">ul { width: 200px; height: 50px; overflow-x: scroll; @@ -100,7 +100,7 @@ ul > li { <p>{{EmbedLiveSample('Exemples')}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La propriété <code>touch-action</code> est également utilisée afin de supprimer le délai donné à l'évènement {{event("click")}} pour prendre en charge le zoom via la double-touche.</p> </div> diff --git a/files/fr/web/css/transform-function/index.html b/files/fr/web/css/transform-function/index.html index 152a9424d1..edcbd6edd3 100644 --- a/files/fr/web/css/transform-function/index.html +++ b/files/fr/web/css/transform-function/index.html @@ -17,27 +17,25 @@ translation_of: Web/CSS/transform-function <h3 id="Le_système_de_coordonnées_cartésiennes">Le système de coordonnées cartésiennes</h3> -<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p> +<p><img src="coord_in_r2.png"></p> -<p>Pour <a class="external" href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>, chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère <code>(0, 0)</code> correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (<em>y</em>) se dirige vers le bas. Chaque point est décrit avec la notation <code>(x,y)</code>.</p> +<p>Pour <a href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>, chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère <code>(0, 0)</code> correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (<em>y</em>) se dirige vers le bas. Chaque point est décrit avec la notation <code>(x,y)</code>.</p> <p>Chaque fonction linéaire est décrite avec une matrice 2 x 2 :</p> -<div style="text-align: center;"> <p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p> -</div> <p>L'application d'une transformation consiste à multiplier la matrice de transformation au vecteur de coordonnées <code>(x,y)</code> :</p> -<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> +<p><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> <p>On peut appliquer plusieurs transformations les unes à la suite des autres :</p> -<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> +<p><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> <p>En utilisant cette notation, on peut décrire et enchaîner (ou composer) la plupart des transformations : des rotations, des homothéties et des distorsions. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche. Une transformation qui n'est pas linéaire ne pourra pas être représentée par cet outil. Ainsi, l'opération de translation ne pourra pas être représentée par une matrice et devra être gérée à part.</p> -<p><a class="external" href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a class="external" href="https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective">géométrie projective</a> permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.</p> +<p><a href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a href="https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective">géométrie projective</a> permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,83 +44,73 @@ translation_of: Web/CSS/transform-function <h3 id="Matrices_de_transformation">Matrices de transformation</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt> - <dd>La fonction <code>matrix()</code> permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes.</dd> - <dd><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie pour <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix()">matrix()</a></code></dt> + <dd>La fonction <code>matrix()</code> permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes. <code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie pour <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d()">matrix3d()</a></code></dt> <dd>La fonction <code>matrix3d()</code> permet de définir une transformation en trois dimensions grâce à une matrice homogène 4x4. Les 16 paramètres sont décrits dans l'ordre des colonnes.</dd> </dl> <h3 id="Perspective">Perspective</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/perspective()">perspective()</a></code></dt> <dd>La fonction <code>perspective()</code> définit la distance entre le plan de coordonnées z=0 et l'œil de l'utilisateur. Cela permet de placer une perspective en trois dimensions sur l'élément. Chaque élément 3D pour lequel z est supérieur à 0 devient plus grand et chaque élément pour lequel z est négatif devient plus petit.</dd> </dl> <h3 id="Rotation">Rotation</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate()">rotate()</a></code></dt> <dd>La fonction <code>rotate()</code> définit une transformation qui déplace l'élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer. La quantité de mouvement est définie par l'angle passé en argument. Si la valeur fournie est positive, le mouvement se fait dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et sinon dans le sens inverse (sens <em>anti-horaire</em>).</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></dt> <dd>La fonction <code>rotate3d()</code> définit une transformation qui déplace l'élément autour d'un axe donné, sans déformer l'élément. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. Contrairement aux rotations en deux dimensions (rotations <em>planes</em>), la composition des rotations en trois dimensions n'est pas commutative (autrement dit, l'ordre dans lequel elles sont appliquées a toute son importance).</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt> - <dd>La fonction <code>rotateX()</code> définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd> - <dd><code>rotateX(a)</code> est une notation raccourcie pour <code>rotate3D(1, 0, 0, a)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt> - <dd>La fonction <code>rotateY()</code> définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd> - <dd><code>rotateY(a)</code> est une notation raccourcie pour <code>rotate3D(0, 1, 0, a)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt> - <dd>La fonction <code>rotateZ()</code> définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd> - <dd><code>rotateZ(a)</code> est une notation raccourcie pour <code>rotate3D(0, 0, 1, a)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateX()">rotateX()</a></code></dt> + <dd>La fonction <code>rotateX()</code> définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateX(a)</code> est une notation raccourcie pour <code>rotate3D(1, 0, 0, a)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateY()">rotateY()</a></code></dt> + <dd>La fonction <code>rotateY()</code> définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateY(a)</code> est une notation raccourcie pour <code>rotate3D(0, 1, 0, a)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateZ()">rotateZ()</a></code></dt> + <dd>La fonction <code>rotateZ()</code> définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateZ(a)</code> est une notation raccourcie pour <code>rotate3D(0, 0, 1, a)</code>.</dd> </dl> <h3 id="Changement_d'échelle">Changement d'échelle</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/scale">scale()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/scale()">scale()</a></code></dt> <dd>La fonction <code>scale()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon chacun des deux axes plans. Si les deux coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd> - <dt><a href="/fr/docs/Web/CSS/transform-function/scale3d">scale3d()</a></dt> + <dt><a href="/fr/docs/Web/CSS/transform-function/scale3d()">scale3d()</a></dt> <dd>La fonction <code>scale3d()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon les trois axes. Si les trois coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt> - <dd>La fonction <code>scaleX()</code> modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleX(-1)</code> permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd> - <dd><code>scaleX(sx)</code> est une notation raccourcie pour <code>scale(sx, 1)</code> ou pour <code>scale3d(sx, 1, 1)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt> - <dd>La fonction <code>scaleY()</code> modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleY(-1)</code> permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd> - <dd><code>scaleY(sy)</code> est une notation raccourcie pour <code>scale(1, sy)</code> ou pour <code>scale3d(1, sy, 1)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt> - <dd>La fonction <code>scaleZ()</code> modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleZ(-1)</code> permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd> - <dd><code>scaleZ(sz)</code> est une notation raccourcie pour <code>scale3d(1, 1, sz)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></dt> + <dd>La fonction <code>scaleX()</code> modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleX(-1)</code> permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleX(sx)</code> est une notation raccourcie pour <code>scale(sx, 1)</code> ou pour <code>scale3d(sx, 1, 1)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></dt> + <dd>La fonction <code>scaleY()</code> modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleY(-1)</code> permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleY(sy)</code> est une notation raccourcie pour <code>scale(1, sy)</code> ou pour <code>scale3d(1, sy, 1)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></dt> + <dd>La fonction <code>scaleZ()</code> modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleZ(-1)</code> permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleZ(sz)</code> est une notation raccourcie pour <code>scale3d(1, 1, sz)</code>.</dd> </dl> <h3 id="Distorsions">Distorsions</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/skew">skew()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/skew()">skew()</a></code></dt> <dd>La fonction <code>skew()</code> permet de décrire une distorsion de l'élément où chaque point est tourné d'un angle dans chaque direction. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewX()">skewX()</a></code></dt> <dd>La fonction <code>skewX()</code> permet de distordre un élément dans la direction horizontale. Le résultat est obtenu en augmentant l'abscisse par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewY()">skewY()</a></code></dt> <dd>La fonction <code>skewY()</code> permet de distordre un élément dans la direction verticale. Le résultat est obtenu en augmentant l'ordonnée par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd> </dl> <h3 id="Translations">Translations</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate">translate()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate()">translate()</a></code></dt> <dd>La fonction <code>translate()</code> permet de déplacer un élément sur le plan formé par le document. Cette transformation est caractérisée par un vecteur contenant deux coordonnées dont chacune définit la quantité de déplacement horizontale et verticale.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></dt> <dd>La fonction <code>translate3d()</code> permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt> - <dd>La fonction <code>translateX()</code> permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal.</dd> - <dd><code>translateX(tx)</code>est une notation raccourcie pour <code>translate(tx, 0)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt> - <dd>La fonction <code>translateY()</code> permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement vertical.</dd> - <dd><code>translateY(ty)</code> est une notation raccourcie pour <code>translate(0, ty)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt> - <dd>La fonction <code>translateZ()</code> permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement.</dd> - <dd><code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd> + <dt><code><a href="/fr/docs/orphaned/Web/CSS/transform-function/translateX">translateX()</a></code></dt> + <dd>La fonction <code>translateX()</code> permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal. <code>translateX(tx)</code>est une notation raccourcie pour <code>translate(tx, 0)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></dt> + <dd>La fonction <code>translateY()</code> permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement vertical. <code>translateY(ty)</code> est une notation raccourcie pour <code>translate(0, ty)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateZ()">translateZ()</a></code></dt> + <dd>La fonction <code>translateZ()</code> permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement. <code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd> </dl> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/transform-function/matrix()/index.html b/files/fr/web/css/transform-function/matrix()/index.html index 9e1068a7e0..1de0a89c3c 100644 --- a/files/fr/web/css/transform-function/matrix()/index.html +++ b/files/fr/web/css/transform-function/matrix()/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/transform-function/matrix() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>) +<pre class="syntaxbox">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -58,12 +58,12 @@ translation_of: Web/CSS/transform-function/matrix() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -100,13 +100,13 @@ translation_of: Web/CSS/transform-function/matrix() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d()">matrix3d()</a></code></li> <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/transform-function/matrix3d()/index.html b/files/fr/web/css/transform-function/matrix3d()/index.html index 0f638286b7..3090f30633 100644 --- a/files/fr/web/css/transform-function/matrix3d()/index.html +++ b/files/fr/web/css/transform-function/matrix3d()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre> +<pre class="syntaxbox">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre> <h3 id="Valeurs">Valeurs</h3> @@ -24,7 +24,9 @@ translation_of: Web/CSS/transform-function/matrix3d() <dd>Les coefficients de type {{cssxref("<number>")}} qui définissent la translation à appliquer.</dd> </dl> -<div class="note"><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</p> +</div> <table class="standard-table"> <thead> @@ -50,12 +52,12 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -75,7 +77,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="foo"> +<pre class="brush: html"><div class="foo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? @@ -84,7 +86,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { width: 100%; } body { @@ -171,7 +173,7 @@ body { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/perspective()/index.html b/files/fr/web/css/transform-function/perspective()/index.html index 0fb86405b6..bc9eb31839 100644 --- a/files/fr/web/css/transform-function/perspective()/index.html +++ b/files/fr/web/css/transform-function/perspective()/index.html @@ -15,13 +15,11 @@ translation_of: Web/CSS/transform-function/perspective() <div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La fonction de transformation <code>perspective()</code>s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">perspective(<var>l</var>) +<pre class="syntaxbox">perspective(<var>l</var>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -57,7 +55,7 @@ translation_of: Web/CSS/transform-function/perspective() <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.face { +<pre class="brush: css">.face { position: absolute; width: 100px; height: 100px; @@ -102,7 +100,7 @@ p + div { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>Sans perspective :</p> +<pre class="brush: html"><p>Sans perspective :</p> <div class="no-perspective-box"> <div class="face front">A</div> <div class="face top">B</div> @@ -149,7 +147,7 @@ p + div { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotate()/index.html b/files/fr/web/css/transform-function/rotate()/index.html index eedbb8b131..4754dd3bbc 100644 --- a/files/fr/web/css/transform-function/rotate()/index.html +++ b/files/fr/web/css/transform-function/rotate()/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/transform-function/rotate() <p>L'angle de la rotation créée grâce à <code>rotate()</code> est fourni comme argument à cette fonction via une valeur de type {{cssxref("<angle>")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.</p> -<pre class="syntaxbox notranslate">rotate(<var>a</var>) +<pre class="syntaxbox">rotate(<var>a</var>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,7 +56,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -70,7 +70,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="tourne">Tourné</div></pre> <h4 id="Résultat">Résultat</h4> @@ -83,7 +83,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; left: 40px; top: 40px; @@ -111,7 +111,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotate">Tourné</div> <div class="rotate-translate">Tourné puis translaté</div> <div class="translate-rotate">Translaté puis tourné</div> @@ -142,12 +142,12 @@ translation_of: Web/CSS/transform-function/rotate() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></li> </ul> diff --git a/files/fr/web/css/transform-function/rotate3d()/index.html b/files/fr/web/css/transform-function/rotate3d()/index.html index 29c8b92462..5086694692 100644 --- a/files/fr/web/css/transform-function/rotate3d()/index.html +++ b/files/fr/web/css/transform-function/rotate3d()/index.html @@ -14,15 +14,15 @@ translation_of: Web/CSS/transform-function/rotate3d() <div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur <code>[x, y, z]</code> et passe par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul <code>[0, 0, 0]</code>) empêchera la rotation d'être appliquée mais la propriété CSS restera valide.</p> -<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div> +<div class="note"> + <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -51,7 +51,8 @@ translation_of: Web/CSS/transform-function/rotate3d() <tr> <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td> <td colspan="1"><math><mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> - <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> + <td><a href="/fr/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_hom4.png"><img + src="transform-functions-rotate3d_hom4.png"></a></td> </tr> </tbody> </table> @@ -62,12 +63,12 @@ translation_of: Web/CSS/transform-function/rotate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } @@ -92,12 +93,12 @@ p { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -134,7 +135,7 @@ p { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatex()/index.html b/files/fr/web/css/transform-function/rotatex()/index.html index 01fc488e05..63b2dd46fa 100644 --- a/files/fr/web/css/transform-function/rotatex()/index.html +++ b/files/fr/web/css/transform-function/rotatex()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateX() <div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p> <p><code>rotateX(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(1, 0, 0, a)</code>.</p> -<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div> +<div class="note"> + <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateX(<em>a</em>) +<pre class="syntaxbox">rotateX(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateX() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateX() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatey()/index.html b/files/fr/web/css/transform-function/rotatey()/index.html index 86d43fd733..9af6c84d3a 100644 --- a/files/fr/web/css/transform-function/rotatey()/index.html +++ b/files/fr/web/css/transform-function/rotatey()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateY() <div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p> <p><code>rotateY(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(0, 1, 0, a)</code>.</p> -<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div> +<div class="note"> + <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateY(<em>a</em>) +<pre class="syntaxbox">rotateY(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateY() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatez()/index.html b/files/fr/web/css/transform-function/rotatez()/index.html index 823e0355bc..25d3fbe461 100644 --- a/files/fr/web/css/transform-function/rotatez()/index.html +++ b/files/fr/web/css/transform-function/rotatez()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateZ() <div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p> <p><code>rotateZ(a)</code> est une notation raccourcie équivalente à <code>rotate3D(0, 0, 1, a)</code>.</p> -<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div> +<div class="note"> + <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateZ(<em>a</em>) +<pre class="syntaxbox">rotateZ(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateZ() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateZ() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/scale()/index.html b/files/fr/web/css/transform-function/scale()/index.html index 055515f169..8931d28027 100644 --- a/files/fr/web/css/transform-function/scale()/index.html +++ b/files/fr/web/css/transform-function/scale()/index.html @@ -20,7 +20,9 @@ translation_of: Web/CSS/transform-function/scale() <p>Lorsque les coordonnées du vecteur sont en dehors de l'intervalle [<code>-1, 1]</code>, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.</p> -<div class="notecard note">La fonction <code>scale()</code> applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction <code>scale3D()</code>.</div> +<div class="note"> + <p><strong>Note :</strong> La fonction <code>scale()</code> applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction <code>scale3D()</code>.</p> +</div> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/css/transform-function/scale3d()/index.html b/files/fr/web/css/transform-function/scale3d()/index.html index cddec8bdc7..3b4d05dde4 100644 --- a/files/fr/web/css/transform-function/scale3d()/index.html +++ b/files/fr/web/css/transform-function/scale3d()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transform-function/scale3d() <div>{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée.</p> <p>Lorsque les composantes du vecteurs sont en dehors de l'intervalle <code>[-1, 1]</code>, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément.</p> @@ -128,14 +126,14 @@ translation_of: Web/CSS/transform-function/scale3d() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></li> </ul> diff --git a/files/fr/web/css/transform-function/scalex()/index.html b/files/fr/web/css/transform-function/scalex()/index.html index 231bc73da3..6ad769f97c 100644 --- a/files/fr/web/css/transform-function/scalex()/index.html +++ b/files/fr/web/css/transform-function/scalex()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/transform-function/scaleX() <p>La fonction <strong><code>scaleX()</code></strong> permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.</p> -<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p> +<p><img src="scalex.png"></p> <p><code>scaleX(sx)</code> est une notation raccourcie équivalente à <code>scale(sx, 1)</code> ou à <code>scale3d(sx, 1, 1)</code>.</p> @@ -126,13 +126,13 @@ translation_of: Web/CSS/transform-function/scaleX() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/scaley()/index.html b/files/fr/web/css/transform-function/scaley()/index.html index f8b82479b3..87bfff06db 100644 --- a/files/fr/web/css/transform-function/scaley()/index.html +++ b/files/fr/web/css/transform-function/scaley()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/transform-function/scaleY() <p>La fonction <strong><code>scaleY()</code></strong> modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> -<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p> +<p><img src="scaley.png"></p> <p><code>scaleY(sy)</code> est une notation raccourcie équivalente à <code>scale(1, sy)</code> ou à <code>scale3d(1, sy, 1)</code>.</p> @@ -20,7 +20,7 @@ translation_of: Web/CSS/transform-function/scaleY() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">scaleY(s) +<pre class="syntaxbox">scaleY(s) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/scaleY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,13 +98,13 @@ translation_of: Web/CSS/transform-function/scaleY() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/scalez()/index.html b/files/fr/web/css/transform-function/scalez()/index.html index 11324f1efb..ee98a35e12 100644 --- a/files/fr/web/css/transform-function/scalez()/index.html +++ b/files/fr/web/css/transform-function/scalez()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transform-function/scaleZ() <div>{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p><code>scaleZ(sz)</code> est une notation raccourcie équivalente à <code>scale3d(1, 1, sz)</code>.</p> <p><code>scaleZ(-1)</code> définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété {{cssxref("transform-origin")}}).</p> @@ -104,13 +102,13 @@ translation_of: Web/CSS/transform-function/scaleZ() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></li> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/skew()/index.html b/files/fr/web/css/transform-function/skew()/index.html index 96a2973536..12d228ec71 100644 --- a/files/fr/web/css/transform-function/skew()/index.html +++ b/files/fr/web/css/transform-function/skew()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/skew() <div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">skew(<em>ax</em>) +<pre class="syntaxbox">skew(<em>ax</em>) skew(<em>ax</em>, <em>ay</em>) </pre> @@ -61,12 +59,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -87,12 +85,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -129,7 +127,7 @@ skew(<em>ax</em>, <em>ay</em>) <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/skewx()/index.html b/files/fr/web/css/transform-function/skewx()/index.html index 2dde08e015..5fefac8327 100644 --- a/files/fr/web/css/transform-function/skewx()/index.html +++ b/files/fr/web/css/transform-function/skewx()/index.html @@ -14,15 +14,13 @@ translation_of: Web/CSS/transform-function/skewX() <div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> -<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew">skew(a)</a></code>.</p> +<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew()">skew(a)</a></code>.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">skewX(a) +<pre class="syntaxbox">skewX(a) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -58,12 +56,12 @@ translation_of: Web/CSS/transform-function/skewX() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -100,7 +98,7 @@ translation_of: Web/CSS/transform-function/skewX() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/skewy()/index.html b/files/fr/web/css/transform-function/skewy()/index.html index bff12a7055..06b1e83c24 100644 --- a/files/fr/web/css/transform-function/skewy()/index.html +++ b/files/fr/web/css/transform-function/skewy()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/skewY() <div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">skewY(a) +<pre class="syntaxbox">skewY(a) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +54,12 @@ translation_of: Web/CSS/transform-function/skewY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +96,7 @@ translation_of: Web/CSS/transform-function/skewY() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translate()/index.html b/files/fr/web/css/transform-function/translate()/index.html index 4e1eb7e81a..15604a6a3e 100644 --- a/files/fr/web/css/transform-function/translate()/index.html +++ b/files/fr/web/css/transform-function/translate()/index.html @@ -12,13 +12,13 @@ translation_of: Web/CSS/transform-function/translate() <p>La fonction <strong><code>translate()</code></strong> permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).</p> -<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p> +<p><img src="translate.png"></p> <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translate(tx) +<pre class="syntaxbox">translate(tx) translate(tx, ty) </pre> @@ -61,13 +61,13 @@ translate(tx, ty) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -88,13 +88,13 @@ translate(tx, ty) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -131,7 +131,7 @@ translate(tx, ty) <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translate3d()/index.html b/files/fr/web/css/transform-function/translate3d()/index.html index 650c9b714f..81d6f690e5 100644 --- a/files/fr/web/css/transform-function/translate3d()/index.html +++ b/files/fr/web/css/transform-function/translate3d()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/translate3d() <div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translate3d(tx, ty, tz) +<pre class="syntaxbox">translate3d(tx, ty, tz) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -60,13 +58,13 @@ translation_of: Web/CSS/transform-function/translate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>Statique</p> +<pre class="brush: html"><p>Statique</p> <p class="transformation">Bougé</p> <p>Statique</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 60px; height: 60px; background-color: skyblue; @@ -87,13 +85,13 @@ translation_of: Web/CSS/transform-function/translate3d() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>Statique</p> +<pre class="brush: html"><p>Statique</p> <p class="transformation">Bougé</p> <p>Statique</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 60px; height: 60px; background-color: skyblue; @@ -130,7 +128,7 @@ translation_of: Web/CSS/transform-function/translate3d() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translatey()/index.html b/files/fr/web/css/transform-function/translatey()/index.html index 80ae24352c..a6e0d052c0 100644 --- a/files/fr/web/css/transform-function/translatey()/index.html +++ b/files/fr/web/css/transform-function/translatey()/index.html @@ -12,13 +12,13 @@ translation_of: Web/CSS/transform-function/translateY() <p>La fonction <code><strong>translateY()</strong></code> permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type {{cssxref("<length>")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> -<p><img src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p> +<p><img src="translatey.png"></p> <p><code>translateY(ty)</code> est une notation raccourcie équivalente à <code>translate(0, ty)</code>.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translateY(t) +<pre class="syntaxbox">translateY(t) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,13 +56,13 @@ translation_of: Web/CSS/transform-function/translateY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -99,7 +99,7 @@ translation_of: Web/CSS/transform-function/translateY() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translatez()/index.html b/files/fr/web/css/transform-function/translatez()/index.html index d55e4a1279..3d2e30c77b 100644 --- a/files/fr/web/css/transform-function/translatez()/index.html +++ b/files/fr/web/css/transform-function/translatez()/index.html @@ -14,15 +14,13 @@ translation_of: Web/CSS/transform-function/translateZ() <div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p><code>translateZ(tz)</code> est un raccourci équivalent à <code>translate3d(0, 0, tz)</code>.</p> <p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translateZ(t) +<pre class="syntaxbox">translateZ(t) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -54,12 +52,12 @@ translation_of: Web/CSS/transform-function/translateZ() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -101,13 +99,13 @@ translation_of: Web/CSS/transform-function/translateZ() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("<transform-function>")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Les transformations CSS</a></li> <li>{{cssxref("transform")}}</li> - <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY", "translateY()")}}</li> + <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY()", "translateY()")}}</li> </ul> diff --git a/files/fr/web/css/transform-origin/index.html b/files/fr/web/css/transform-origin/index.html index 55f9b309f7..d5c8888145 100644 --- a/files/fr/web/css/transform-origin/index.html +++ b/files/fr/web/css/transform-origin/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/transform-origin <div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Par exemple, l'origine par défaut pour la fonction <code>rotate()</code> est le centre de la rotation. Cette propriété est utilisée en :</p> <ol> @@ -152,280 +150,191 @@ transform-origin: unset; <h2 id="Exemples">Exemples</h2> -<p>Voir la page sur <a class="internal" href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a> pour des exemples supplémentaires.</p> +<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">l'utilisation des transformations CSS</a> pour des exemples supplémentaires.</p> -<table class="standard-table"> - <tbody> - <tr> - <th>Code</th> - <th>Exemple</th> - </tr> - <tr> - <td> - <p><code>transform: none;</code></p> - </td> - <td> - <div class="hidden" id="transform_none"> - <pre class="brush: html"> -<div class="box1">&nbsp;</div> -</pre> +<h3 id="a_demonstration_of_various_transform_values">Illustrations des différentes valeurs de transform</h3> - <pre class="brush: css"> -.box1 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; +<p>Cet exemple illustre ce que donnent les différentes valeurs de <code>transform-origin</code> pour différentes fonctions de transformation.</p> + +<pre class="brush: html hidden"> +<div class="container"> + +<div class="example"> + <div class="box box1">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> transform: none; -} -</pre> - </div> +</pre> - <p>{{EmbedLiveSample('transform_none', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_only"> - <pre class="brush: html"> -<div class="box2">&nbsp;</div> -</pre> +<div class="example"> + <div class="box box2">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> - <pre class="brush: css"> -.box2 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; +<pre> transform: rotate(30deg); -} -</pre> - </div> +</pre> - <p>{{EmbedLiveSample('transform_rotate_only', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: 0 0;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate"> - <pre class="brush: html"> -<div class="box3">&nbsp;</div> -</pre> +<div class="example"> + <div class="box box3">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> - <pre class="brush: css"> -.box3 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform-origin: 0 0; +<pre> transform: rotate(30deg); -} -</pre> - </div> +transform-origin: 0 0; +</pre> - <p>{{EmbedLiveSample('transform_rotate', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: 100% 100%;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_with_percentage"> - <pre class="brush: html"> -<div class="box4">&nbsp;</div> -</pre> +<div class="example"> + <div class="box box4">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> - <pre class="brush: css"> -.box4 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; +<pre> +transform: rotate(30deg); transform-origin: 100% 100%; +</pre> + +<div class="example"> + <div class="box box5">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> transform: rotate(30deg); -} -</pre> - </div> +transform-origin: -1em -3em; +</pre> - <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: -10em -30em;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_with_em"> - <pre class="brush: html"> -<div class="box5">&nbsp;</div> +<div class="example"> + <div class="box box6">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: scale(1.7); +</pre> + +<div class="example"> + <div class="box box7">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: scale(1.7); +transform-origin: 0 0; +</pre> + +<div class="example"> + <div class="box box8">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: scale(1.7); +transform-origin: 100% -30%; +</pre> + +<div class="example"> + <div class="box box9">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: skewX(50deg); +transform-origin: 100% -30%; +</pre> + +<div class="example"> + <div class="box box10">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: skewY(50deg); +transform-origin: 100% -30%; +</pre> + +</div> </pre> - <pre class="brush: css"> -.box5 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform-origin: -10em -30em; -transform: rotate(30deg); +<pre class="brush: css hidden"> +.container { + display: grid; + grid-template-columns: 200px 100px; + gap: 20px; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_rotate_with_em', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.9);</code></p> - </td> - <td> - <div class="hidden" id="transform_scale_only"> - <pre class="brush: html"> -<div class="box6">&nbsp;</div> -</pre> +.example { + position: relative; + margin: 0 2em 4em 5em; +} - <pre class="brush: css"> -.box6 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(1.9); +.box { + display: inline-block; + width: 3em; + height: 3em; + border: solid 1px; + background-color: palegreen; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_scale_only', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.9);<br> - transform-origin: 0 0;</code></p> - </td> - <td> - <div class="hidden" id="transform_scale_without_origin"> - <pre class="brush: html"> -<div class="box7">&nbsp;</div> -</pre> +.original { + position: absolute; + left: 0; + opacity: 20%; +} - <pre class="brush: css"> -.box7 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(1.9); -transform-origin: 0 0; +.box1 { + transform: none; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_scale_without_origin', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.9);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_scale"> - <pre class="brush: html"> -<div class="box8">&nbsp;</div> -</pre> +.box2 { + transform: rotate(30deg); +} - <pre class="brush: css"> -.box8 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(1.9); -transform-origin: 100% -30%; +.box3 { + transform: rotate(30deg); + transform-origin: 0 0; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_scale', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: skewX(50deg);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_skew_x"> - <pre class="brush: html"> -<div class="box9">&nbsp;</div> -</pre> +.box4 { + transform: rotate(30deg); + transform-origin: 100% 100%; +} - <pre class="brush: css"> -.box9 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: skewX(50deg); -transform-origin: 100% -30%; +.box5 { + transform: rotate(30deg); + transform-origin: -1em -3em; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_skew_x', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: skewY(50deg);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_skew_y"> - <pre class="brush: html"> -<div class="box10">&nbsp;</div> -</pre> +.box6 { + transform: scale(1.7); +} + +.box7 { + transform: scale(1.7); + transform-origin: 0 0; +} + +.box8 { + transform: scale(1.7); + transform-origin: 100% -30%; +} + +.box9 { + transform: skewX(50deg); + transform-origin: 100% -30%; +} - <pre class="brush: css"> .box10 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: skewY(50deg); -transform-origin: 100% -30%; + transform: skewY(50deg); + transform-origin: 100% -30%; } + </pre> - </div> - <p>{{EmbedLiveSample('transform_skew_y', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - </tbody> -</table> +<p>{{EmbedLiveSample('a_demonstration_of_various_transform_values', '', 1350) }}</p> <h2 id="Spécifications">Spécifications</h2> @@ -455,6 +364,6 @@ transform-origin: 100% -30%; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a></li> <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li> </ul> diff --git a/files/fr/web/css/transform-style/index.html b/files/fr/web/css/transform-style/index.html index 7d61b02a8a..28415333d1 100644 --- a/files/fr/web/css/transform-style/index.html +++ b/files/fr/web/css/transform-style/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/transform-style <div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>S'ils sont aplanis, les éléments-fils n'auront pas d'espace tridimensionnel propre.</p> <p>Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui ne sont pas des feuilles (autrement dit des descendants qui n'ont aucun fils).</p> diff --git a/files/fr/web/css/transform/index.html b/files/fr/web/css/transform/index.html index 3743527c47..f8340bbc01 100644 --- a/files/fr/web/css/transform/index.html +++ b/files/fr/web/css/transform/index.html @@ -14,12 +14,10 @@ translation_of: Web/CSS/transform <div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si la propriété est différente de <code>none</code>, un <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">contexte d'empilement</a> sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont <code>position</code><code>: fixed;</code> ou <code>position: absolute;</code>.</p> <div class="warning"> -<p><strong>Attention !</strong> Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Mod%C3%A8le_de_mise_en_forme_visuelle#Les_%C3%A9l%C3%A9ments_en_ligne_et_les_bo%C3%AEtes_en_ligne">boîtes en ligne non-remplacées</a>, des <a href="/fr/docs/Web/HTML/Element/col">colonnes de tableau</a> ou des <a href="/fr/docs/Web/HTML/Element/colgroup">groupes de colonnes de tableau</a> ne peuvent pas être transformés.</p> +<p><strong>Attention :</strong> Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Mod%C3%A8le_de_mise_en_forme_visuelle#Les_%C3%A9l%C3%A9ments_en_ligne_et_les_bo%C3%AEtes_en_ligne">boîtes en ligne non-remplacées</a>, des <a href="/fr/docs/Web/HTML/Element/col">colonnes de tableau</a> ou des <a href="/fr/docs/Web/HTML/Element/colgroup">groupes de colonnes de tableau</a> ne peuvent pas être transformés.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -80,13 +78,13 @@ transform: unset; {{csssyntax}} -<div class="blockIndicator note"> -<p><strong>Note :</strong> Si on utilise plusieurs fonctions dont <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code>, celle-ci devra apparaître en premier.</p> +<div class="note"> +<p><strong>Note :</strong> Si on utilise plusieurs fonctions dont <code><a href="/fr/docs/Web/CSS/transform-function/perspective()">perspective()</a></code>, celle-ci devra apparaître en premier.</p> </div> <h2 id="Exemples">Exemples</h2> -<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a>, {(cssxref("<transform-function>")}} ou l'exemple suivant.</p> +<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">l'utilisation des transformations CSS</a>, {(cssxref("<transform-function>")}} ou l'exemple suivant.</p> <h3 id="HTML">HTML</h3> @@ -152,7 +150,7 @@ transform: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a></li> <li>Le type de donnée {{cssxref("<transform-function>")}}</li> <li><a href="https://paulirish.com/2010/introducing-css3please/#comment-36380">Plus d'informations sur les rotations CSS3 et les filtres matriciels sur le blog de Paul Irish</a></li> </ul> diff --git a/files/fr/web/css/transition-delay/index.html b/files/fr/web/css/transition-delay/index.html index bb68973171..6282a0a5cc 100644 --- a/files/fr/web/css/transition-delay/index.html +++ b/files/fr/web/css/transition-delay/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transition-delay <div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette durée peut être nulle, positive ou négative :</p> <ul> @@ -52,275 +50,75 @@ transition-delay: unset; <h2 id="Exemples">Exemples</h2> -<div> -<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-delay: 0.5s</code></p> +<h3 id="exemple_illustrant_differentes_temporisations">Exemple illustrant différentes temporisations</h3> -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> +<h4>HTML</h4> -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:0.5s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:0.5s; - transition-timing-function: linear; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:0.5s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:0.5s; - transition-timing-function: linear; -} -</pre> +<pre class="brush:html"> + <div class="box delay-1">0,5 secondes</div> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); + <div class="box delay-2">2 secondes</div> - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} + <div class="box delay-3">4 secondes</div> -var intervalID = window.setInterval(updateTransition, 7000); + <button id="change">Changer</button> </pre> -</div> - -<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> -</div> -<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-delay: 1s</code></p> +<h4>CSS</h4> -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} +<pre class="brush:css;"> .box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:1s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:1s; - transition-timing-function: linear; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:1s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:1s; - transition-timing-function: linear; + margin: 20px; + padding: 10px; + display: inline-block; + width: 100px; + height: 100px; + background-color: red; + font-size: 18px; + transition-property: background-color font-size transform color; + transition-timing-function: ease-in-out; + transition-duration: 3s; } -</pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; +.transformed-state { + transform: rotate(270deg); + background-color: blue; + color: yellow; + font-size: 12px; + transition-property: background-color font-size transform color; + transition-timing-function: ease-in-out; + transition-duration: 3s; } -var intervalID = window.setInterval(updateTransition, 7000); -</pre> -</div> - -<div>{{EmbedLiveSample("delay_1s",275,150)}}</div> -</div> - -<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-delay: 2s</code></p> - -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:2s; - transition-timing-function: linear; +.delay-1 { + transition-delay: 0.5s; } -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:2s; - transition-timing-function: linear; -} -</pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; +.delay-2 { + transition-delay: 2s; } -var intervalID = window.setInterval(updateTransition, 7000); -</pre> -</div> - -<div>{{EmbedLiveSample("delay_2s",275,150)}}</div> -</div> - -<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-delay: 4s</code></p> - -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:4s; - transition-timing-function: ease-in-out; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:4s; - transition-timing-function: ease-in-out; +.delay-3 { + transition-delay: 4s; } </pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); +<h4>JavaScript</h4> - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; +<pre class="brush:js">function change() { + const elements = document.querySelectorAll("div.box"); + for (let element of elements) { + element.classList.toggle("transformed-state"); } - - return el; } -var intervalID = window.setInterval(updateTransition, 7000); +const changeButton = document.querySelector("#change"); +changeButton.addEventListener("click", change); </pre> -</div> -<div>{{EmbedLiveSample("delay_4s",275,150)}}</div> -</div> -</div> +<h4>Résultat</h4> + +<div>{{EmbedLiveSample("exemple_illustrant_differentes_temporisations",275,200)}}</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/transition-duration/index.html b/files/fr/web/css/transition-duration/index.html index 6cce9a7304..d24b28832a 100644 --- a/files/fr/web/css/transition-duration/index.html +++ b/files/fr/web/css/transition-duration/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transition-duration <div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("transition-property")}} (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,267 +44,74 @@ transition-duration: unset; <h2 id="Exemples">Exemples</h2> -<div> -<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-duration: 0.5s</code></p> +<h3 id="exemple_illustrant_differentes_durees">Exemple illustrant différentes durées</h3> -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> +<h4>HTML</h4> -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:0.5s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transformv color; - transition-duration:0.5s; - transition-timing-function: ease-in-out; -} -</pre> +<pre class="brush:html"> + <div class="box duration-1">0,5 secondes</div> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); + <div class="box duration-2">2 secondes</div> - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} + <div class="box duration-3">4 secondes</div> -var intervalID = window.setInterval(updateTransition, 7000); + <button id="change">Changer</button> </pre> -</div> - -<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div> -</div> -<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-duration: 1s</code></p> +<h4>CSS</h4> -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} +<pre class="brush:css;"> .box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top -webkit-transform color; - -webkit-transition-duration:1s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform color; - transition-duration:1s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; - -webkit-transition-duration:1s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:1s; - transition-timing-function: ease-in-out; + margin: 20px; + padding: 10px; + display: inline-block; + width: 100px; + height: 100px; + background-color: red; + font-size: 18px; + transition-property: background-color font-size transform color; + transition-timing-function: ease-in-out; } -</pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; +.transformed-state { + transform: rotate(270deg); + background-color: blue; + color: yellow; + font-size: 12px; + transition-property: background-color font-size transform color; + transition-timing-function: ease-in-out; } -var intervalID = window.setInterval(updateTransition, 7000); -</pre> -</div> - -<div>{{EmbedLiveSample("duration_1s",275,150)}}</div> -</div> - -<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-duration: 2s</code></p> - -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:2s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:2s; - transition-timing-function: ease-in-out; +.duration-1 { + transition-duration: 0.5s; } -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:2s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:2s; - transition-timing-function: ease-in-out; -} -</pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; +.duration-2 { + transition-duration: 2s; } -var intervalID = window.setInterval(updateTransition, 7000); -</pre> -</div> - -<div>{{EmbedLiveSample("duration_2s",275,150)}}</div> -</div> - -<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-duration: 4s</code></p> - -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:4s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:4s; - transition-timing-function: ease-in-out; +.duration-3 { + transition-duration: 4s; } </pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); +<h4>JavaScript</h4> - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; +<pre class="brush:js">function change() { + const elements = document.querySelectorAll("div.box"); + for (let element of elements) { + element.classList.toggle("transformed-state"); } - - return el; } -var intervalID = window.setInterval(updateTransition, 7000); +const changeButton = document.querySelector("#change"); +changeButton.addEventListener("click", change); </pre> -</div> -<div>{{EmbedLiveSample("duration_4s",275,150)}}</div> -</div> -</div> +<h4>Résultat</h4> + +<div>{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}}</div> + <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/transition-property/index.html b/files/fr/web/css/transition-property/index.html index 00c908f33c..cae24ac372 100644 --- a/files/fr/web/css/transition-property/index.html +++ b/files/fr/web/css/transition-property/index.html @@ -9,13 +9,13 @@ translation_of: Web/CSS/transition-property --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>transition-property</code></strong> désigne les noms des propriétés CSS sur lesquelles <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">un effet de transition</a> devrait être appliqué.</p> +<p>La propriété <strong><code>transition-property</code></strong> désigne les noms des propriétés CSS sur lesquelles <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">un effet de transition</a> devrait être appliqué.</p> <div>{{EmbedInteractiveExample("pages/css/transition-property.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">L'ensemble des propriétés CSS qui peuvent être animées</a> évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.</div> +<div class="note"> + <p><strong>Note :</strong> <a href="/fr/docs/Web/CSS/CSS_animated_properties">L'ensemble des propriétés CSS qui peuvent être animées</a> évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.</p> +</div> <p>Si vous définissez une propriété raccourcie (par exemple {{cssxref("background")}}), toutes les propriétés détaillées correspondantes seront animées de la même façon.</p> @@ -90,6 +90,6 @@ transition-property: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Utiliser les transitions CSS</a></li> <li>{{domxref("TransitionEvent")}}</li> </ul> diff --git a/files/fr/web/css/transition-timing-function/index.html b/files/fr/web/css/transition-timing-function/index.html index 6e456d5893..6581f0d272 100644 --- a/files/fr/web/css/transition-timing-function/index.html +++ b/files/fr/web/css/transition-timing-function/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/transition-timing-function <div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette courbe d'accelération est définie en utilisant une {{cssxref("<timing-function>")}} pour chacune des propriétés à animer.</p> <p>Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :</p> @@ -112,8 +110,7 @@ transition-timing-function: unset; <div> <h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> @@ -122,7 +119,7 @@ transition-timing-function: unset; <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div></pre> -<pre class="brush:css;">.parent {} +<pre class="brush:css hidden">.parent {} .parent > div[class] { width: 12em; min-width: 12em; @@ -144,7 +141,7 @@ transition-timing-function: unset; } </pre> -<pre class="brush:js">function updateTransition() { +<pre class="brush:js hidden">function updateTransition() { var els = document.querySelectorAll(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classList.toggle("box1"); @@ -153,7 +150,6 @@ transition-timing-function: unset; var intervalID = window.setInterval(updateTransition, 10000); </pre> -</div> <pre class="brush: css">.ease { transition-timing-function: ease; @@ -180,8 +176,7 @@ var intervalID = window.setInterval(updateTransition, 10000); <div> <h3 id="Fonctions_en_créneaux">Fonctions en créneaux</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> @@ -190,7 +185,7 @@ var intervalID = window.setInterval(updateTransition, 10000); <div class="step-end">step-end</div> </div></pre> -<pre class="brush:css;">.parent {} +<pre class="brush:css hidden">.parent {} .parent > div[class] { width: 12em; min-width: 12em; @@ -212,7 +207,7 @@ var intervalID = window.setInterval(updateTransition, 10000); } </pre> -<pre class="brush:js">function updateTransition() { +<pre class="brush:js hidden">function updateTransition() { var els = document.querySelectorAll(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classList.toggle("box1"); @@ -221,7 +216,6 @@ var intervalID = window.setInterval(updateTransition, 10000); var intervalID = window.setInterval(updateTransition, 10000); </pre> -</div> <pre class="brush: css">.jump-start { transition-timing-function: steps(5, jump-start); diff --git a/files/fr/web/css/transition/index.html b/files/fr/web/css/transition/index.html index f76a4e0332..878ab25a78 100644 --- a/files/fr/web/css/transition/index.html +++ b/files/fr/web/css/transition/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transition <div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide <a href="/fr/docs/Web/CSS/Pseudo-classes">de pseudo-classes</a> telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/translate/index.html b/files/fr/web/css/translate/index.html index 32b553ce6b..fe27ca5f8b 100644 --- a/files/fr/web/css/translate/index.html +++ b/files/fr/web/css/translate/index.html @@ -38,7 +38,7 @@ translate: 50% 105px 5rem; <dd>Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction <code>translate()</code> appelée avec ces deux arguments.</dd> <dt>Trois valeurs</dt> <dd>Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction <code>translate3d()</code> appelée avec ces trois arguments.</dd> - <dt id="none"><code>none</code></dt> + <dt><code>none</code></dt> <dd>Cette valeur indique qu'aucune translation ne devrait être appliquée.</dd> </dl> diff --git a/files/fr/web/css/unicode-bidi/index.html b/files/fr/web/css/unicode-bidi/index.html index b496a61a25..409716c23c 100644 --- a/files/fr/web/css/unicode-bidi/index.html +++ b/files/fr/web/css/unicode-bidi/index.html @@ -13,7 +13,9 @@ translation_of: Web/CSS/unicode-bidi <p>Les propriétés <code>unicode-bidi</code> et {{cssxref("direction")}} sont les deux seules propriétés qui ne sont pas impactées par {{cssxref("all")}}.</p> -<div class="note"><strong>Note :</strong> Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.</p> +</div> <pre class="brush:css no-line-numbers">/* Avec un mot-clé */ unicode-bidi: normal; diff --git a/files/fr/web/css/url()/index.html b/files/fr/web/css/url()/index.html index 732b22298c..9574edd651 100644 --- a/files/fr/web/css/url()/index.html +++ b/files/fr/web/css/url()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/url() <p>La fonction CSS <code><strong>url</strong></code><strong><code>()</code></strong> est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être utilisée comme paramètre d'une autre fonction comme {{cssxref('attr()')}}. Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de stye.</p> -<p>La notation fonctionelle <code>url()</code> correspond au type de donnée CSS <code><a href="/fr/docs/Web/CSS/url"><url></a></code>.</p> +<p>La notation fonctionelle <code>url()</code> correspond au type de donnée CSS <code><a href="/fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f"><url></a></code>.</p> <pre class="brush: css no-line-numbers">/* Utilisation simple */ url(https://example.com/images/myImg.jpg); @@ -53,7 +53,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <p>Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante).</p> -<p class="task-list-item">La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur <code><a href="/fr/docs/Web/CSS/@font-face/src">src</a></code> pour une règle <code><a href="/fr/docs/Web/CSS/@font-face">@font-face</a></code> ou <code><a href="/fr/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></code></p> +<p>La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur <code><a href="/fr/docs/Web/CSS/@font-face/src">src</a></code> pour une règle <code><a href="/fr/docs/Web/CSS/@font-face">@font-face</a></code> ou <code><a href="/fr/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></code></p> <p>Dans la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'<code>url()</code> a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification <em>CSS Values and Units</em> de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement <code>url()</code> ne permet que de décrire des valeurs <code><url></code>.</p> @@ -64,27 +64,26 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <dl> <dt><code>string</code></dt> <dd> + <p>Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG.</p> <dl> <dt><code><url></code></dt> <dd>Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à <code>0x7e</code>. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes : <pre class="syntaxbox"><propriété_css>: url("https://example.com/image.png") <propriété_css>: url('https://example.com/image.png') <propriété_css>: url(https://example.com/image.png)</pre> + <p>Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (<code>\</code>) avant toute parenthèse, espace ou apostrophe (<code>'</code>) ou guillemets(<code>"</code>) faisant partie de l'URL.</p> </dd> </dl> </dd> <dt><em>chemin</em></dt> <dd>La référence à un identifiant d'une <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">forme SVG</a> -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, or <code>rect</code>. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin.</dd> -</dl> - -<dl> <dt><code>url-modifier</code> {{Experimental_Inline}}</dt> <dd>À l'avenir, la fonction <code>url()</code> pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> -<pre class="syntaxbox">url( <a href="/fr/docs/Web/CSS/string"><string></a> <a href="/en-US/docs/"><url-modifier></a>* )</pre> +<pre class="syntaxbox">url( <a href="/fr/docs/Web/CSS/string"><string></a> <a href="/en-US/docs/Web"><url-modifier></a>* )</pre> <h2 id="Exemples">Exemples</h2> @@ -110,30 +109,26 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h3 id="URI_de_données">URI de données</h3> -<div id="color-value"> <h4 id="HTML_2">HTML</h4> <pre class="brush: html"><div class="background"></div></pre> <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css">.background { +<pre class="brush: css hidden">.background { height: 100vh; }</pre> -</div> <pre class="brush: css highlight[6]">.background { background: yellow; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); }</pre> -</div> <h4 id="Résultat_2">Résultat</h4> <p>{{EmbedLiveSample("URI_de_données", "100%", 50)}}</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -178,5 +173,5 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <li>{{cssxref("element()")}}</li> <li>{{cssxref("_image","image()")}}</li> <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> + <li>{{cssxref("cross-fade()")}}</li> </ul> diff --git a/files/fr/web/css/used_value/index.html b/files/fr/web/css/used_value/index.html index 87c8cb6590..e27fe89bc7 100644 --- a/files/fr/web/css/used_value/index.html +++ b/files/fr/web/css/used_value/index.html @@ -30,7 +30,7 @@ original_slug: Web/CSS/Valeur_utilisée <h2 id="Différence_avec_les_valeurs_calculées">Différence avec les valeurs calculées</h2> -<p>CSS 2.0 définissait la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme <code>display</code>, <code>font-size</code> ou <code>line-height</code>), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de <em><a class="external" href="https://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a></em>) :</p> +<p>CSS 2.0 définissait la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme <code>display</code>, <code>font-size</code> ou <code>line-height</code>), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de <em><a href="https://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a></em>) :</p> <ul> <li><code>background-position</code></li> diff --git a/files/fr/web/css/user-modify/index.html b/files/fr/web/css/user-modify/index.html index ef32a0e9b1..400f9a8d37 100644 --- a/files/fr/web/css/user-modify/index.html +++ b/files/fr/web/css/user-modify/index.html @@ -24,10 +24,10 @@ user-modify: unset; </pre> <div class="warning"> -<p><strong>Attention !</strong> Cette propriété a été remplacée par l'attribut {{HTMLAttrxref("contenteditable")}}.</p> +<p><strong>Attention :</strong> Cette propriété a été remplacée par l'attribut {{HTMLAttrxref("contenteditable")}}.</p> </div> -<p>Cette propriété est similaire à l'attribut HTML {{htmlattrxref("contenteditable")}}. Une propriété similaire : <code>user-focus</code> a été proposée <a class="external" href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">pour des brouillons de la spécification CSS3 pour les interfaces utilisateur</a> mais fut rejetée par le groupe de travail. <strong>Elle a été désactivée de Firefox et n'a donc pas d'effet.</strong></p> +<p>Cette propriété est similaire à l'attribut HTML {{htmlattrxref("contenteditable")}}. Une propriété similaire : <code>user-focus</code> a été proposée <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">pour des brouillons de la spécification CSS3 pour les interfaces utilisateur</a> mais fut rejetée par le groupe de travail. <strong>Elle a été désactivée de Firefox et n'a donc pas d'effet.</strong></p> <h2 id="Syntaxe">Syntaxe</h2> @@ -71,7 +71,7 @@ user-modify: unset; <h2 id="Spécifications">Spécifications</h2> -<p><code>user-modify</code> a <a class="external" href="https://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify" lang="en">été proposée pour la spécification CSS 3 sur les interfaces utilisateurs</a> (le brouillon de travail de février 2000 qui est désormais remplacé par le module <em>Basic User Interface</em> de <em>CSS 3</em>).</p> +<p><code>user-modify</code> a <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify">été proposée pour la spécification CSS 3 sur les interfaces utilisateurs</a> (le brouillon de travail de février 2000 qui est désormais remplacé par le module <em>Basic User Interface</em> de <em>CSS 3</em>).</p> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/user-select/index.html b/files/fr/web/css/user-select/index.html index 9129e7054d..6415ba1753 100644 --- a/files/fr/web/css/user-select/index.html +++ b/files/fr/web/css/user-select/index.html @@ -66,7 +66,7 @@ user-select: unset; </dl> <div class="note"> -<p id="Formal_syntax"><strong>Note :</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">a renommé <code>user-select: element</code> en <code>contain</code></a>.</p> +<p><strong>Note :</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">a renommé <code>user-select: element</code> en <code>contain</code></a>.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/using_css_custom_properties/index.html b/files/fr/web/css/using_css_custom_properties/index.html index 718ed14de4..c9d8e4bce7 100644 --- a/files/fr/web/css/using_css_custom_properties/index.html +++ b/files/fr/web/css/using_css_custom_properties/index.html @@ -18,14 +18,14 @@ translation_of: Web/CSS/Using_CSS_custom_properties <p>Voici comment on déclare une variable :</p> -<pre class="brush:css; highlight:[2]">element { +<pre class="brush:css">element { --main-bg-color: brown; } </pre> <p>Et voici comment on l'utilise</p> -<pre class="brush:css; highlight:[2]">element { +<pre class="brush:css">element { background-color: var(--main-bg-color); } </pre> @@ -47,7 +47,9 @@ translation_of: Web/CSS/Using_CSS_custom_properties <li>les propriétés personnalisées, qui sont des propriétés spéciales notées <code>--*</code> où <code>*</code> représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : <code>--example-variable: 20px;</code> est une déclaration en CSS, utilisant la propriété personnalisée <code>--*</code> pour initialiser la valeur de la variable CSS <code>--example-variable</code> à <code>20px</code>.</li> </ul> -<div class="note"><strong>Note :</strong> Le préfixe de propriété personnalisée était noté <code>var-</code> dans les précédentes spécifications, mais a ensuite été changé pour <code>--</code>. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})</div> +<div class="note"> + <p><strong>Note :</strong> Le préfixe de propriété personnalisée était noté <code>var-</code> dans les précédentes spécifications, mais a ensuite été changé pour <code>--</code>. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})</p> +</div> <p>Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies.</p> @@ -55,8 +57,9 @@ translation_of: Web/CSS/Using_CSS_custom_properties <p>Commençons avec cette feuille CSS simple colorant les éléments de différentes classes avec la même couleur :</p> -<div id="sample1"> -<pre class="brush:css; highlight:[3,20,26,32]">.un { +<h3>Exemple 1</h3> + +<pre class="brush:css">.un { color: white; background-color: brown; margin: 10px; @@ -104,13 +107,14 @@ translation_of: Web/CSS/Using_CSS_custom_properties <p>ce qui donne ceci :</p> -<p>{{EmbedLiveSample("sample1",600,180)}}</p> +<p>{{EmbedLiveSample("exemple_1",600,180)}}</p> <p>Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à <code>brown</code> à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable.</p> </div> -<div id="sample2"> -<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root { +<h3>Exemple 2</h3> + +<pre class="brush:css">:root { --main-bg-color: brown; } @@ -200,7 +204,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties <p>Le premier argument passé à la fonction est le nom de la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> qui doit être substituée. Le deuxième argument, s'il est fourni, indique la valeur par défaut qui est utilisée lorsque la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> en question est invalide.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.</p> </div> @@ -221,13 +225,13 @@ translation_of: Web/CSS/Using_CSS_custom_properties </pre> <div class="note"> -<p><strong>Note : </strong>La syntaxe pour la valeur de recours, comme celle des <a dir="ltr" href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriétés personnalisées</a>, permet d'utiliser une virgule. Ainsi, <code>var(--toto, red, blue)</code> définit une valeur de recours égale à <code>red, blue</code>, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.</p> +<p><strong>Note :</strong> La syntaxe pour la valeur de recours, comme celle des <a href="https://www.w3.org/TR/css-variables/#custom-property">propriétés personnalisées</a>, permet d'utiliser une virgule. Ainsi, <code>var(--toto, red, blue)</code> définit une valeur de recours égale à <code>red, blue</code>, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.</p> <p>La syntaxe de la deuxième règle (sur <code>.trois</code>) permet d'utiliser une autre variable comme variable de secours et une autre valeur (<code>pink</code>) dans le cas où cette deuxième variable ne fonctionne pas.</p> </div> <div class="note"> -<p><strong>Note :</strong> Des problèmes de performances ont pu être observés<sup>[source ?] </sup> causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.</p> +<p><strong>Note :</strong> Des problèmes de performances ont pu être observés causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.</p> </div> <h2 id="Validité_et_valeurs">Validité et valeurs</h2> diff --git a/files/fr/web/css/value_definition_syntax/index.html b/files/fr/web/css/value_definition_syntax/index.html index 30586cd5d9..0628edd3d9 100644 --- a/files/fr/web/css/value_definition_syntax/index.html +++ b/files/fr/web/css/value_definition_syntax/index.html @@ -118,7 +118,9 @@ original_slug: Web/CSS/Syntaxe_de_définition_des_valeurs <li><code>bold 1em bold</code> car les deux composants doivent apparaître exactement une fois.</li> </ul> -<div class="note"><strong>Note :</strong> La juxtaposition est prioritaire par rapport à la double esperluette. <code>bold thin && <length></code> est donc équivalent à <code>[ </code><code>bold thin ] && <length></code>. Il décrit <code>bold thin <length></code> ou <code><length></code><code> bold thin</code> mais pas <code>bold <length></code><code> thin</code>.</div> +<div class="note"> + <p><strong>Note :</strong> La juxtaposition est prioritaire par rapport à la double esperluette. <code>bold thin && <length></code> est donc équivalent à <code>[ </code><code>bold thin ] && <length></code>. Il décrit <code>bold thin <length></code> ou <code><length></code><code> bold thin</code> mais pas <code>bold <length></code><code> thin</code>.</p> +</div> <h3 id="Double_barre">Double barre</h3> @@ -142,7 +144,9 @@ original_slug: Web/CSS/Syntaxe_de_définition_des_valeurs <li><code>bold</code> car le mot-clé n'est pas permis pour aucune valeur de l'entité.</li> </ul> -<div class="note"><strong>Note :</strong> La double esperluette est prioritaire par rapport à la double barre. <code>bold || thin && <length></code> est équivalent à <code>bold || [ thin && <length> ]</code> qui décrit <code>bold</code>, <code>thin</code> <code><length></code>, <code>bold thin</code> <code><length></code>, ou <code>thin <length> bold</code> mais pas <code><length></code><code> bold thin</code> car bold, s'il est présent doit apparaître avant <code>thin && <length></code>.</div> +<div class="note"> + <p><strong>Note :</strong> La double esperluette est prioritaire par rapport à la double barre. <code>bold || thin && <length></code> est équivalent à <code>bold || [ thin && <length> ]</code> qui décrit <code>bold</code>, <code>thin</code> <code><length></code>, <code>bold thin</code> <code><length></code>, ou <code>thin <length> bold</code> mais pas <code><length></code><code> bold thin</code> car bold, s'il est présent doit apparaître avant <code>thin && <length></code>.</p> +</div> <h3 id="La_barre_verticale">La barre verticale</h3> diff --git a/files/fr/web/css/vertical-align/index.html b/files/fr/web/css/vertical-align/index.html index fb25e35bf9..e477b68fba 100644 --- a/files/fr/web/css/vertical-align/index.html +++ b/files/fr/web/css/vertical-align/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/vertical-align <div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>La propriété <code>vertical-align</code> peut être utilisée dans deux contextes :</p> <ul> diff --git a/files/fr/web/css/viewport_concepts/index.html b/files/fr/web/css/viewport_concepts/index.html index 51937f9f12..81899a483a 100644 --- a/files/fr/web/css/viewport_concepts/index.html +++ b/files/fr/web/css/viewport_concepts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/Concepts_viewport --- <p>{{CSSRef}}</p> -<p class="summary">Dans cet article, nous définirons le concept de <em>viewport</em> ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.</p> +<p>Dans cet article, nous définirons le concept de <em>viewport</em> ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.</p> <h2 id="Qu'est-ce_qu'une_zone_d'affichage_(viewport)">Qu'est-ce qu'une zone d'affichage (<em>viewport</em>) ?</h2> @@ -143,7 +143,9 @@ body > footer { <p>Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <code><meta></code> suivante :</p> -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>viewport<span class="punctuation token">"</span></span> <span class="attr-name token">content</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">=</span>device-width<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"> +<meta name="viewport" content="width=device-width"> +</pre> <p>La propriété <code>width</code> contrôle la taille de la zone d'affichage et on l'utilisera généralement avec <code>device-width</code> qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme <code>maximum-scale</code>, <code>minimum-scale</code> et <code>user-scalable</code> afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.</p> diff --git a/files/fr/web/css/visibility/index.html b/files/fr/web/css/visibility/index.html index 540a64c3b1..319decacb7 100644 --- a/files/fr/web/css/visibility/index.html +++ b/files/fr/web/css/visibility/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/visibility <div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur <code>none</code>.</p> </div> @@ -40,9 +38,10 @@ visibility: unset; <dt><code>visible</code></dt> <dd>La valeur par défaut, la boîte est visible.</dd> <dt><code>hidden</code></dt> - <dd>La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont <code>visibility:visible</code>. L'élément ne pourra plus recevoir le focus (cf. <a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">la navigation au clavier avec les tabulations</a>).</dd> + <dd>La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont <code>visibility:visible</code>. L'élément ne pourra plus recevoir le focus (cf. <a href="/fr/docs/Web/HTML/Global_attributes/tabindex">la navigation au clavier avec les tabulations</a>).</dd> <dt><code>collapse</code></dt> <dd> + <p>Le mot-clé <code>collapse</code> a différents effets selon les éléments :</p> <ul> <li>Pour les lignes, les colonnes, les groupes de lignes et les groupes de colonnes d'un tableau, les éléments sont masqués et l'espace occupé est retiré (comme si on avait appliqué <code>{{cssxref("display")}}: none</code> aux colonnes/lignes du tableau). La taille des autres lignes et colonnes continue d'être calculée comme si les lignes et colonnes masquées étaient présentes. Cela a été conçu afin de pouvoir retirer rapidement des lignes et/ou des colonnes sans avoir à recalculer les dimensions pour l'ensemble du tableau.</li> <li>Les éléments flexibles sont masqués et l'espace qu'ils auraient occupé est retiré.</li> @@ -131,7 +130,7 @@ p.coucou { <h2 id="Accessibilité">Accessibilité</h2> -<p>Utiliser la propriété <code>visibility</code> avec la valeur <code>hidden</code> retirera l'objet de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">l'arbre d'accessibilité</a>. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.</p> +<p>Utiliser la propriété <code>visibility</code> avec la valeur <code>hidden</code> retirera l'objet de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">l'arbre d'accessibilité</a>. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.</p> <h2 id="Notes">Notes</h2> diff --git a/files/fr/web/css/visual_formatting_model/index.html b/files/fr/web/css/visual_formatting_model/index.html index 69a641a3f7..2d49388aa8 100644 --- a/files/fr/web/css/visual_formatting_model/index.html +++ b/files/fr/web/css/visual_formatting_model/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle --- <div>{{CSSRef}}</div> -<p>En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p> +<p>En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p> <ul> <li>Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non</li> @@ -30,13 +30,13 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <h3 id="Les_éléments_de_bloc_et_les_boîtes_de_bloc">Les éléments de bloc et les boîtes de bloc</h3> -<p>Un élément est dit « de bloc » lorsque <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété {{cssxref("display")}} qui lui est appliquée vaut : <code>block</code>, <code>list-item</code> ou <code>table</code>. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.</p> +<p>Un élément est dit « de bloc » lorsque <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de la propriété {{cssxref("display")}} qui lui est appliquée vaut : <code>block</code>, <code>list-item</code> ou <code>table</code>. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.</p> -<p>Chaque boîte de bloc contribue au <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de mise en forme des blocs</a>. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.</p> +<p>Chaque boîte de bloc contribue au <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de mise en forme des blocs</a>. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.</p> <p>La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.</p> -<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png"></p> +<p><img alt="venn_blocks.png" src="venn_blocks.png"></p> <p>Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.</p> @@ -52,7 +52,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <p>Si on prend le code HTML suivant, mis en forme avec les règles par défaut (<code>display:block</code>) :</p> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> Some inline text <p>followed by a paragraph</p> followed by more inline text. @@ -60,7 +60,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle </pre> <p>On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :<br> - <img alt="anonymous_block-level_boxes.png" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> + <img alt="anonymous_block-level_boxes.png" src="anonymous_block-level_boxes.png"></p> <p>À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur <code>initial</code>.</p> @@ -70,7 +70,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <p>Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura <code>display:inline</code> et {{HTMLElement("span")}} aura <code>display:block</code> :</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text. @@ -78,7 +78,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <p>Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <code><span></code> et une pour le texte qui suit cet élément. On a alors la structure suivante :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> +<p><img alt="" src="anonymous_block_box_break.png"></p> <h3 id="Les_éléments_en_ligne_et_les_boîtes_en_ligne">Les éléments en ligne et les boîtes en ligne</h3> @@ -88,7 +88,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <p>Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.</p> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> span { /* La valeur par défaut */ display:inline; @@ -101,7 +101,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle </div> </pre> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> span { display:inline-block; } diff --git a/files/fr/web/css/webkit_extensions/index.html b/files/fr/web/css/webkit_extensions/index.html index c3d2bab9c9..46babfeea4 100644 --- a/files/fr/web/css/webkit_extensions/index.html +++ b/files/fr/web/css/webkit_extensions/index.html @@ -19,7 +19,6 @@ translation_of: Web/CSS/WebKit_Extensions <p><strong>Note :</strong> Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.</p> </div> -<div class="index"> <h3 id="A">A</h3> <ul> @@ -191,11 +190,9 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("-webkit-text-stroke-width")}}</li> <li>{{CSSxRef("-webkit-touch-callout")}}</li> </ul> -</div> <h2 id="Propriétés_WebKit_en_voie_de_standardisation">Propriétés WebKit en voie de standardisation</h2> -<div class="index"> <ul> <li>{{CSSxRef("appearance", "-webkit-appearance")}}</li> <li>{{CSSxRef("-webkit-font-size-delta")}}</li> @@ -205,15 +202,13 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li> <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li> </ul> -</div> -<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><a id="spe_std" name="spe_std">Anciennes propriétés spécifiques désormais standardisées</a></h2> +<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées">Anciennes propriétés spécifiques désormais standardisées</h2> <div class="note"> <p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p> </div> -<div class="index"> <h3 id="A_2">A</h3> <ul> @@ -336,17 +331,15 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("word-break", "-epub-word-break")}}</li> <li>{{CSSxRef("writing-mode", "-epub-writing-mode")}}</li> </ul> -</div> <h2 id="Spécificités_prises_en_charge_par_Firefox">Spécificités prises en charge par Firefox</h2> <p>Les propriétés suivantes peuvent être utilisées avec le préfixe <code>-webkit-</code> sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les <a href="#spe_std">propriétés anciennement spécifiques et désormais standard </a>ci-avant).</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec <code>-webkit-</code>, Edge et Firefox redirigent de nombreuses propriétés préfixées avec <code>-webkit-</code> vers les équivalents sans préfixe ou avec <code>-moz-</code> ou <code>-ms-</code>.</p> </div> -<div class="index"> <h3 id="A_3">A</h3> <ul> @@ -451,7 +444,6 @@ translation_of: Web/CSS/WebKit_Extensions <ul> <li>{{CSSxRef("-webkit-user-select")}}</li> </ul> -</div> <p>* Prise en charge avec les préfixes <code>-moz-</code> et <code>-webkit-</code> dans Firefox mais pas pris en charge sans préfixe. Microsoft Edge et IE Mobile prennent en charge cette propriété avec le préfixe <code>-webkit-</code> plutôt qu'avec <code>-ms-</code> à des fins d'interopérabilité.<br> ** Ces valeurs sont prises en charges bien qu'elles ne soient pas standard et qu'elles ne soient pas en cours de standardisation.<br> @@ -459,7 +451,6 @@ translation_of: Web/CSS/WebKit_Extensions <h2 id="Pseudo-classes">Pseudo-classes</h2> -<div class="index"> <ul> <li>{{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}</li> <li>{{CSSxRef(":any()", ":-webkit-any()")}}</li> @@ -473,13 +464,11 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}</li> <li>{{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}</li> </ul> -</div> <h2 id="Pseudo-éléments">Pseudo-éléments</h2> <p>Pour des raisons de compatibilité web, Blink, WebKit et Gecko considèrent les pseudo-éléments commençant par <code>::-webkit-</code> comme valides.</p> -<div class="index"> <ul> <li>{{CSSxRef("::-webkit-file-upload-button")}}</li> <li>{{CSSxRef("::-webkit-inner-spin-button")}}</li> @@ -498,11 +487,9 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("::-webkit-slider-runnable-track")}}</li> <li>{{CSSxRef("::-webkit-slider-thumb")}}</li> </ul> -</div> <h2 id="Caractéristiques_média">Caractéristiques média</h2> -<div class="index"> <ul> <li>{{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}</li> <li>{{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}</li> @@ -510,7 +497,6 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li> <li>{{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}</li> </ul> -</div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/white-space/index.html b/files/fr/web/css/white-space/index.html index ab8f9da20b..7e6dd7ac48 100644 --- a/files/fr/web/css/white-space/index.html +++ b/files/fr/web/css/white-space/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/white-space <div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.</p> </div> diff --git a/files/fr/web/css/widows/index.html b/files/fr/web/css/widows/index.html index 8e765b0acf..29932c7497 100644 --- a/files/fr/web/css/widows/index.html +++ b/files/fr/web/css/widows/index.html @@ -43,7 +43,7 @@ widows: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">div { +<pre class="brush: css">div { background-color: #8cffa0; columns: 3; widows: 2; diff --git a/files/fr/web/css/width/index.html b/files/fr/web/css/width/index.html index 4ef4f53eeb..b61bd7e63d 100644 --- a/files/fr/web/css/width/index.html +++ b/files/fr/web/css/width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/width <div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.</p> </div> @@ -55,25 +53,25 @@ width: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="length" name="length"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>Voir {{cssxref("<length>")}} pour les unités qui peuvent être utilisées.</dd> - <dt><a id="percentage" name="percentage"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>Permet de définir la largeur en pourcentages ({{cssxref("<percentage>")}}) par rapport à la largeur du bloc contenant le bloc courant. Si la largeur du bloc englobant dépend de la largeur de l'élément, la disposition est indéfinie.</dd> - <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt> + <dt><code>border-box</code>{{experimental_inline}}</dt> <dd>Si cette valeur est présente, la longueur ({{cssxref("<length>")}}) ou le pourcentage ({{cssxref("<percentage>")}}) est appliqué à la boîte de bordure (<em>border</em>) de l'élément.</dd> - <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt> + <dt><code>content-box</code> {{experimental_inline}}</dt> <dd>Si cette valeur est présente, la longueur ({{cssxref("<length>")}}) ou le pourcentage ({{cssxref("<percentage>")}}) est appliqué à la boîte de contenu de l'élément.</dd> - <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dt><code>auto</code></dt> <dd>Le navigateur calculera et sélectionnera une largeur pour l'élément.</dd> - <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt> + <dt><code>fill</code> {{experimental_inline}}</dt> <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd> - <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt> + <dt><code>max-content</code> {{experimental_inline}}</dt> <dd>La largeur intrinsèque préférée.</dd> - <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt> + <dt><code>min-content</code> {{experimental_inline}}</dt> <dd>La largeur intrinsèque minimum.</dd> - <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt> + <dt><code>available</code> {{experimental_inline}}</dt> <dd>La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (<em>padding</em>).</dd> - <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt> + <dt><code>fit-content</code> {{experimental_inline}}</dt> <dd>La quantité la plus grande entre : <ul> <li>La largeur intrinsèque minimum</li> diff --git a/files/fr/web/css/will-change/index.html b/files/fr/web/css/will-change/index.html index 0fcad00b3c..fd846b0880 100644 --- a/files/fr/web/css/will-change/index.html +++ b/files/fr/web/css/will-change/index.html @@ -12,10 +12,10 @@ translation_of: Web/CSS/will-change <p>La propriété <strong><code>will-change</code></strong> fournit une indication au navigateur sur la propension d'un élément à changer (afin que le navigateur puisse mettre en place les optimisations nécessaires avant que l'élément change vraiment). Ce type d'optimisation permet d'augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement.</p> <div class="warning"> -<p><strong>Attention !</strong> <code>will-change</code> est conçu pour être utilisé en dernier recours afin d'aider à la résolutions de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.</p> +<p><strong>Attention :</strong> <code>will-change</code> est conçu pour être utilisé en dernier recours afin d'aider à la résolutions de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.</p> </div> -<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Avec un mot-clé */ will-change: auto; will-change: scroll-position; will-change: contents; @@ -33,7 +33,7 @@ will-change: unset; <ul> <li> - <p id="Don't_apply_will-change_to_too_many_elements"><em>Il ne faut pas appliquer <code>will-change</code> à de trop nombreux éléments.</em> Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avec <code>will-change</code> pour utiliser les ressources de l'ordinateur. Aussi, si <code>will-change</code> est « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources.</p> + <p><em>Il ne faut pas appliquer <code>will-change</code> à de trop nombreux éléments.</em> Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avec <code>will-change</code> pour utiliser les ressources de l'ordinateur. Aussi, si <code>will-change</code> est « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources.</p> </li> <li> <p><em>À utiliser avec parcimonie.</em> Normalement, le navigateur essaie d'appliquer les optimisations dès que possible afin de revenir au plus vite dans un état normal. En revanche, en utilisant <code>will-change</code> dans la feuille de style, on indique que les éléments ciblés vont bientôt changer et le navigateur conservera les optimisations en cours beaucoup plus longtemps si la propriété est maintenue. Il est donc conseillé d'activer et de désactiver <code>will-change</code> de façon pertinente grâce à du script avant et après le changement concerné.</p> @@ -42,10 +42,10 @@ will-change: unset; <p><em>Ne pas « sur-optimiser » avec <code>will-change</code></em>. Si votre page fonctionne correctement, n'ajoutez pas la propriété <code>will-change</code> sur certains éléments uniquement pour gagner un peu de vitesse. <code>will-change</code> est conçu pour être utilisé en dernier ressort afin de régler les problèmes de performances existants. En utilisant <code>will-change</code> trop souvent, cela consommera plus de mémoire, complexifiera le rendu de la page pour le navigateur (qui se préparera au changement). En bref, cela réduira les performances de la page.</p> </li> <li> - <p id="Give_it_sufficient_time_to_work"><em>Laisser le temps à <code>will-change</code> pour qu'il fonctionne.</em> Cette propriété est conçue pour permettre aux auteurs d'indiquer à l'agent-utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci aura lieu et alors modifier <code>will-change</code> en prévision.</p> + <p><em>Laisser le temps à <code>will-change</code> pour qu'il fonctionne.</em> Cette propriété est conçue pour permettre aux auteurs d'indiquer à l'agent-utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci aura lieu et alors modifier <code>will-change</code> en prévision.</p> </li> <li> - <p><em>Sachez que <code>will-change</code></em><em> peut modifier l'apparence des éléments</em> lorsqu'il est utilisé avec des propriétés qui créent <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">des contextes d'empilement</a> (par exemple <code>will-change: opacity</code>) car le contexte d'empilement est créé au préalable.</p> + <p><em>Sachez que <code>will-change</code></em><em> peut modifier l'apparence des éléments</em> lorsqu'il est utilisé avec des propriétés qui créent <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">des contextes d'empilement</a> (par exemple <code>will-change: opacity</code>) car le contexte d'empilement est créé au préalable.</p> </li> </ul> @@ -75,14 +75,14 @@ will-change: unset; <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">.sidebar { +<pre class="brush: css">.sidebar { will-change: transform; } </pre> <p>Dans l'exemple précédent, on applique la propriété <code>will-change</code> à même la feuille de style. Dans ce cas, le navigateur conservera l'optimisation en mémoire beaucoup plus longtemps que nécessaire. Nous avons vu précédemment que cela devait être évité et voici donc un deuxième exemple qui illustre comment appliquer la propriété <code>will-change</code> grâce à JavaScript (et qui correspond donc à la méthode qui devrait être utilisée la plupart du temps) :</p> -<pre class="brush: js notranslate">var el = document.getElementById('element'); +<pre class="brush: js">var el = document.getElementById('element'); // On applique will-change quand la souris/curseur // pointeur/stylet passe au-dessus de l'élément @@ -101,7 +101,7 @@ function removeHint() { <p>Cela peut toutefois être pertinent d'inclure <code>will-change</code> dans la feuille de style d'une application qui gère des changements de pages ou des diapositives parmi lesquelles on navigue lorsque les pages sont complexes. Cela permettra au navigateur de préparer la transition en avance de phase et de mieux réagir au changement de page (ou de diapositive) lorsque le bouton associé sera utilisé.</p> -<pre class="brush: css notranslate">.slide { +<pre class="brush: css">.slide { will-change: transform; }</pre> diff --git a/files/fr/web/css/word-break/index.html b/files/fr/web/css/word-break/index.html index 8150babe95..3276f00594 100644 --- a/files/fr/web/css/word-break/index.html +++ b/files/fr/web/css/word-break/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/word-break <div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Avec un mot-clé */ diff --git a/files/fr/web/css/word-spacing/index.html b/files/fr/web/css/word-spacing/index.html index e1902d222c..a65e58038f 100644 --- a/files/fr/web/css/word-spacing/index.html +++ b/files/fr/web/css/word-spacing/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/word-spacing <div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Avec un mot-clé */ diff --git a/files/fr/web/css/writing-mode/index.html b/files/fr/web/css/writing-mode/index.html index 1895627610..440964aabf 100644 --- a/files/fr/web/css/writing-mode/index.html +++ b/files/fr/web/css/writing-mode/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/writing-mode <div>{{EmbedInteractiveExample("pages/css/writing-mode.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété définit la direction du flux du bloc. C'est dans cette direction que les conteneurs de bloc seront empilés et c'est dans cette direction que le contenu en flux « coule » dans un bloc contenur. Ainsi, la propriété <code>writing-mode</code> détermine également l'ordre du contenu de niveau bloc.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -162,7 +160,7 @@ th { <p>Voici un aperçu du résultat avec un navigateur qui prend en charge <code>writing-mode</code> :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p> +<p><img alt="" src="writing-mode-actual-result.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/z-index/index.html b/files/fr/web/css/z-index/index.html index eab41d5fc4..b8ece328df 100644 --- a/files/fr/web/css/z-index/index.html +++ b/files/fr/web/css/z-index/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/z-index <div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour les boîtes positionnées (celles pour lesquelles <code>position</code> est différent de <code>static</code>), la propriété <code>z-index</code> définit :</p> <ol> @@ -50,9 +48,9 @@ z-index: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dt><code>auto</code></dt> <dd>La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.</dd> - <dt><a id="integer" name="integer"><code><integer></code></a></dt> + <dt><code><integer></code></dt> <dd>L'entier fourni (type {{cssxref("<integer>")}}) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est <code>0</code>. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.</dd> </dl> diff --git a/files/fr/web/css/zoom/index.html b/files/fr/web/css/zoom/index.html index 5f175efda7..2d251aa1be 100644 --- a/files/fr/web/css/zoom/index.html +++ b/files/fr/web/css/zoom/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/zoom --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p>La propriété non-standard <strong><code>zoom</code></strong> permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">les transformations CSS</a>, si possible. Cependant, contrairement aux transformations CSS, <strong><code>zoom</code></strong> affecte la taille de l'élément.</p> +<p>La propriété non-standard <strong><code>zoom</code></strong> permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">les transformations CSS</a>, si possible. Cependant, contrairement aux transformations CSS, <strong><code>zoom</code></strong> affecte la taille de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -94,6 +94,6 @@ p:hover { <ul> <li><a href="https://css-tricks.com/almanac/properties/z/zoom/">L'article de CSS-Tricks sur <code>zoom</code></a></li> - <li>Le descripteur <code><a href="/fr/docs/Web/CSS/@viewport/zoom">zoom</a></code> pour la règle @ <code><a href="/fr/docs/Web/CSS/@viewport">@viewport</a></code></li> + <li>Le descripteur <code><a href="/fr/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518">zoom</a></code> pour la règle @ <code><a href="/fr/docs/Web/CSS/@viewport">@viewport</a></code></li> <li>{{bug("390936")}} à propos de l'implémentation de la propriété dans Firefox</li> </ul> |
