diff options
| -rw-r--r-- | files/fr/web/css/@counter-style/index.md | 101 | ||||
| -rw-r--r-- | files/fr/web/css/@viewport/index.md | 49 | ||||
| -rw-r--r-- | files/fr/web/css/border-block-style/index.md | 70 | ||||
| -rw-r--r-- | files/fr/web/css/border-bottom-style/index.md | 194 | ||||
| -rw-r--r-- | files/fr/web/css/border-inline-start/index.md | 81 | ||||
| -rw-r--r-- | files/fr/web/css/border-inline-style/index.md | 58 | ||||
| -rw-r--r-- | files/fr/web/css/border-left-style/index.md | 191 | ||||
| -rw-r--r-- | files/fr/web/css/border-right-style/index.md | 192 | ||||
| -rw-r--r-- | files/fr/web/css/border-top-style/index.md | 198 | ||||
| -rw-r--r-- | files/fr/web/css/break-before/index.md | 150 | ||||
| -rw-r--r-- | files/fr/web/css/column-rule-color/index.md | 77 | ||||
| -rw-r--r-- | files/fr/web/css/font-style/index.md | 162 |
12 files changed, 474 insertions, 1049 deletions
diff --git a/files/fr/web/css/@counter-style/index.md b/files/fr/web/css/@counter-style/index.md index 05a3eb08fb..b38dbb810f 100644 --- a/files/fr/web/css/@counter-style/index.md +++ b/files/fr/web/css/@counter-style/index.md @@ -1,15 +1,12 @@ --- title: '@counter-style' slug: Web/CSS/@counter-style -tags: - - CSS - - Reference - - Règle @ translation_of: Web/CSS/@counter-style +browser-compat: css.at-rules.counter-style --- {{CSSRef}} -La [règle @](/fr/docs/Web/CSS/Règles_@) CSS** `@counter-style`** permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle `@counter-style` explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes. +La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@counter-style`** permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle `@counter-style` explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes. ```css @counter-style thumbs { @@ -19,7 +16,7 @@ La [règle @](/fr/docs/Web/CSS/Règles_@) CSS** `@counter-style`** permet aux au } ul { - list-style: thumbs; + list-style: thumbs; } ``` @@ -31,42 +28,28 @@ La version initiale de CSS définit un ensemble de compteurs qui peuvent être u Chaque `@counter-style` est identifié par un nom et possède un ensemble de descripteurs. -- {{cssxref("@counter-style/system", "system")}} +- [`system`](/fr/docs/Web/CSS/@counter-style/system) - : Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes. -<!----> - -- {{cssxref("@counter-style/negative", "negative")}} +- [`negative`](/fr/docs/Web/CSS/@counter-style/negative) - : Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative. -<!----> - -- {{cssxref("@counter-style/prefix", "prefix")}} +- [`prefix`](/fr/docs/Web/CSS/@counter-style/prefix) - : Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif. -<!----> - -- {{cssxref("@counter-style/suffix", "suffix")}} +- [`suffix`](/fr/docs/Web/CSS/@counter-style/suffix) - : Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation. -<!----> - -- {{cssxref("@counter-style/range", "range")}} +- [`range`](/fr/docs/Web/CSS/@counter-style/range) - : Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours. -<!----> - -- {{cssxref("@counter-style/pad", "pad")}} +- [`pad`](/fr/docs/Web/CSS/@counter-style/pad) - : Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement. -<!----> - -- {{cssxref("@counter-style/fallback", "fallback")}} +- [`fallback`](/fr/docs/Web/CSS/@counter-style/fallback) - : Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne. -<!----> - -- {{cssxref("@counter-style/symbols", "symbols")}} +- [`symbols`](/fr/docs/Web/CSS/@counter-style/symbols) - : Ce descripteur définit les symboles qui doivent être utilisés pour représenter le marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants. L'utilisation des symboles et leur combinaison pour représenter le marqueur dépend de l'algorithme indiqué via le descripteur `system`. Ainsi, si `system` vaut `fixed`, chacun des N symboles définis dans le descripteur sera utilisé pour représenter les N premiers symboles. Une fois l'ensemble épuisé, le style de secours sera utilisé pour le reste de la liste. @@ -80,22 +63,32 @@ Chaque `@counter-style` est identifié par un nom et possède un ensemble de des } ``` -<!----> - -- {{cssxref("@counter-style/additive-symbols", "additive-symbols")}} - - : Certains symboles définis via le descripteurs `symbols` sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des _tuples additifs_ décrit avec ce descripteur. Chaque tuple additif se compose 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. -<!----> +- [`additive-symbols`](/fr/docs/Web/CSS/@counter-style/additive-symbols) + - : Certains symboles définis via le descripteur `symbols` sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des _tuples additifs_ décrit avec ce descripteur. Chaque tuple additif se compose 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. -- {{cssxref("@counter-style/speak-as", "speak-as")}} +- [`speak-as`](/fr/docs/Web/CSS/@counter-style/speak-as) - : Ce descripteur indique la façon dont le compteur peut être prononcé par un lecteur d'écran. Ainsi, la valeur du symbole peut être lue comme un nombre ou comme un alphabet ou comme des sons fournis. -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<ul class="exemple"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> + <li>Six</li> +</ul> +``` + ### CSS ```css @@ -104,53 +97,29 @@ Chaque `@counter-style` est identifié par un nom et possède un ensemble de des symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; suffix: " "; } -``` -```css .exemple { list-style: circled-alpha; } ``` -### HTML - -```html -<ul class="exemple"> - <li>Un</li> - <li>Deux</li> - <li>Trois</li> - <li>Quatre</li> - <li>Cinq</li> - <li>Six</li> -</ul> -``` - ### Résultat -{{EmbedLiveSample("Exemples")}} +{{EmbedLiveSample('')}} -> **Note :** Une page d'exemple avec plus de variables est disponible ici : <https://mdn.github.io/css-examples/counter-style-demo/>. +> **Note :** Une page d'exemple avec plus de variables est disponible ici : <https://mdn.github.io/css-examples/counter-style-demo/>. ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | -| {{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.at-rules.counter-style")}} - -### Notes relatives à Quantum - -- Gecko permettait d'utiliser `none` comme valeur pour les descripteurs `system` et `fallback` de `@counter-style` alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}). +{{Compat}} ## Voir aussi -- {{cssxref("list-style")}} -- {{cssxref("list-style-image")}} -- {{cssxref("list-style-position")}} -- {{cssxref("list-style-type")}} -- {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes -- Les fonctions CSS {{Cssxref("counter")}} et {{Cssxref("counters")}} +- [`list-style`](/fr/docs/Web/CSS/list-style), [`list-style-image`](/fr/docs/Web/CSS/list-style-image), [`list-style-position`](/fr/docs/Web/CSS/list-style-position), [`list-style-type`](/fr/docs/Web/CSS/list-style-type) +- [`symbols()`](/fr/docs/Web/CSS/symbols()) : la notation fonctionnelle qui permet de créer des styles de compteur anonymes +- Les fonctions CSS [`counter()`](/fr/docs/Web/CSS/counter()) et [`counters()`](/fr/docs/Web/CSS/counters()) - [Démonstration pour les styles de compteur](https://mdn.github.io/css-examples/counter-style-demo/) ([code](https://github.com/mdn/css-examples/tree/master/counter-style-demo)) diff --git a/files/fr/web/css/@viewport/index.md b/files/fr/web/css/@viewport/index.md index e27650eec2..f779767aae 100644 --- a/files/fr/web/css/@viewport/index.md +++ b/files/fr/web/css/@viewport/index.md @@ -1,16 +1,14 @@ --- title: '@viewport' slug: Web/CSS/@viewport -tags: - - CSS - - Experimental - - Reference - - Règle @ translation_of: Web/CSS/@viewport +browser-compat: css.at-rules.viewport --- -{{SeeCompatTable}}{{CSSRef}} +{{CSSRef}}{{deprecated_header}} -La règle @** `@viewport`** permet de configurer la zone d'affichage (le _viewport_ en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran). +> **Note :** Voir <https://github.com/w3c/csswg-drafts/issues/4766> quant à la discussion pour le retrait de @viewport des standards. + +La [règle @](fr/docs/Web/CSS/At-rule) **`@viewport`** permet de configurer la zone d'affichage (le _viewport_ en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple, Microsoft Edge qui gère la division de l'écran). Les longueurs exprimées en pourcentages sont calculées de façon relative à la **zone d'affichage initiale** c'est-à-dire le _viewport_ avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran. @@ -32,33 +30,31 @@ Un facteur de zoom de `1.0` ou de `100%` signifie qu'il n'y a eu aucun zoom. Si Les navigateurs sont supposés ignorer les descripteurs non reconnus. -- {{cssxref("@viewport/min-width","min-width")}} +- `min-width` - : Ce descripteur détermine la largeur minimale de la zone d'affichage (_viewport_) lorsque le document est affiché initialement. -- {{cssxref("@viewport/max-width","max-width")}} +- `max-width` - : Ce descripteur détermine la largeur maximale de la zone d'affichage (_viewport_) lorsque le document est affiché initialement. -- {{cssxref("@viewport/width","width")}} +- `width` - : Ce descripteur est un raccourci qui permet de définir `min-width` et `max-width`. -- {{cssxref("@viewport/min-height","min-height")}} +- `min-height` - : Ce descripteur détermine la hauteur minimale de la zone d'affichage (_viewport_) lorsque le document est affiché initialement. -- {{cssxref("@viewport/max-height","max-height")}} +- `max-height` - : Ce descripteur détermine la hauteur maximale de la zone d'affichage (_viewport_) lorsque le document est affiché initialement. -- {{cssxref("@viewport/height","height")}} +- `height` - : Ce descripteur est un raccourci qui permet de définir `min-height` et `max-height`. -- {{cssxref("@viewport/zoom","zoom")}} +- `zoom` - : Ce descripteur permet de définir le niveau de zoom initial. -- {{cssxref("@viewport/min-zoom","min-zoom")}} +- `min-zoom` - : Ce descripteur permet de définir le niveau de zoom minimal. -- {{cssxref("@viewport/max-zoom","max-zoom")}} +- `max-zoom` - : Ce descripteur permet de définir le niveau de zoom maximal. -- {{cssxref("@viewport/user-zoom","user-zoom")}} +- `user-zoom` - : Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom. -- {{cssxref("@viewport/orientation","orientation")}} +- `orientation` - : Ce descripteur contrôle l'orientation du document. -- {{cssxref("@viewport/ viewport-fit", "viewport-fit")}} +- `viewport-fit` - : Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires. -> **Note :**Un facteur de zoom de `1.0` ou `100%` 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. - ### Syntaxe formelle {{csssyntax}} @@ -84,16 +80,13 @@ Les navigateurs sont supposés ignorer les descripteurs non reconnus. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------- | -| {{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}} | {{Spec2("CSS Round Display")}} | Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}. | -| {{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}} | {{Spec2('CSS3 Device')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.at-rules.viewport")}} +{{Compat}} ## Voir aussi -- {{HTMLElement("meta")}} et plus précisément `<meta name="viewport">` -- [Utiliser la balise `meta` afin de contrôler la disposition sur les navigateurs mobiles](/fr/docs/Mozilla/Mobile/Balise_meta_viewport) +- [`<meta>`](/fr/docs/Web/HTML/Element/meta) et plus précisément `<meta name="viewport">` +- [Utiliser la balise `meta` afin de contrôler la disposition sur les navigateurs mobiles](/fr/docs/Web/HTML/Viewport_meta_tag) diff --git a/files/fr/web/css/border-block-style/index.md b/files/fr/web/css/border-block-style/index.md index aecd97b006..d82ebc4796 100644 --- a/files/fr/web/css/border-block-style/index.md +++ b/files/fr/web/css/border-block-style/index.md @@ -1,40 +1,55 @@ --- title: border-block-style slug: Web/CSS/border-block-style -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference translation_of: Web/CSS/border-block-style +browser-compat: css.properties.border-block-style --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété** `border-block-style`** permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-style`** permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à [`border-top-style`](/fr/docs/Web/CSS/border-top-style) et [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style) ou à [`border-left-style`](/fr/docs/Web/CSS/border-left-style) et [`border-right-style`](/fr/docs/Web/CSS/border-right-style) selon les valeurs des propriétés [`writing-mode`](/fr/docs/Web/CSS/writing-mode), [`direction`](/fr/docs/Web/CSS/direction) et [`text-orientation`](/fr/docs/Web/CSS/text-orientation). + +{{EmbedInteractiveExample("pages/css/border-block-style.html")}} + +Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété [`border-inline-style`](/fr/docs/Web/CSS/border-inline-style) qui définit [`border-inline-start-style`](/fr/docs/Web/CSS/border-inline-start-style) et [`border-inline-end-style`](/fr/docs/Web/CSS/border-inline-end-style). + +## Syntaxe ```css /* Valeurs de type <'border-style'> */ border-block-style: dashed; border-block-style: dotted; border-block-style: groove; -``` - -Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-inline-style")}} qui définit {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-end-style")}}. -## Syntaxe +/* Valeurs globales */ +border-block-style: inherit; +border-block-style: initial; +border-block-style: revert; +border-block-style: unset; +``` ### Valeur - `<'border-style'>` - - : Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}. + - : Le style de la ligne pour la bordure. Voir [`border-style`](/fr/docs/Web/CSS/border-style). + +## Définition formelle -### Syntaxe formelle +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<div> + <p class="texteExemple">Texte exemple</p> +</div> +``` + ### CSS ```css @@ -51,37 +66,20 @@ div { } ``` -### HTML - -```html -<div> - <p class="texteExemple">Texte exemple</p> -</div> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 140, 140)}} +{{EmbedLiveSample('', 140, 140)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- | -| {{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-block-style")}} +{{Compat}} ## Voir aussi -- Les propriétés physiques qui correspondent à cette propriété logique : - - - {{cssxref("border-top-style")}}, - - {{cssxref("border-right-style")}}, - - {{cssxref("border-bottom-style")}}, - - {{cssxref("border-left-style")}}. +- Les propriétés physiques qui correspondent à cette propriété logique : [`border-top-style`](/fr/docs/Web/CSS/border-top-style), [`border-right-style`](/fr/docs/Web/CSS/border-right-style), [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style), [`border-left-style`](/fr/docs/Web/CSS/border-left-style). -- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} +- [`writing-mode`](/fr/docs/Web/CSS/writing-mode), [`direction`](/fr/docs/Web/CSS/direction), [`text-orientation`](/fr/docs/Web/CSS/text-orientation) diff --git a/files/fr/web/css/border-bottom-style/index.md b/files/fr/web/css/border-bottom-style/index.md index 671bdd3720..09d4d01e9b 100644 --- a/files/fr/web/css/border-bottom-style/index.md +++ b/files/fr/web/css/border-bottom-style/index.md @@ -1,15 +1,12 @@ --- title: border-bottom-style slug: Web/CSS/border-bottom-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-bottom-style +browser-compat: css.properties.border-bottom-style --- {{CSSRef}} -La propriété** `border-bottom-style`** définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte. +La propriété **`border-bottom-style`** définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte. {{EmbedInteractiveExample("pages/css/border-bottom-style.html")}} @@ -33,118 +30,45 @@ border-bottom-style: outset; /* Valeurs globales */ border-bottom-style: inherit; border-bottom-style: initial; +border-bottom-style: revert; border-bottom-style: unset; ``` -### Valeurs - -- `<br-style>` - - - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté bas. Il peut prendre l'une des valeurs suivantes : - - <table class="standard-table"> - <tbody> - <tr> - <td><code>none</code></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> - 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> - 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> - 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>Affiche une ligne droite continue.</td> - </tr> - <tr> - <td><code>double</code></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> - 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> - 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> - 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> - <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> - </tbody> - </table> - -### Syntaxe formelle +La propriété `border-bottom-style` se définit avec l'un des mots-clés utilisés par la propriété [`border-style`](/fr/docs/Web/CSS/border-style). + +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">petits points</td> + <td class="b4">tirets</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table> +``` + ### CSS ```css @@ -170,57 +94,29 @@ tr, td { .b10 {border-bottom-style:outset;} ``` -### HTML - -```html -<table> - <tr> - <td class="b1">none</td> - <td class="b2">hidden</td> - <td class="b3">petits points</td> - <td class="b4">tirets</td> - </tr> - <tr> - <td class="b5">solid</td> - <td class="b6">double</td> - <td class="b7">groove</td> - <td class="b8">ridge</td> - </tr> - <tr> - <td class="b9">inset</td> - <td class="b10">outset</td> - </tr> -</table> -``` - ### Résultat -{{EmbedLiveSample('Exemples', 300, 200)}} +{{EmbedLiveSample('', 300, 200)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}} | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. | -| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}} | {{Spec2('CSS2.1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-bottom-style")}} +{{Compat}} ## Voir aussi -- Les autres propriétés liées au style des bordures : +- Les autres propriétés liées au style des bordures : - - {{cssxref("border-left-style")}} - - {{cssxref("border-right-style")}} - - {{cssxref("border-top-style")}} - - {{cssxref("border-style")}}. + - [`border-left-style`](/fr/docs/Web/CSS/border-left-style) + - [`border-right-style`](/fr/docs/Web/CSS/border-right-style) + - [`border-top-style`](/fr/docs/Web/CSS/border-top-style) + - [`border-style`](/fr/docs/Web/CSS/border-style). -- Les autres propriétés liées à la bordure haute : +- Les autres propriétés liées à la bordure basse : - - {{cssxref("border-bottom")}} - - {{cssxref("border-bottom-color")}} - - {{cssxref("border-bottom-width")}}. + - [`border-bottom`](/fr/docs/Web/CSS/border-bottom) + - [`border-bottom-color`](/fr/docs/Web/CSS/border-bottom-color) + - [`border-bottom-width`](/fr/docs/Web/CSS/border-bottom-width). diff --git a/files/fr/web/css/border-inline-start/index.md b/files/fr/web/css/border-inline-start/index.md index 546d698e4a..abbffc5693 100644 --- a/files/fr/web/css/border-inline-start/index.md +++ b/files/fr/web/css/border-inline-start/index.md @@ -1,27 +1,22 @@ --- title: border-inline-start slug: Web/CSS/border-inline-start -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference translation_of: Web/CSS/border-inline-start +browser-compat: css.properties.border-inline-start --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété** `border-inline-start`** est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-start-color")}}. +La propriété **`border-inline-start`** est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture. {{EmbedInteractiveExample("pages/css/border-inline-start.html")}} -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")}}. +## Propriétés détaillées correspondantes -On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : +Cette propriété est une propriété raccourcie pour les propriétés CSS : -- {{cssxref("border-block-start")}}, -- {{cssxref("border-block-end")}}, -- {{cssxref("border-inline-end")}}. +- [`border-inline-start-color`](/fr/docs/Web/CSS/border-inline-start-color) +- [`border-inline-start-style`](/fr/docs/Web/CSS/border-inline-start-style) +- [`border-inline-start-width`](/fr/docs/Web/CSS/border-inline-start-width) ## Syntaxe @@ -29,25 +24,47 @@ On peut rapprocher cette propriété des autres propriétés logiques raccourcie border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; + +/* Valeurs globales */ +border-inline-start: inherit; +border-inline-start: initial; +border-inline-start: revert; +border-inline-start: unset; ``` +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 [`border-top`](/fr/docs/Web/CSS/border-top), [`border-right`](/fr/docs/Web/CSS/border-right), [`border-bottom`](/fr/docs/Web/CSS/border-bottom) ou [`border-left`](/fr/docs/Web/CSS/border-left) selon les valeurs utilisées pour [`writing-mode`](/fr/docs/Web/CSS/writing-mode), [`direction`](/fr/docs/Web/CSS/direction) et [`text-orientation`](/fr/docs/Web/CSS/text-orientation). + +On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : [`border-block-start`](/fr/docs/Web/CSS/border-block-start), [`border-block-end`](/fr/docs/Web/CSS/border-block-end), [`border-inline-end`](/fr/docs/Web/CSS/border-inline-end). + ### Valeurs -Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre : +Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre : - `<'border-width'>` - - : La largeur de la bordure, voir {{cssxref("border-width")}}. + - : La largeur de la bordure, voir [`border-width`](/fr/docs/Web/CSS/border-width). - `<'border-style'>` - - : Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}. + - : Le style utilisé pour la ligne de la bordure sur ce côté, voir [`border-style`](/fr/docs/Web/CSS/border-style). - `<'color'>` - - : La couleur utilisé pour la bordure sur ce côté, voir {{cssxref("color")}}. + - : La couleur utilisée pour la bordure sur ce côté, voir [`color`](/fr/docs/Web/CSS/color). -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<div> + <p class="exemple">Texte d'exemple</p> +</div> +``` + ### CSS ```css @@ -63,37 +80,19 @@ div { } ``` -### HTML - -```html -<div> - <p class="exemple">Texte d'exemple</p> -</div> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 140, 140)}} +{{EmbedLiveSample('', 140, 140)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- | -| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-inline-start")}} +{{Compat}} ## Voir aussi -- Les propriétés physiques correspondantes : - - - {{cssxref("border-top")}}, - - {{cssxref("border-right")}}, - - {{cssxref("border-bottom")}}, - - {{cssxref("border-left")}} - -- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} +- Les propriétés physiques correspondantes : [`border-top`](/fr/docs/Web/CSS/border-top), [`border-right`](/fr/docs/Web/CSS/border-right), [`border-bottom`](/fr/docs/Web/CSS/border-bottom), [`border-left`](/fr/docs/Web/CSS/border-left) +- [`writing-mode`](/fr/docs/Web/CSS/writing-mode), [`direction`](/fr/docs/Web/CSS/direction), [`text-orientation`](/fr/docs/Web/CSS/text-orientation) diff --git a/files/fr/web/css/border-inline-style/index.md b/files/fr/web/css/border-inline-style/index.md index ec602400db..06fe86d048 100644 --- a/files/fr/web/css/border-inline-style/index.md +++ b/files/fr/web/css/border-inline-style/index.md @@ -1,33 +1,31 @@ --- title: border-inline-style slug: Web/CSS/border-inline-style -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference translation_of: Web/CSS/border-inline-style +browser-compat: css.properties.border-inline-style --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété** `border-inline-style`** permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-style`** permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à [`border-top-style`](/fr/docs/Web/CSS/border-top-style) et [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style) ou à [`border-left-style`](/fr/docs/Web/CSS/border-left-style) et [`border-right-style`](/fr/docs/Web/CSS/border-right-style) selon les valeurs des propriétés [`writing-mode`](/fr/docs/Web/CSS/writing-mode), [`direction`](/fr/docs/Web/CSS/direction) et [`text-orientation`](/fr/docs/Web/CSS/text-orientation). + +{{EmbedInteractiveExample("pages/css/border-inline-style.html")}} + +Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété [`border-block-style`](/fr/docs/Web/CSS/border-block-style) qui définit [`border-block-start-style`](/fr/docs/Web/CSS/border-block-start-style) et [`border-block-end-style`](/fr/docs/Web/CSS/border-block-end-style). + +## Syntaxe ```css /* Valeurs de type <'border-style'> */ border-inline-style: dashed; border-inline-style: dotted; +border-inline-style: revert; border-inline-style: groove; ``` -Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-block-style")}} qui définit {{cssxref("border-block-start-style")}} et {{cssxref("border-block-end-style")}}. - -## Syntaxe - ### Valeur - `<'border-style'>` - - : Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}. + - : Le style de la ligne pour la bordure. Voir [`border-style`](/fr/docs/Web/CSS/border-style). ### Syntaxe formelle @@ -35,6 +33,14 @@ Pour les autres côtés, la bordure peut être mise en forme grâce à la propri ## Exemples +### HTML + +```html +<div> + <p class="texteExemple">Texte exemple</p> +</div> +``` + ### CSS ```css @@ -51,37 +57,21 @@ div { } ``` -### HTML - -```html -<div> - <p class="texteExemple">Texte exemple</p> -</div> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 140, 140)}} +{{EmbedLiveSample('', 140, 140)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- | -| {{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. | +{{Specifications}} {{cssinfo}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-inline-style")}} +{{Compat}} ## Voir aussi -- Les propriétés physiques qui correspondent à cette propriété logique : - - - {{cssxref("border-top-style")}}, - - {{cssxref("border-right-style")}}, - - {{cssxref("border-bottom-style")}}, - - {{cssxref("border-left-style")}}. - -- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} +- Les propriétés physiques qui correspondent à cette propriété logique : [`border-top-style`](/fr/docs/Web/CSS/border-top-style), [`border-right-style`](/fr/docs/Web/CSS/border-right-style), [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style), [`border-left-style`](/fr/docs/Web/CSS/border-left-style). +- [`writing-mode`](/fr/docs/Web/CSS/writing-mode), [`direction`](/fr/docs/Web/CSS/direction), [`text-orientation`](/fr/docs/Web/CSS/text-orientation) diff --git a/files/fr/web/css/border-left-style/index.md b/files/fr/web/css/border-left-style/index.md index 1f09e7474f..06b3b17f5d 100644 --- a/files/fr/web/css/border-left-style/index.md +++ b/files/fr/web/css/border-left-style/index.md @@ -1,15 +1,12 @@ --- title: border-left-style slug: Web/CSS/border-left-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-left-style +browser-compat: css.properties.border-left-style --- {{CSSRef}} -La propriété** `border-left-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte. +La propriété **`border-left-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte. {{EmbedInteractiveExample("pages/css/border-left-style.html")}} @@ -33,142 +30,21 @@ border-left-style: outset; /* Valeurs globales */ border-left-style: inherit; border-left-style: initial; +border-left-style: revert; border-left-style: unset; ``` -### Valeurs - -- `<br-style>` - - - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes : - - <table class="standard-table"> - <tbody> - <tr> - <td><code>none</code></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> - 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> - 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> - 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>Affiche une ligne droite continue.</td> - </tr> - <tr> - <td><code>double</code></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> - 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> - 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> - 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> - <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> - </tbody> - </table> - -### Syntaxe formelle +La propriété `border-left-style` se définit avec l'un des mots-clés utilisés par la propriété [`border-style`](/fr/docs/Web/CSS/border-style). -{{csssyntax}} +## Définition formelle -## Exemples +{{CSSInfo}} -### CSS +## Syntaxe formelle -```css -/* On applique un style sur le tableau */ -table { - border-width: 2px; - background-color: #52E385; -} -tr, td { - padding: 3px; -} +{{csssyntax}} -/* Des exemples pour border-left-style */ -.b1 {border-left-style:none;} -.b2 {border-left-style:hidden;} -.b3 {border-left-style:dotted;} -.b4 {border-left-style:dashed;} -.b5 {border-left-style:solid;} -.b6 {border-left-style:double;} -.b7 {border-left-style:groove;} -.b8 {border-left-style:ridge;} -.b9 {border-left-style:inset;} -.b10 {border-left-style:outset;} -``` +## Exemples ### HTML @@ -193,34 +69,45 @@ tr, td { </table> ``` +### CSS + +```css +/* On applique un style sur le tableau */ +table { + border-width: 2px; + background-color: #52E385; +} +tr, td { + padding: 3px; +} + +/* Des exemples pour border-left-style */ +.b1 {border-left-style: none;} +.b2 {border-left-style: hidden;} +.b3 {border-left-style: dotted;} +.b4 {border-left-style: dashed;} +.b5 {border-left-style: solid;} +.b6 {border-left-style: double;} +.b7 {border-left-style: groove;} +.b8 {border-left-style: ridge;} +.b9 {border-left-style: inset;} +.b10 {border-left-style: outset;} +``` + ### Résultat -{{EmbedLiveSample('Exemples', 300, 200)}} +{{EmbedLiveSample('', 300, 200)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}} | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. | -| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}} | {{Spec2('CSS2.1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-left-style")}} +{{Compat}} ## Voir aussi -- Les autres propriétés liées au style des bordures : - - - {{cssxref("border-right-style")}} - - {{cssxref("border-top-style")}} - - {{cssxref("border-bottom-style")}} - - {{cssxref("border-style")}}. - -- Les autres propriétés liées à la bordure gauche : +- Les autres propriétés liées au style des bordures : [`border-right-style`](/fr/docs/Web/CSS/border-right-style), [`border-top-style`](/fr/docs/Web/CSS/border-top-style), [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style), [`border-style`](/fr/docs/Web/CSS/border-style). - - {{cssxref("border-left")}} - - {{cssxref("border-left-color")}} - - {{cssxref("border-left-width")}}. +- Les autres propriétés liées à la bordure gauche : [`border-left`](/fr/docs/Web/CSS/border-left), [`border-left-color`](/fr/docs/Web/CSS/border-left-color), [`border-left-width`](/fr/docs/Web/CSS/border-left-width). diff --git a/files/fr/web/css/border-right-style/index.md b/files/fr/web/css/border-right-style/index.md index 14e3bb98ac..3111595661 100644 --- a/files/fr/web/css/border-right-style/index.md +++ b/files/fr/web/css/border-right-style/index.md @@ -1,15 +1,12 @@ --- title: border-right-style slug: Web/CSS/border-right-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-right-style +browser-compat: css.properties.border-right-style --- {{CSSRef}} -La propriété** `border-right-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte. +La propriété **`border-right-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte. {{EmbedInteractiveExample("pages/css/border-right-style.html")}} @@ -33,114 +30,15 @@ border-right-style: outset; /* Valeurs globales */ border-right-style: inherit; border-right-style: initial; +border-right-style: revert; border-right-style: unset; ``` -### Valeurs - -- `<br-style>` - - - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté droit. Il peut prendre l'une des valeurs suivantes : - - <table class="standard-table"> - <tbody> - <tr> - <td><code>none</code></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> - 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> - 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> - 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>Affiche une ligne droite continue.</td> - </tr> - <tr> - <td><code>double</code></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> - 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> - 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> - 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> - <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> - </tbody> - </table> - -- `inherit` - - : Ce mot-clé représente le style de la bordure utilisé pour l'élément parent. +La propriété `border-right-style` se définit avec l'un des mots-clés utilisés par la propriété [`border-style`](/fr/docs/Web/CSS/border-style). + +## Définition formelle + +{{CSSInfo}} ### Syntaxe formelle @@ -148,31 +46,6 @@ border-right-style: unset; ## Exemples -### CSS - -```css -/* On applique un style sur le tableau */ -table { - border-width: 2px; - background-color: #52E385; -} -tr, td { - padding: 3px; -} - -/* Des exemples pour border-right-style */ -.b1 {border-right-style:none;} -.b2 {border-right-style:hidden;} -.b3 {border-right-style:dotted;} -.b4 {border-right-style:dashed;} -.b5 {border-right-style:solid;} -.b6 {border-right-style:double;} -.b7 {border-right-style:groove;} -.b8 {border-right-style:ridge;} -.b9 {border-right-style:inset;} -.b10 {border-right-style:outset;} -``` - ### HTML ```html @@ -196,34 +69,45 @@ tr, td { </table> ``` +### CSS + +```css +/* On applique un style sur le tableau */ +table { + border-width: 2px; + background-color: #52E385; +} +tr, td { + padding: 3px; +} + +/* Des exemples pour border-right-style */ +.b1 {border-right-style: none;} +.b2 {border-right-style: hidden;} +.b3 {border-right-style: dotted;} +.b4 {border-right-style: dashed;} +.b5 {border-right-style: solid;} +.b6 {border-right-style: double;} +.b7 {border-right-style: groove;} +.b8 {border-right-style: ridge;} +.b9 {border-right-style: inset;} +.b10 {border-right-style: outset;} +``` + ### Résultat -{{EmbedLiveSample('Exemples', 300, 200)}} +{{EmbedLiveSample('')}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}} | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. | -| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}} | {{Spec2('CSS2.1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-right-style")}} +{{Compat}} ## Voir aussi -- Les autres propriétés liées au style des bordures : - - - {{cssxref("border-left-style")}} - - {{cssxref("border-top-style")}} - - {{cssxref("border-bottom-style")}} - - {{cssxref("border-style")}}. - -- Les autres propriétés liées à la bordure droite : +- Les autres propriétés liées au style des bordures : [`border-left-style`](/fr/docs/Web/CSS/border-left-style), [`border-top-style`](/fr/docs/Web/CSS/border-top-style), [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style), [`border-style`](/fr/docs/Web/CSS/border-style). - - {{cssxref("border-right")}} - - {{cssxref("border-right-color")}} - - {{cssxref("border-right-width")}}. +- Les autres propriétés liées à la bordure droite : [`border-right`](/fr/docs/Web/CSS/border-right), [`border-right-color`](/fr/docs/Web/CSS/border-right-color), [`border-right-width`](/fr/docs/Web/CSS/border-right-width). diff --git a/files/fr/web/css/border-top-style/index.md b/files/fr/web/css/border-top-style/index.md index e95aca2f87..4b04436042 100644 --- a/files/fr/web/css/border-top-style/index.md +++ b/files/fr/web/css/border-top-style/index.md @@ -1,15 +1,12 @@ --- title: border-top-style slug: Web/CSS/border-top-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-top-style +browser-compat: css.properties.border-top-style --- {{CSSRef}} -La propriété** `border-top-style`** définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte. +La propriété **`border-top-style`** définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte. {{EmbedInteractiveExample("pages/css/border-top-style.html")}} @@ -32,146 +29,22 @@ border-top-style: outset; /* Valeurs globales */ border-top-style: inherit; -border-top-style: inherit; -border-top-style: inherit; +border-top-style: initial; +border-top-style: revert; +border-top-style: unset; ``` -### Valeurs - -- `<br-style>` - - - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté haut. Il peut prendre l'une des valeurs suivantes : - - <table class="standard-table"> - <tbody> - <tr> - <td><code>none</code></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> - 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> - 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> - 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>Affiche une ligne droite continue.</td> - </tr> - <tr> - <td><code>double</code></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> - 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> - 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> - 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> - <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> - </tbody> - </table> - -- `inherit` - - : Ce mot-clé représente le style de la bordure utilisé pour l'élément parent. - -### Syntaxe formelle +La propriété `border-top-style` se définit avec l'un des mots-clés utilisés par la propriété [`border-style`](/fr/docs/Web/CSS/border-style). -{{csssyntax}} +## Définition formelle -## Exemples +{{CSSInfo}} -### CSS +## Syntaxe formelle -```css -/* On applique un style sur le tableau */ -table { - border-width: 2px; - background-color: #52E385; -} -tr, td { - padding: 3px; -} +{{csssyntax}} -/* Des exemples pour border-top-style */ -.b1 {border-top-style:none;} -.b2 {border-top-style:hidden;} -.b3 {border-top-style:dotted;} -.b4 {border-top-style:dashed;} -.b5 {border-top-style:solid;} -.b6 {border-top-style:double;} -.b7 {border-top-style:groove;} -.b8 {border-top-style:ridge;} -.b9 {border-top-style:inset;} -.b10 {border-top-style:outset;} -``` +## Exemples ### HTML @@ -196,34 +69,45 @@ tr, td { </table> ``` +### CSS + +```css +/* On applique un style sur le tableau */ +table { + border-width: 2px; + background-color: #52E385; +} +tr, td { + padding: 3px; +} + +/* Des exemples pour border-top-style */ +.b1 {border-top-style: none;} +.b2 {border-top-style: hidden;} +.b3 {border-top-style: dotted;} +.b4 {border-top-style: dashed;} +.b5 {border-top-style: solid;} +.b6 {border-top-style: double;} +.b7 {border-top-style: groove;} +.b8 {border-top-style: ridge;} +.b9 {border-top-style: inset;} +.b10 {border-top-style: outset;} +``` + ### Résultat -{{EmbedLiveSample('Exemples', 300, 200)}} +{{EmbedLiveSample('', 300, 200)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}} | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. | -| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}} | {{Spec2('CSS2.1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-top-style")}} +{{Compat}} ## Voir aussi -- Les autres propriétés liées au style des bordures : - - - {{cssxref("border-left-style")}} - - {{cssxref("border-right-style")}} - - {{cssxref("border-bottom-style")}} - - {{cssxref("border-style")}}. - -- Les autres propriétés liées à la bordure haute : +- Les autres propriétés liées au style des bordures : [`border-left-style`](/fr/docs/Web/CSS/border-left-style), [`border-right-style`](/fr/docs/Web/CSS/border-right-style), [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style), [`border-style`](/fr/docs/Web/CSS/border-style). - - {{cssxref("border-top")}} - - {{cssxref("border-top-color")}} - - {{cssxref("border-top-width")}}. +- Les autres propriétés liées à la bordure haute : [`border-top`](/fr/docs/Web/CSS/border-top), [`border-top-color`](/fr/docs/Web/CSS/border-top-color), [`border-top-width`](/fr/docs/Web/CSS/border-top-width).
\ No newline at end of file diff --git a/files/fr/web/css/break-before/index.md b/files/fr/web/css/break-before/index.md index b757c6a076..f07f48edce 100644 --- a/files/fr/web/css/break-before/index.md +++ b/files/fr/web/css/break-before/index.md @@ -1,15 +1,12 @@ --- title: break-before slug: Web/CSS/break-before -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/break-before +browser-compat: css.properties.break-before --- {{CSSRef}} -La propriété** `break-before`** décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée. +La propriété **`break-before`** décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée. ```css /* Valeurs de rupture génériques */ @@ -20,7 +17,7 @@ break-before: all; /* Valeurs de rupture pour les pages */ break-before: avoid-page; -break-before: page: +break-before: page; break-before: left; break-before: right; break-before: recto; @@ -37,17 +34,18 @@ break-before: region; /* Valeurs globales */ break-before: inherit; break-before: initial; +break-before: revert; break-before: unset; ``` -Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de `break-inside` de l'élément englobant. +Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de [`break-after`](/fr/docs/Web/CSS/break-after) de l'élément précédent, la valeur de `break-before` de l'élément suivant et la valeur de [`break-inside`](/fr/docs/Web/CSS/break-inside) de l'élément englobant. -Pour déterminer si on a une rupture, on applique les règles suivantes : +Pour déterminer si on a une rupture, on applique les règles suivantes : -1. Si l'une des trois valeurs correspond à une rupture forcée (`always`, `left`, `right`, `page`, `column` ou `region`), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}). -2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (`avoid`, `avoid-page`, `avoid-region`, `avoid-column`), aucune rupture ne sera appliquée à cet endroit. +1. Si l'une des trois valeurs correspond à une rupture forcée (`always`, `left`, `right`, `page`, `column` ou `region`), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, `break-before` l'emporte sur `break-after`, qui l'emporte sur `break-inside`). +2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (`avoid`, `avoid-page`, `avoid-region` ou `avoid-column`), aucune rupture ne sera appliquée à cet endroit. -Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures. +Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures. ## Syntaxe @@ -59,12 +57,12 @@ La propriété `break-before` se paramètre avec un des mots-clés définis ci-a - `auto` - : Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte. -- `all`{{experimental_inline}} - - : Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page. -- `always`{{experimental_inline}} - - : Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page. - `avoid` - : Empêche toute rupture (de page, de colonne ou de région) avant la boîte. +- `always` {{experimental_inline}} + - : Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page. +- `all` {{experimental_inline}} + - : Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page. #### Valeurs de rupture liées aux médias paginés @@ -73,12 +71,12 @@ La propriété `break-before` se paramètre avec un des mots-clés définis ci-a - `page` - : Force un saut de page avant la boîte de l'élément - `left` - - : Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche. + - : Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page gauche. +- `right` + - : Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page droite. - `recto` {{experimental_inline}} - : Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche). -- `right` - - : Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite. -- `verso`{{experimental_inline}} +- `verso` {{experimental_inline}} - : Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche). #### Valeurs de ruptures relatives aux dispositions en colonnes @@ -90,18 +88,14 @@ La propriété `break-before` se paramètre avec un des mots-clés définis ci-a #### Valeurs de ruptures relatives aux régions -- `region`{{experimental_inline}} - - : Force une rupture de région avant la boîte de l'élément. -- `avoid-region`{{experimental_inline}} +- `avoid-region` {{experimental_inline}} - : Empêche toute rupture de région avant la boîte de l'élément. - -### Syntaxe formelle - -{{csssyntax}} +- `region` {{experimental_inline}} + - : Force une rupture de région avant la boîte de l'élément. ## Alias/synonymes pour les ruptures de page -Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de `break-before`. Cela permet aux sites utilisant `page-break-before` de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias : +Pour des raisons de compatibilité, la propriété historique [`page-break-before`](/fr/docs/Web/CSS/page-break-before) devrait être considérée par les navigateurs comme un synonyme de `break-before`. Cela permet aux sites utilisant `page-break-before` de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias : | `page-break-before` | `break-before` | | ------------------- | -------------- | @@ -111,65 +105,89 @@ Pour des raisons de compatibilité, la propriété historique {{cssxref("page-br | `avoid` | `avoid` | | `always` | `page` | -> **Note :** La valeur `always` pour `page-break-before` 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 `page` et non `always`. +> **Note :** La valeur `always` pour `page-break-*` 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 `page` et non `always`. + +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle + +{{csssyntax}} ## Exemples +Dans l'exemple qui suit, on a un conteneur qui contient un élément `<h1>` qui s'étend sur l'ensemble des colonnes (grâce à `column-span: all`) et un ensemble d'éléments `<h2>` et de paragraphes disposés sur les différentes colonnes avec `column-width: 200px`. + +Par défaut, les sous-titres et les paragraphes auraient été disposés de façon chaotique en raison de l'emplacement non-uniforme des titres. Cependant, en utilisant `break-before: column` sur les éléments `<h2>`, on force une rupture de colonne avant chaque sous-titre et on obtient ainsi leur positionnement en début de colonne (pour les navigateurs compatibles). + +### HTML + +```html +<article> + <h1>Titre principal</h1> + + <h2>Sous-titre</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p> + + <h2>Sous-titre</h2> + + <p>Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p> + + <h2>Sous-titre</h2> + + <p>Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis. Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat egestas tellus. + + <h2>Sous-titre</h2> + + <p>In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.</p> +</article> +``` + ### CSS ```css -.exemple { - -webkit-column-count: 4; - -moz-column-count: 4; - column-count: 4; +html { + font-family: Helvetica, Arial, sans-serif; } -p { - break-before: avoid-column; - /* Pour Firefox : */ - page-break-before: avoid; - /* Pour WebKit : */ - -webkit-column-break-before: avoid; +h1 { + font-size: 3rem; + letter-spacing: 2px; + column-span: all; } -``` -### HTML +h2 { + font-size: 1.2rem; + color: red; + letter-spacing: 1px; + break-before: column; +} -```html -<div class="exemple"> - <p>« Mais alors, » pensa Alice, « ne serai-je donc - jamais plus vieille que je ne le suis maintenant ? - D’un côté cela aura ses avantages, ne jamais être - une vieille femme. Mais alors avoir toujours des - leçons à apprendre ! Oh, je n’aimerais pas cela du - tout. »</p> - <p>« Oh ! Alice, petite folle, » se répondit-elle. - « Comment pourriez-vous apprendre des leçons ici ? - Il y a à peine de la place pour vous, et il n’y en - a pas du tout pour vos livres de leçons. »</p> -</div> +p { + line-height: 1.5; +} + +article { + column-width: 200px; + gap: 20px; +} ``` ### Résultat -{{EmbedLiveSample("Exemples","400","300")}} +{{EmbedLiveSample('', '100%', '600')}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}} | {{Spec2('CSS3 Fragmentation')}} | Ajouts des mots-clés `recto` et `verso`. Le type de média pour cette propriété est passé de `paged` à `visual`. L'algorithme de rupture est précisé afin de gérer les différents types de rupture. | -| {{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}} | {{Spec2('CSS3 Regions')}} | La spécification étend la propriété pour gérer les sauts de région. Les mots-clés `avoid-region` et `region` sont ajoutés. | -| {{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne. | - -{{cssinfo}} +{{Specifications("css.properties.break-before.multicol_context")}} ## Compatibilité des navigateurs -### Prise en charge pour une disposition multi-colonnes - -{{Compat("css.properties.break-before.multicol_context")}} +{{Compat}} -### Prise en charge pour les média paginés +## Voir aussi -{{Compat("css.properties.break-before.paged_context")}} +- [Disposition sur plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Breaking Boxes With CSS Fragmentation](https://www.smashingmagazine.com/2019/02/css-fragmentation/) diff --git a/files/fr/web/css/column-rule-color/index.md b/files/fr/web/css/column-rule-color/index.md index 72f051608e..df599f5fc7 100644 --- a/files/fr/web/css/column-rule-color/index.md +++ b/files/fr/web/css/column-rule-color/index.md @@ -1,15 +1,12 @@ --- title: column-rule-color slug: Web/CSS/column-rule-color -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/column-rule-color +browser-compat: css.properties.column-rule-color --- {{CSSRef}} -La propriété** `column-rule-color`** permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes. +La propriété **`column-rule-color`** permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes. {{EmbedInteractiveExample("pages/css/column-rule-color.html")}} @@ -26,68 +23,66 @@ column-rule-color: hsla(0, 100%, 50%, 0.6); /* Valeurs globales */ column-rule-color: inherit; column-rule-color: initial; +column-rule-color: revert; column-rule-color: unset; ``` +La propriété `column-rule-color` se définit grâce à une valeur de type `<color>`. + ### Valeurs -- `<color>` - - : Une valeur de couleur (type {{cssxref("<color>")}}) qui indique la couleur du trait entre les colonnes. +- [`<color>`](/fr/docs/Web/CSS/color_value) + - : Une valeur de couleur qui indique la couleur du trait entre les colonnes. + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<p>« Mais alors, » pensa Alice, « ne serai-je donc + jamais plus vieille que je ne le suis maintenant ? + D'un côté cela aura ses avantages, ne jamais être + une vieille femme. Mais alors avoir toujours des + leçons à apprendre ! Oh, je n'aimerais pas cela du + tout. » + « Oh ! Alice, petite folle, » se répondit-elle. + « Comment pourriez-vous apprendre des leçons ici ? + Il y a à peine de la place pour vous, et il n'y en + a pas du tout pour vos livres de leçons. »</p> +``` + ### CSS ```css -.exemple { - border: 10px solid #000000; - - columns:3; - column-rule-width: thick; - column-rule-color: blue; +p { + column-count: 3; column-rule-style: solid; + column-rule-color: blue; } ``` -### HTML - -```html -<p class=exemple> - « Mais alors, » pensa Alice, « ne serai-je donc - jamais plus vieille que je ne le suis maintenant ? - D’un côté cela aura ses avantages, ne jamais être - une vieille femme. Mais alors avoir toujours des - leçons à apprendre ! Oh, je n’aimerais pas cela du - tout. » - « Oh ! Alice, petite folle, » se répondit-elle. - « Comment pourriez-vous apprendre des leçons ici ? - Il y a à peine de la place pour vous, et il n’y en - a pas du tout pour vos livres de leçons. » -</p> -``` - ### Résultat -{{EmbedLiveSample("Exemples")}} +{{EmbedLiveSample("","100%","200")}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}} | {{Spec2('CSS3 Multicol')}} | | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.column-rule-color")}} +{{Compat}} ## Voir aussi -- Le type de donnée {{cssxref("<color>")}} -- 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")}} et {{cssxref("caret-color")}} -- [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) +- Le type de donnée [`<color>`](/fr/docs/Web/CSS/color_value) +- Les autres propriétés relatives aux couleurs : [`color`](/fr/docs/Web/CSS/color), [`background-color`](/fr/docs/Web/CSS/background-color), [`border-color`](/fr/docs/Web/CSS/border-color), [`outline-color`](/fr/docs/Web/CSS/outline-color), [`text-decoration-color`](/fr/docs/Web/CSS/text-decoration-color), [`text-emphasis-color`](/fr/docs/Web/CSS/text-emphasis-color), [`text-shadow`](/fr/docs/Web/CSS/color) et [`caret-color`](/fr/docs/Web/CSS/caret-color) +- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) diff --git a/files/fr/web/css/font-style/index.md b/files/fr/web/css/font-style/index.md index 4978704f10..3aaf62c078 100644 --- a/files/fr/web/css/font-style/index.md +++ b/files/fr/web/css/font-style/index.md @@ -1,19 +1,16 @@ --- title: font-style slug: Web/CSS/font-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/font-style +browser-compat: css.properties.font-style --- {{CSSRef}} -La propriété** `font-style`** permet de sélectionner une fonte italique (`italic`) ou (`oblique`) parmi celles listées par {{cssxref("font-family")}}. +La propriété **`font-style`** permet de sélectionner une fonte italique (`italic`) ou oblique (`oblique`) parmi celles listées par [`font-family`](/fr/docs/Web/CSS/font-family). {{EmbedInteractiveExample("pages/css/font-style.html")}} -La forme **italique** est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme **oblique** 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")}}. +La forme **italique** est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme **oblique** 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 absentes (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é [`font-synthesis`](/fr/docs/Web/CSS/font-synthesis). ## Syntaxe @@ -28,124 +25,54 @@ font-style: oblique 10deg; /* Valeurs globales */ font-style: inherit; font-style: initial; +font-style: revert; font-style: unset; ``` -La propriété `font-style` s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est `oblique`, il peut également être suivi de l' angle. +La propriété `font-style` s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est `oblique`, il peut également être suivi de l'angle. ### Valeurs - `normal` - - : Sélectionne une police qualifiée de `normal` parmi celles de {{cssxref("font-family")}}. + - : Sélectionne une police qualifiée de `normal` parmi celles de [`font-family`](/fr/docs/Web/CSS/font-family). - `italic` - - : Sélectionne une police qualifiée d'`italic`, s'il n'y a pas de version italique, une version `oblique` sera sélectionnée à la place. + - : Sélectionne une police qualifiée d'`italic`. S'il n'y a pas de version italique, une version `oblique` sera sélectionnée à la place. Si aucune version n'est disponible, le style de police est synthétisé. - `oblique` - - : Sélectionne une police qualifiée d'`oblique`, s'il n'y a pas de version oblique, une version `italic` sera sélectionnée à la place. -- `oblique` `<angle>` - - : Sélectionne une police qualifiée d'`oblique` et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponible pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur _synthétisera_ une police penchée en tournant les caractères d'une fonte normale. - L'angle indiqué (cf. {{cssxref("<angle>")}}) doit être compris entre `-90deg` et `90deg`. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera `14deg`. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne. + - : Sélectionne une police qualifiée d'`oblique`. S'il n'y a pas de version oblique, une version `italic` sera sélectionnée à la place. Si aucune version n'est disponible, le style de police est synthétisé. +- `oblique` [`<angle>`](/fr/docs/Web/CSS/angle) + - : Sélectionne une police qualifiée d'`oblique` et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponibles pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur _synthétisera_ une police penchée en tournant les caractères d'une fonte normale. + L'angle indiqué (cf. [`<angle>`](/fr/docs/Web/CSS/angle)) doit être compris entre `-90deg` et `90deg`. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera `14deg`. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne. -### Syntaxe formelle - -{{csssyntax}} - -### Variable fonts - -Les polices variables permettent d'obtenir un contrôle fin sur la pente appliqué à la fonte. Pour cela, on pourra utiliser une police variable et `font-style` avec le mot-clé `oblique` suivi d'une valeur d'angle. - -Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `"slnt"` qui est utilisé afin d'implémenter les variations de pente. C'est l'axe `"ital"` qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir {{cssxref("font-variation-settings")}}. - -Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe _CSS Fonts Level 4_ qui permet d'utiliser `font-style: oblique` suivi d'un angle. - -{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}} - -#### HTML - -```html -<header> - <input type="range" id="slant" name="slant" min="-90" max="90" /> - <label for="slant">Slant</label> -</header> -<div class="container"> - <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> -</div> -``` - -#### CSS + En général, si on utilise un angle de 14 degrés ou plus, des angles plus grands sont préférables ; sinon, des angles plus petits sont préférables (voir [la section _Font Matching Algorithm_](https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm) dans la spécification pour l'algorithme exact). -```css -/* -AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar) -and is used here under the terms of its license: -https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt -*/ - -@font-face { - src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf'); - font-family:'AmstelvarAlpha'; - font-style: normal; -} +### Polices variables -label { - font: 1rem monospace; -} +Les polices variables permettent d'obtenir un contrôle fin sur la pente appliquée à la fonte. Pour cela, on pourra utiliser une police variable et `font-style` avec le mot-clé `oblique` suivi d'une valeur d'angle. -.container { - max-height: 150px; - overflow: scroll; -} +Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `"slnt"` qui est utilisé afin d'implémenter les variations de pente. C'est l'axe `"ital"` qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir [`font-variation-settings`](/fr/docs/Web/CSS/font-variation-settings). -.sample { - font: 2rem 'AmstelvarAlpha', sans-serif; -} -``` +> **Note :** Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe _CSS Fonts Level 4_ qui permet d'utiliser `font-style: oblique` suivi d'un angle. Le code de démarrage utilise `font-style: oblique 23deg;` — modifiez la valeur `<angle>` pour changer la pente du texte. -```css hidden -html, body { - max-height: 100vh; - max-width: 100vw; - overflow: hidden; -} - -body { - display: flex; - flex-direction: column; -} +{{EmbedGHLiveSample("css-examples/variable-fonts/oblique.html", '100%', 860)}} -header { - margin-bottom: 1.5rem; -} - -.container { - flex-grow: 1; -} +### Définition formelle -.container > p { - margin-top: 0; - margin-bottom: 0; -} -``` +{{cssinfo}} -#### JavaScript +### Syntaxe formelle -```js -let slantLabel = document.querySelector('label[for="slant"]'); -let slantInput = document.querySelector('#slant'); -let sampleText = document.querySelector('.sample'); +{{csssyntax}} -function update() { - let slant = `oblique ${slantInput.value}deg`; - slantLabel.textContent = `font-style: ${slant};`; - sampleText.style.fontStyle = slant; -} +## Exemples -slantInput.addEventListener('input', update); +### HTML -update(); +```html +<p class="normal">Un paragraphe normal.</p> +<p class="italic">Un paragraphe italique.</p> +<p class="oblique">Un paragraphe oblique.</p> ``` -## Exemples - ### CSS ```css @@ -162,41 +89,26 @@ update(); } ``` -### HTML - -```html -<p class="normal">Un paragraphe normale.</p> -<p class="italic">Un paragraphe italique.</p> -<p class="oblique">Un paragraphe oblique.</p> -``` - ### Résultat -{{EmbedLiveSample('Exemples')}} - -> **Note :** Toutes les polices ne disposent pas nécessairement de formes pour `oblique` et `italic`, 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 : -> ->  +{{EmbedLiveSample('')}} ## Accessibilité L'utilisation de grandes portions de textes avec `font-style: italic` peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs. - [Comprendre les règles WCAG 1.4](/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) -- [_Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/WCAG21/#visual-presentation) - -## Spécifications +- [_Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/WCAG21/#visual-presentation) -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- | -| {{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}} | {{Spec2('CSS4 Fonts')}} | Permet d'indiquer un angle après le mot-clé `oblique` | -| | | | -| {{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}} | {{Spec2('CSS3 Fonts')}} | Aucune modification. | -| {{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}} | {{Spec2('CSS2.1')}} | Aucune modification. | -| {{SpecName('CSS1', '#font-style', 'font-style')}} | {{Spec2('CSS1')}} | Définition initiale. | +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.font-style")}} +{{Compat}} + +## Voir aussi + +- [`font-weight`](/fr/docs/Web/CSS/font-weight) +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/Fundamentals)
\ No newline at end of file |