From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/appearance/index.html | 584 --------------------------------- files/fr/web/css/appearance/index.md | 584 +++++++++++++++++++++++++++++++++ 2 files changed, 584 insertions(+), 584 deletions(-) delete mode 100644 files/fr/web/css/appearance/index.html create mode 100644 files/fr/web/css/appearance/index.md (limited to 'files/fr/web/css/appearance') diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html deleted file mode 100644 index 3f709c1ac5..0000000000 --- a/files/fr/web/css/appearance/index.html +++ /dev/null @@ -1,584 +0,0 @@ ---- -title: appearance (-moz-appearance, -webkit-appearance) -slug: Web/CSS/appearance -tags: - - '-moz-appearance' - - '-webkit-appearance' - - CSS - - CSS Basic User Interface - - CSS Property - - Reference - - appearance - - recipe:css-property -translation_of: Web/CSS/appearance -browser-compat: css.properties.appearance ---- -
{{CSSRef}}
- -

La propriété -moz-appearance est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.

- -

La propriété -webkit-appearance est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.

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

Cette propriété était utilisée dans les feuilles de style XUL afin de mettre en forme des widgets utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations XBL pour les widgets livrés avec les logiciels Mozilla.

- -
-

Note : Cette propriété doit être utilisée avec beaucoup d'attention sur les sites web. Son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé none peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.

-
- -

Syntaxe

- -
/* Valeurs spécifiées par le module CSS Basic User Interface de niveau 4 */
-appearance: none;
-appearance: auto;
-appearance: menulist-button;
-appearance: textfield;
-
-/* Valeurs ayant le même effet que 'auto' */
-appearance: button;
-appearance: searchfield;
-appearance: textarea;
-appearance: push-button;
-appearance: slider-horizontal;
-appearance: checkbox;
-appearance: radio;
-appearance: square-button;
-appearance: menulist;
-appearance: listbox;
-appearance: meter;
-appearance: progress-bar;
-
-/* Liste partielle des valeurs disponibles pour Gecko */
--moz-appearance: scrollbarbutton-up;
--moz-appearance: button-bevel;
-
-/* Liste partielle des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
--webkit-appearance: media-mute-button;
--webkit-appearance: caret;
-
- -

Valeurs

- -

Mots-clés standard

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurNavigateurDescription
noneFirefox Chrome Safari EdgeAucune mise en forme particulière n'est appliquée. C'est la valeur par défaut.
autoFirefox ChromeL'agent utilisateur sélectionne la mise en forme spécifique appropriée en fonction de l'élément. Cette valeur agira comme none pour les éléments sans mise en forme spéciale.
menulist-buttonFirefox Chrome Safari EdgeL'élément est mis en forme comme un bouton qui indiquerait qu'un menu pourrait être ouvert.
textfieldFirefox Chrome Safari Edge
Les valeurs suivantes sont traitées de façon équivalente à auto:
buttonFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton.
checkboxFirefox Chrome Safari EdgeL'élément est dessiné comme une case à cocher (et n'inclut que la case à cocher).
listboxFirefox Chrome Safari Edge
menulistFirefox Chrome Safari Edge
meterChrome Safari Firefox
progress-barChrome Safari Firefox
push-buttonChrome Safari Edge
radioFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton radio (et n'inclut que la portion liée au « bouton radio »).
searchfieldFirefox Chrome Safari Edge
slider-horizontalChrome Safari Edge
square-buttonChrome Safari Edge
textareaFirefox Chrome Safari Edge
- -

Mots-clés non-standards

- -

Les valeurs suivantes sont uniquement implémentées pour l'une ou l'autre des propriétés préfixées mais pas pour la propriété standard appearance.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurNavigateurDescription
attachmentSafari
borderless-attachmentSafari
button-bevelFirefox Chrome Safari Edge
caps-lock-indicatorSafari Edge
caretFirefox Chrome Safari Edge
checkbox-containerFirefoxL'élément est dessiné comme le conteneur d'une case à cocher. Il pourra inclure un effet d'arrière-plan sur certaines plateformes. Normalement, il devrait contenir un libellé et une case à cocher.
checkbox-labelFirefox
checkmenuitemFirefox
color-wellSafariinput type=color
continuous-capacity-level-indicatorSafari
default-buttonSafari Edge
discrete-capacity-level-indicatorSafari
inner-spin-buttonFirefox Chrome Safari
image-controls-buttonSafari
list-buttonSafaridatalist
listitemFirefox Chrome Safari Edge
media-enter-fullscreen-buttonChrome Safari
media-exit-fullscreen-buttonChrome Safari
media-fullscreen-volume-sliderSafari
media-fullscreen-volume-slider-thumbSafari
media-mute-buttonChrome Safari Edge
media-play-buttonChrome Safari Edge
media-overlay-play-buttonChrome Safari
media-return-to-realtime-buttonSafari
media-rewind-buttonSafari
media-seek-back-buttonSafari Edge
media-seek-forward-buttonSafari Edge
media-toggle-closed-captions-buttonChrome Safari
media-sliderChrome Safari Edge
media-sliderthumbChrome Safari Edge
media-volume-slider-containerChrome Safari
media-volume-slider-mute-buttonSafari
media-volume-sliderChrome Safari
media-volume-sliderthumbChrome Safari
media-controls-backgroundChrome Safari
media-controls-dark-bar-backgroundSafari
media-controls-fullscreen-backgroundChrome Safari
media-controls-light-bar-backgroundSafari
media-current-time-displayChrome Safari
media-time-remaining-displayChrome Safari
menulist-textFirefox Chrome Safari Edge
menulist-textfieldFirefox Chrome Safari EdgeL'élément est mis en forme comme le champ texte d'une liste de menu (non implémenté sur Windows).
meterbarFirefoxOn utilisera meter à la place.
number-inputFirefox
progress-bar-valueChrome Safari
progressbarFirefoxCet élément est mis en forme comme une barre de progression, aussi, on utilisera progress-bar à la place.
progressbar-verticalFirefox
rangeFirefox
range-thumbFirefox
rating-level-indicatorSafari
relevancy-level-indicatorSafari
scale-horizontalFirefox
scalethumbendFirefox
scalethumb-horizontalFirefox
scalethumbstartFirefox
scalethumbtickFirefox
scalethumb-verticalFirefox
scale-verticalFirefox
scrollbarthumb-horizontalFirefox
scrollbarthumb-verticalFirefox
scrollbartrack-horizontalFirefox
scrollbartrack-verticalFirefox
searchfield-decorationSafari Edge
searchfield-results-decorationChrome Safari Edge(Fonctionne sur Chrome 51 sur Windows 7)
searchfield-results-buttonSafari Edge
searchfield-cancel-buttonChrome Safari Edge
snapshotted-plugin-overlaySafari
sheetNone
slider-verticalChrome Safari Edge
sliderthumb-horizontalChrome Safari Edge
sliderthumb-verticalChrome Safari Edge
textfield-multilineFirefoxOn utilisera textarea à la place.
-apple-pay-buttonSafariiOS et macOS uniquement. Disponible pour le Web à partir de iOS 10.1 et macOS 10.12.1
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :

- -
.exempleun {
-  appearance: toolbarbutton;
-  -moz-appearance: toolbarbutton;
-  -webkit-appearance: toolbarbutton;
-}
-
- -

Voir également cet exemple JSFiddle qui illustre comment utiliser appearance: none afin d'appliquer une mise en forme spécifique aux boutons radio et aux cases à cocher.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/appearance/index.md b/files/fr/web/css/appearance/index.md new file mode 100644 index 0000000000..3f709c1ac5 --- /dev/null +++ b/files/fr/web/css/appearance/index.md @@ -0,0 +1,584 @@ +--- +title: appearance (-moz-appearance, -webkit-appearance) +slug: Web/CSS/appearance +tags: + - '-moz-appearance' + - '-webkit-appearance' + - CSS + - CSS Basic User Interface + - CSS Property + - Reference + - appearance + - recipe:css-property +translation_of: Web/CSS/appearance +browser-compat: css.properties.appearance +--- +
{{CSSRef}}
+ +

La propriété -moz-appearance est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.

+ +

La propriété -webkit-appearance est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.

+ +
{{EmbedInteractiveExample("pages/css/appearance.html")}}
+ +

Cette propriété était utilisée dans les feuilles de style XUL afin de mettre en forme des widgets utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations XBL pour les widgets livrés avec les logiciels Mozilla.

+ +
+

Note : Cette propriété doit être utilisée avec beaucoup d'attention sur les sites web. Son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé none peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.

+
+ +

Syntaxe

+ +
/* Valeurs spécifiées par le module CSS Basic User Interface de niveau 4 */
+appearance: none;
+appearance: auto;
+appearance: menulist-button;
+appearance: textfield;
+
+/* Valeurs ayant le même effet que 'auto' */
+appearance: button;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Liste partielle des valeurs disponibles pour Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: button-bevel;
+
+/* Liste partielle des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
+-webkit-appearance: media-mute-button;
+-webkit-appearance: caret;
+
+ +

Valeurs

+ +

Mots-clés standard

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurNavigateurDescription
noneFirefox Chrome Safari EdgeAucune mise en forme particulière n'est appliquée. C'est la valeur par défaut.
autoFirefox ChromeL'agent utilisateur sélectionne la mise en forme spécifique appropriée en fonction de l'élément. Cette valeur agira comme none pour les éléments sans mise en forme spéciale.
menulist-buttonFirefox Chrome Safari EdgeL'élément est mis en forme comme un bouton qui indiquerait qu'un menu pourrait être ouvert.
textfieldFirefox Chrome Safari Edge
Les valeurs suivantes sont traitées de façon équivalente à auto:
buttonFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton.
checkboxFirefox Chrome Safari EdgeL'élément est dessiné comme une case à cocher (et n'inclut que la case à cocher).
listboxFirefox Chrome Safari Edge
menulistFirefox Chrome Safari Edge
meterChrome Safari Firefox
progress-barChrome Safari Firefox
push-buttonChrome Safari Edge
radioFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton radio (et n'inclut que la portion liée au « bouton radio »).
searchfieldFirefox Chrome Safari Edge
slider-horizontalChrome Safari Edge
square-buttonChrome Safari Edge
textareaFirefox Chrome Safari Edge
+ +

Mots-clés non-standards

+ +

Les valeurs suivantes sont uniquement implémentées pour l'une ou l'autre des propriétés préfixées mais pas pour la propriété standard appearance.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurNavigateurDescription
attachmentSafari
borderless-attachmentSafari
button-bevelFirefox Chrome Safari Edge
caps-lock-indicatorSafari Edge
caretFirefox Chrome Safari Edge
checkbox-containerFirefoxL'élément est dessiné comme le conteneur d'une case à cocher. Il pourra inclure un effet d'arrière-plan sur certaines plateformes. Normalement, il devrait contenir un libellé et une case à cocher.
checkbox-labelFirefox
checkmenuitemFirefox
color-wellSafariinput type=color
continuous-capacity-level-indicatorSafari
default-buttonSafari Edge
discrete-capacity-level-indicatorSafari
inner-spin-buttonFirefox Chrome Safari
image-controls-buttonSafari
list-buttonSafaridatalist
listitemFirefox Chrome Safari Edge
media-enter-fullscreen-buttonChrome Safari
media-exit-fullscreen-buttonChrome Safari
media-fullscreen-volume-sliderSafari
media-fullscreen-volume-slider-thumbSafari
media-mute-buttonChrome Safari Edge
media-play-buttonChrome Safari Edge
media-overlay-play-buttonChrome Safari
media-return-to-realtime-buttonSafari
media-rewind-buttonSafari
media-seek-back-buttonSafari Edge
media-seek-forward-buttonSafari Edge
media-toggle-closed-captions-buttonChrome Safari
media-sliderChrome Safari Edge
media-sliderthumbChrome Safari Edge
media-volume-slider-containerChrome Safari
media-volume-slider-mute-buttonSafari
media-volume-sliderChrome Safari
media-volume-sliderthumbChrome Safari
media-controls-backgroundChrome Safari
media-controls-dark-bar-backgroundSafari
media-controls-fullscreen-backgroundChrome Safari
media-controls-light-bar-backgroundSafari
media-current-time-displayChrome Safari
media-time-remaining-displayChrome Safari
menulist-textFirefox Chrome Safari Edge
menulist-textfieldFirefox Chrome Safari EdgeL'élément est mis en forme comme le champ texte d'une liste de menu (non implémenté sur Windows).
meterbarFirefoxOn utilisera meter à la place.
number-inputFirefox
progress-bar-valueChrome Safari
progressbarFirefoxCet élément est mis en forme comme une barre de progression, aussi, on utilisera progress-bar à la place.
progressbar-verticalFirefox
rangeFirefox
range-thumbFirefox
rating-level-indicatorSafari
relevancy-level-indicatorSafari
scale-horizontalFirefox
scalethumbendFirefox
scalethumb-horizontalFirefox
scalethumbstartFirefox
scalethumbtickFirefox
scalethumb-verticalFirefox
scale-verticalFirefox
scrollbarthumb-horizontalFirefox
scrollbarthumb-verticalFirefox
scrollbartrack-horizontalFirefox
scrollbartrack-verticalFirefox
searchfield-decorationSafari Edge
searchfield-results-decorationChrome Safari Edge(Fonctionne sur Chrome 51 sur Windows 7)
searchfield-results-buttonSafari Edge
searchfield-cancel-buttonChrome Safari Edge
snapshotted-plugin-overlaySafari
sheetNone
slider-verticalChrome Safari Edge
sliderthumb-horizontalChrome Safari Edge
sliderthumb-verticalChrome Safari Edge
textfield-multilineFirefoxOn utilisera textarea à la place.
-apple-pay-buttonSafariiOS et macOS uniquement. Disponible pour le Web à partir de iOS 10.1 et macOS 10.12.1
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :

+ +
.exempleun {
+  appearance: toolbarbutton;
+  -moz-appearance: toolbarbutton;
+  -webkit-appearance: toolbarbutton;
+}
+
+ +

Voir également cet exemple JSFiddle qui illustre comment utiliser appearance: none afin d'appliquer une mise en forme spécifique aux boutons radio et aux cases à cocher.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf