Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
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.
Cette propriété est souvent 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é ne doit pas être utilisée sur les sites Web. Non seulement, cette propriété n'est pas standard mais son comportement varie d'un navigateur à l'autre. 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.
Valeur initiale | none (cette valeur est surchargée par le CSS de l'agent utilisateur) |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Animation type | discrete |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Liste partielle des valeurs disponibles dans Gecko */ -moz-appearance: none; -moz-appearance: button; -moz-appearance: checkbox; -moz-appearance: scrollbarbutton-up; /* Liste partielle des valeurs disponibles dans WebKit/Blink */ -webkit-appearance: none; -webkit-appearance: button; -webkit-appearance: checkbox; -webkit-appearance: scrollbarbutton-up;
Valeurs
<appearance>
est l’une des valeurs suivantes :
Value | Demo | Description | ||||
---|---|---|---|---|---|---|
none |
Aucun style spécifique n'est appliqué (défaut). À noter les bugs bug 649849 et bug 605985. | |||||
button |
L'élément est rendu comme un bouton. | |||||
button-arrow-down |
||||||
button-arrow-next |
||||||
button-arrow-previous |
||||||
button-arrow-up |
||||||
button-bevel |
||||||
button-focus |
||||||
caret |
||||||
checkbox |
L'élément est rendu comme une case à cocher, incluant uniquement la partie réelle de la case à cocher. | |||||
checkbox-container |
L'élément est rendu comme un contenant pour une case à cocher, qui peut inclure un effet d'illumination de l'arrière-plan sous certaines plate-formes. L'élément devrait être composé d'une étiquette et d'une case à cocher. | |||||
checkbox-label |
||||||
checkmenuitem |
||||||
dualbutton |
||||||
groupbox |
||||||
listbox |
||||||
listitem |
||||||
menuarrow |
||||||
menubar |
||||||
menucheckbox |
||||||
menuimage |
||||||
menuitem |
L'élément est rendu comme un item de menu, l'item est mis en surbrillance lorsqu'il est survolé. | |||||
menuitemtext |
||||||
menulist |
||||||
menulist-button |
L'élément est rendu comme un bouton indiquant qu'une liste de menu peut être ouverte. | |||||
menulist-text |
||||||
menulist-textfield |
L'élément est rendu comme un champ texte pour une liste de menu. (Non implémenté sur les plateformes Windows) | |||||
menupopup |
||||||
menuradio |
||||||
menuseparator |
||||||
meterbar |
Nouveau depuis Firefox 16. | |||||
meterchunk |
Nouveau depuis Firefox 16. | |||||
progressbar |
L'élément est rendu comme une barre de progression. | |||||
progressbar-vertical |
||||||
progresschunk |
||||||
progresschunk-vertical |
||||||
radio |
L'élément est rendu comme un bouton radio, incluant uniquement la partie réelle du bouton radio. | |||||
radio-container |
L'élément est rendu comme un contenant pour un bouton radio, qui peut inclure un effet d'illumination de l'arrière-plan sous certaines plate-formes. L'élément devrait être composé d'une étiquette et d'un bouton radio. | |||||
radio-label |
||||||
radiomenuitem |
||||||
resizer |
||||||
resizerpanel |
||||||
scale-horizontal |
||||||
scalethumbend |
||||||
scalethumb-horizontal |
||||||
scalethumbstart |
||||||
scalethumbtick |
||||||
scalethumb-vertical |
||||||
scale-vertical |
||||||
scrollbarbutton-down |
||||||
scrollbarbutton-left |
||||||
scrollbarbutton-right |
||||||
scrollbarbutton-up |
||||||
scrollbarthumb-horizontal |
||||||
scrollbarthumb-vertical |
|
|||||
scrollbartrack-horizontal |
|
|||||
scrollbartrack-vertical |
||||||
searchfield |
||||||
separator |
||||||
sheet |
||||||
spinner |
||||||
spinner-downbutton |
||||||
spinner-textfield |
||||||
spinner-upbutton |
||||||
splitter |
||||||
statusbar |
||||||
statusbarpanel |
||||||
tab |
||||||
tabpanel |
||||||
tabpanels |
||||||
tab-scroll-arrow-back |
||||||
tab-scroll-arrow-forward |
||||||
textfield |
||||||
textfield-multiline |
||||||
toolbar |
||||||
toolbarbutton |
||||||
toolbarbutton-dropdown |
||||||
toolbargripper |
||||||
toolbox |
||||||
tooltip |
||||||
treeheader |
||||||
treeheadercell |
||||||
treeheadersortarrow |
||||||
treeitem |
||||||
treeline |
||||||
treetwisty |
||||||
treetwistyopen |
||||||
treeview |
||||||
-moz-mac-unified-toolbar |
Mac OS X seulement. La barre d’outils et la barre de titre sont rendues en utilisant la barre d’outils unifiée commune aux applications Mac OS X 10.4 et ultérieur. | |||||
-moz-win-borderless-glass |
Windows Vista et ultérieur seulement. Ce style applique l’effet Aero Glass à l’élément, mais sans bordure. | |||||
-moz-win-browsertabbar-toolbox |
Windows Vista et ultérieur seulement. Ce style de boîte à outils est destiné à la barre d’onglets d’un navigateur. | |||||
-moz-win-communicationstext |
||||||
-moz-win-communications-toolbox |
Windows Vista et ultérieur seulement. Ce style de boîte à outils est destiné aux applications de communication et de productivité. La couleur d’avant-plan correspondante est -moz-win-communicationstext . |
|||||
-moz-win-exclude-glass |
Windows Vista et ultérieur seulement. Ce style est utilisé pour exclure l’effet Aero Glass de l’élément. | |||||
-moz-win-glass |
Windows Vista et ultérieur seulement. Ce style applique l’effet Aero Glass sur l’élément. | |||||
-moz-win-mediatext |
||||||
-moz-win-media-toolbox |
Windows Vista et ultérieur seulement. Ce style de boîte à outils est destiné aux applications gérant des objets médias. La couleur d’avant-plan correspondante est -moz-win-mediatext . |
|||||
-moz-window-button-box |
||||||
-moz-window-button-box-maximized |
||||||
-moz-window-button-close |
||||||
-moz-window-button-maximize |
||||||
-moz-window-button-minimize |
||||||
-moz-window-button-restore |
||||||
-moz-window-frame-bottom |
||||||
-moz-window-frame-left |
||||||
-moz-window-frame-right |
||||||
-moz-window-titlebar |
||||||
-moz-window-titlebar-maximized |
Exemples
.exampleun { -moz-appearance: toolbarbutton; }
Spécifications
Cette propriété appearance
ne fait partie d'aucune spécification standard CSS.
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | 1.0 | 1.0 (1.7 ou moins)-moz[1] | Pas de support | ? | 3.0-webkit |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | ? | 1.0 (1.0) | 11.0-webkit[2] | ? | ? |
[1] Pas complètement prise en charge.
[2] Seules les valeurs none
, button
et textfield
sont prises en charge. Voir la documentation sur MSDN (en anglais).
Voir aussi
- Définition de
appearance
dans la recommandation CSS 3 Basic User Interface (Candidate Recommendation du 11 mai 2004), qui n'est plus à jour (la propriétéappearance
a été abandonnée dans les versions ultérieures) - Les fonctionnalités abandonnées pour la spécification CSS3 sur le module d'interface utilisateur