Accent-color - Propriété CSS

accent-color

Résumé des caractéristiques de la propriété `accent-color`

Description rapide

Définit la couleur des élément actifs, cochés.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

auto | currentcolor

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété accent-color passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Interface utilisateur de base

Références (W3C)

CSS Basic User Interface Module Level 4

Statut du document: WD (document de travail)

Schéma de la syntaxe de `accent-color`.

Schéma syntaxique de la propriété accent-color

Légende :

color-name est le nom d'une couleur. 140 couleurs environ ont reçu un om standardisé : voir Nuancier.
#xxxx est le code hexadécimal d'une couleur, sur 3 ou 6 digits, ou 8 pour indiquer une transparence.
color est une couleur spécifiées par l'une des fonctions rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété `accent-color`.

La propriété accent-color définit la couleur des éléments sélectionnés. Elle s'applique essentiellement aux éléments suivants :

Case à cocher lorsqu'elle est cochée.
Bouton radio lorsqu'il est sélectionné.
Partie gauche des zones de saisie du type range.
Partie gauche des barres de progression.

Valeurs pour `accent-color`.

accent-color: auto;

Le navigateur décide quelle sera la couleur des éléments sélectionnés ou cochés (formulaire). En général la couleur est choisie pour maximiser le contraste avec les éléments non sélectionnés ou non cochés.
accent-color: currentColor;

Les éléments sélectionnés ou cochés d'un formulaire seront de la même couleur que le texte.
accent-color: #00AA00;

Une couleur exprimée dans n'importe laquelle des syntaxes reconnues par CSS (voir Les couleurs).
accent-color: initial; (auto) accent-color: inherit; accent-color: revert; accent-color: revertLayer; accent-color: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `accent-color`.

Comme toutes les propriétés relatives aux couleurs, accent-color peut être animée de façon très fluide. Dans notre exemple, les couleurs ont été définies avec la fonction hsl().

Accéder à la propriété `accent-color` par programme.

Avec Javascript, modifier la valeur de `accent-color`.

Voici comment modifier la valeur de accent-color avec Javascript. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['accent-color'] = 'cyan';
	// ou
	let el = document.getElementById('id');
	el.style.accentColor = 'cyan';

Avec Javascript, lire la valeur de `accent-color`.

Ce code récupère la valeur de la propriété accent-color affectée directement à l'élément lui-même via son attribut style, ou par le code précédent, mais non pas la valeur affectée via un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['accent-color'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.accentColor;

Avec Javascript, lire la valeur calculée de `accent-color`.

La valeur calculée est celle qui résulte de l'évaluation des différentes syntaxes pour exprimer une couleur.
la couleur est retournée sous la forme rgb(r,g,b), ou rgba(r,g,b,a) si l'opacité n'est pas totale.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('accent-color');

Avec JQuery, modifier la valeur de `accent-color`.


 $('#id').css('accent-color', 'cyan');
 // ou
 $('#id').css('accentColor', 'cyan');

Avec JQuery, lire la valeur calculée de `accent-color`.


	let value = $('#id').css('accent-color');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété accent-color et affichent ensuite, pour le premier bouton la valeur telle qu'elle a été appliquée, et pour le deuxième bouton, la valeur calculée. Cette dernière permet de voir comment est mémorisée (sérialisée) la valeur de accent-color. On constate que la couleur est sérialisée sous la forme rgb(...) ou rgba(...).

Compatibilité des navigateurs avec `accent-color`.

La propriété accent-color est bien prise en charge par les navigateurs actuels, comme le montre le tableau de compatibilité ci-dessous (à part une particularité avec Safari ).

Colonne 1

Support de la propriété accent-color.

Remarques :

(1) Safari n’ajuste pas la couleur des glyphes sur les contrôles de formulaire pour conserver le contraste.

Propriété
accent-color

Estimation de la prise en charge globale.

78%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `accent-color`.

Module CSS - Interface utilisateur de base - Niveau 4

Première définition de la propriété accent-color.

22 Septembre 2015
Document de travail.

Voir aussi, au sujet de la stylisation de l'interface utilisateur.

Les possibilités de personnalisation ou de stylisation de l'interface utilisateur (UI) sont décrites dans la spécification CSS Basic User Interface Module du W3C.