From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/scrollbar-width/index.md | 142 +++++++++++++++--------------- 1 file changed, 69 insertions(+), 73 deletions(-) (limited to 'files/fr/web/css/scrollbar-width') diff --git a/files/fr/web/css/scrollbar-width/index.md b/files/fr/web/css/scrollbar-width/index.md index c39f16f385..de52db4177 100644 --- a/files/fr/web/css/scrollbar-width/index.md +++ b/files/fr/web/css/scrollbar-width/index.md @@ -7,15 +7,16 @@ tags: - Reference translation_of: Web/CSS/scrollbar-width --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}{{SeeCompatTable}} -

La propriété scrollbar-width permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.

+La propriété **`scrollbar-width`** permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée. -

{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}

+{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}} -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scrollbar-width: auto;
 scrollbar-width: thin;
 scrollbar-width: none;
@@ -24,91 +25,86 @@ scrollbar-width: none;
 scrollbar-width: inherit;
 scrollbar-width: initial;
 scrollbar-width: unset;
-
- -

Valeurs

- -
-
<scrollbar-width>
-
Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. {{cssxref("<length>")}}) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes : - - - - - - - - - - - - - - - -
autoLa largeur par défaut, fournie par le système, pour la barre de défilement.
thinUne variante plus fine de la barre de défilement plus fine dans le cas des plateformes qui fournissent une telle option ou une barre de défilement avec une largeur moindre que la largeur par défaut du système.
noneAucune barre de défilement n'est affichée mais on peut toujours faire défiler l'élément.
- -
-

Note : Toute valeur de scrollbar-width doit être appliquée sur l'élément racine de la zone d'affichage (viewport) par les agents utilisateur.

-
- -
-

Note : L'utilisation des longueurs pour scrollbar-width est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir l'issue 1958).

-
-
-
- -

Syntaxe formelle

+``` + +### Valeurs + +- `` + + - : Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. {{cssxref("<length>")}}) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes : + + + + + + + + + + + + + + + + +
auto + La largeur par défaut, fournie par le système, pour la barre de + défilement. +
thin + Une variante plus fine de la barre de défilement plus fine dans le cas + des plateformes qui fournissent une telle option ou une barre de + défilement avec une largeur moindre que la largeur par défaut du + système. +
none + Aucune barre de défilement n'est affichée mais on peut toujours faire + défiler l'élément. +
+ + > **Note :** Toute valeur de `scrollbar-width` doit être appliquée sur l'élément racine de la zone d'affichage (_viewport_) par les agents utilisateur. + + > **Note :** L'utilisation des longueurs pour `scrollbar-width` est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir [l'_issue_ 1958](https://github.com/w3c/csswg-drafts/issues/1958)). + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
.scroller {
+```css
+.scroller {
   width: 300px;
   height: 100px;
   overflow-y: scroll;
   scrollbar-width: thin;
-}
+} +``` -

HTML

+### HTML -
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+```html +
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples")}}

+{{EmbedLiveSample("Exemples")}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}{{Spec2("CSS Scrollbars")}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}} | {{Spec2("CSS Scrollbars")}} | Définition initiale. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.scrollbar-width")}}

+{{Compat("css.properties.scrollbar-width")}} -

Voir aussi

+## Voir aussi - +- {{CSSxRef("-ms-overflow-style")}} +- {{CSSxRef("::-webkit-scrollbar")}} -- cgit v1.2.3-54-g00ecf