Comment utiliser la propriete css accent color

La propriété CSS accent-color permet de teinter à nouveau la couleur accentuée des contrôles de formulaires fournis par les styles par défaut du navigateur avec une valeur de couleur personnalisée.

.element {
  accent-color: #f8a100;
}

La propriété CSS accent-color est défini dans le module de base de l'interface utilisateur CSS de niveau 4, qui est actuellement en phase d'ébauche. Cela signifie que les détails sont encore en cours d'élaboration et pourraient changer d'ici à ce que la spécification devienne une recommandation officielle.

Syntaxe

accent-color: auto | <color>;

Valeur initiale : auto
S'applique à : tous les éléments
Héritée : oui
Valeur calculée : le mot clé auto ou une couleur calculée
Type d'animation : par type de valeur calculée

Valeur

/* Keyword */
accent-color: auto;

/* <color> */
accent-color: red;
accent-color: #f8a100
accent-color: rgba(102, 100, 70, 1);
accent-color: hsla(180, 100%, 70%, 1);

/* Global*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: unset;

Un moyen "facile" de styliser les formulaires !

Le style des formulaires a traditionnellement été... eh bien, affreux. Pas besoin de chercher plus loin que la personnalisation de l'élément <progress> pour voir à quel point il est difficile de styliser les contrôles de formulaires. Cela conduit généralement à une décision entre l'acceptation des styles par défaut du navigateur ou une mise à niveau personnalisée pour les réinitialiser et les recréer à partir de zéro.

Voici ce qu'il faut généralement faire pour obtenir une couleur personnalisée de l'élément <progress> :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  display: grid;
  height: 100vh;
  place-items: center;
}

progress {
  width: clamp(300px, 50%, 850px);
}

/* Fallback stuff */
progress[value] {
  appearance: none; /* Needed for Safari */
  border: none; /* Needed for Firefox */
  color: #e52e71; /* Fallback to a solid color */
}

/* WebKit styles */
progress[value]::-webkit-progress-value {
  background-color: #30cc7e;
}

/* Firefox styles */
progress[value]::-moz-progress-bar {
}
</style>
</head>
<body>

<progress id="progress" max="100" value="50">Progress</progress>

</body>
</html>

Résultat

Progress Bar Styled Without accent-color Property

accent-color nous permet de modifier la couleur utilisée dans les contrôles de formulaire avec une seule ligne de code CSS :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  display: grid;
  height: 100vh;
  place-items: center;
}

progress {
  accent-color: #30cc7e;
  place-self: center;
  width: clamp(300px, 60%, 850px);
}

.notice {
  background: #fff9c4;
  border-radius: 6px;
  padding: 0.5rem;
  text-align: center;
  width: clamp(300px, 60%, 850px);
}

@supports (accent-color: #fff) {
  .notice {
    display: none;
  }
}
</style>
</head>
<body>

<p class="notice">Your browser does not support the <code>accent-color</code> property.</p>
<progress id="progress" min="0" max="100" value="50"></progress>

</body>
</html>

Résultat

Progress Bar Styled With accent-color Property

La propriété CSS accent-color fonctionne avec des contrôles de formulaire spécifiques

Avant de vous lancer dans l'ajout de couleurs d'accentuation à tout ce que vous voulez, il est bon de noter que quatre contrôles de formulaire spécifiques prennent en charge la propriété CSS accent-color :

les cases à cocher (<input type="checkbox">)
les boutons radio (<input type="radio">)
les plages (<input type="range">)
la barre de progression (<progress>)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  display: grid;
  padding: 3rem 0;
}

.accent {
  accent-color: #30cc7e;
}

form {
  display: grid;
  grid-auto-columns: fit-content(50%);
  grid-template-areas: "a a";
  margin: auto;
  padding: 0;
  gap: 1rem;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: auto;
}

form section:first-child {
  color-scheme: light;
}
form section:last-child {
  color-scheme: dark;
}

fieldset {
  border-radius: 8px;
  color-scheme: light;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.dark {
  color-scheme: dark;
}

.dark fieldset {
  background: #100f33;
  border-color: #100f33;
  color: #fff;
}

.dark .accent {
  accent-color: hsla(180, 100%, 70%, 1);
}

h2 {
  margin: 0;
}

.notice {
  background: #fff9c4;
  border-radius: 6px;
  margin: 1.5rem auto;
  padding: 0.5rem;
  text-align: center;
}

@supports (accent-color: #fff) {
  .notice {
    display: none;
  }
}
</style>
</head>
<body>

<div class="notice">
  Your browser does not support the <code>accent-color</code> property.
</div>

<form action="">
  <fieldset>
    <h2>Checkboxes</h2>
    <div>
      <label for="checkbox">
        Default
      </label>
      <input id="checkbox" type="checkbox" checked>
    </div>
    <div>
      <label for="checkbox-accent">
        Accent
      </label>
      <input id="checkbox-accent" type="checkbox" class="accent" checked>
    </div>
  </fieldset>

  <fieldset>
    <h2>Radio</h2>
    <div>
      <input id="radio" type="radio" checked>
      <label for="radio">
        Default
      </label>
    </div>
    <div>
      <input id="radio-accent" type="radio" class="accent" checked>
      <label for="radio-accent">
        Accent
      </label>
    </div>
  </fieldset>

  <fieldset>
    <h2>Progress</h2>
    <div>
      <label for="progress">
        Default
      </label>
      <progress id="progress" min="0" max="100" value="50"></progress>
    </div>
    <div>
      <label for="progress-accent">
        Accent
      </label>
      <progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress>
    </div>
  </fieldset>

  <fieldset>
    <h2>Range</h2>
    <div>
      <label for="range">
        Default
      </label>
      <input id="range" type="range">
    </div>
    <div>
      <label for="range-accent">
        Accent
      </label>
      <input id="range-accent" class="accent" type="range">
    </div>
  </fieldset>
</form>

</body>
</html>

Résultat

accent-color CSS Property Applied on Specific Form Controls

La propriété CSS accent-color fonctionne avec les schémas de couleurs souhaités

La propriété accent-color respecte les schémas de couleurs. Si le schéma de couleurs préféré d'un utilisateur est défini sur, par exemple, clair dans les paramètres de son système d'exploitation, le navigateur doit évaluer la valeur de la propriété accent-color et déterminer une couleur d'interface utilisateur appropriée. De cette façon, nous sommes assurés d'un contraste de couleur accessible entre l'interface utilisateur du navigateur et l'accent. Il n'est pas nécessaire de s'accommoder d'une couleur d'accent claire qui s'oppose à une interface utilisateur de contrôle de formulaire claire.

Chaque navigateur a sa propre façon de calculer la couleur à utiliser.

Et si nous avons une couleur d'accent que nous aimons mais qui ne correspond pas à la couleur d'interface utilisateur choisie par le navigateur, nous pouvons utiliser la propriété "color-scheme" pour la remplacer.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;
}

body {
  display: grid;
  padding: 3rem 0;
}

form {
  display: grid;
  grid-auto-columns: fit-content(50%);
  grid-template-areas: "a a";
  margin: auto;
  place-items: center;
  padding: 0;
  gap: 1rem;
}

form section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

form section:first-child {
  color-scheme: light;
}
form section:last-child {
  color-scheme: dark;
}

fieldset {
  border-radius: 8px;
  color-scheme: light;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.5rem;
}

h2 {
  margin: 0;
}

.light {
  color-scheme: light;
}

.light .accent {
  accent-color: #30cc7e;
}

.dark {
  color-scheme: dark;
}

.dark .accent {
  accent-color: hsla(180, 100%, 70%, 1);
}

.dark fieldset {
  background: #100f33;
  border-color: #100f33;
  color: #fff;
}

.notice {
  background: #fff9c4;
  border-radius: 6px;
  color: #333;
  margin: 0 auto 1.5rem;
  padding: 0.5rem;
  text-align: center;
  width: clamp(300px, 60%, 850px);
}

@supports (accent-color: #fff) {
  .notice {
    display: none;
  }
}
</style>
</head>
<body>

<p class="notice">Your browser does not support the <code>accent-color</code> property.</p>

<form action="">
  <section class="light">
    <fieldset>
      <h2>Checkboxes</h2>
      <div>
        <label for="checkbox">
          Default
        </label>
        <input id="checkbox" type="checkbox" checked>
      </div>
      <div>
        <label for="checkbox-accent">
          Accent
        </label>
        <input id="checkbox-accent" type="checkbox" class="accent" checked>
      </div>
    </fieldset>

    <fieldset>
      <h2>Radio</h2>
      <div>
        <input id="radio" type="radio" checked>
        <label for="radio">
          Default
        </label>
      </div>
      <div>
        <input id="radio-accent" type="radio" class="accent" checked>
        <label for="radio-accent">
          Accent
        </label>
      </div>
    </fieldset>

    <fieldset>
      <h2>Progress</h2>
      <div>
        <label for="progress">
          Default
        </label>
        <progress id="progress" min="0" max="100" value="50"></progress>
      </div>
      <div>
        <label for="progress-accent">
          Accent
        </label>
        <progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress>
      </div>
    </fieldset>

    <fieldset>
      <h2>Range</h2>
      <div>
        <label for="range">
          Default
        </label>
        <input id="range" type="range">
      </div>
      <div>
        <label for="range-accent">
          Accent
        </label>
        <input id="range-accent" class="accent" type="range">
      </div>
    </fieldset>
  </section>

  <section class="dark">
    <fieldset>
      <h2>Checkboxes</h2>
      <div>
        <label for="checkbox">
          Default
        </label>
        <input id="checkbox" type="checkbox" checked>
      </div>
      <div>
        <label for="checkbox-accent">
          Accent
        </label>
        <input id="checkbox-accent" type="checkbox" class="accent" checked>
      </div>
    </fieldset>

    <fieldset>
      <h2>Radio</h2>
      <div>
        <input id="radio" type="radio" checked>
        <label for="radio">
          Default
        </label>
      </div>
      <div>
        <input id="radio-accent" type="radio" class="accent" checked>
        <label for="radio-accent">
          Accent
        </label>
      </div>
    </fieldset>

    <fieldset>
      <h2>Progress</h2>
      <div>
        <label for="progress">
          Default
        </label>
        <progress id="progress" min="0" max="100" value="50"></progress>
      </div>
      <div>
        <label for="progress-accent">
          Accent
        </label>
        <progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress>
      </div>
    </fieldset>

    <fieldset>
      <h2>Range</h2>
      <div>
        <label for="range">
          Default
        </label>
        <input id="range" type="range">
      </div>
      <div>
        <label for="range-accent">
          Accent
        </label>
        <input id="range-accent" class="accent" type="range">
      </div>
    </fieldset>
  </section>
</form>

</body>
</html>

Résultat

accent-color CSS Property Applied on Specific Form Controls with color-scheme Property

Mais il se peut que vous ne vouliez pas remettre en question le choix du navigateur, même s'il finit par être un peu incohérent entre les navigateurs. C'est beaucoup de choses à jongler et vous risquez de faire plus de mal que de bien à l'accessibilité de l'interface utilisateur.

Une approche différente est nécessaire pour les autres contrôles de formulaires

Là encore, seuls quelques contrôles de formulaires prennent actuellement en charge les couleurs d'accentuation. Cela signifie que nous devons encore recourir à des approches traditionnelles pour styliser d'autres types de contrôles de formulaires.

L'extrait de code ci-dessous permet d'ajouter une couleur d'accentuation à d'autres contrôles de formulaires, ainsi qu'aux marqueurs de liste, à la sélection et au focus visible :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

html {
  --brand: hotpink; 
  scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand) }
:focus-visible { outline-color: var(--brand) }
::selection { background-color: var(--brand) }
::marker { color: var(--brand) }

::-webkit-calendar-picker-indicator {
  color: var(--brand)
}

::-webkit-clear-button {
  color: var(--brand);
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  color: var(--brand);
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
  color-scheme: dark light;
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  
  display: grid;
  place-content: center;
  gap: 2ch;
}
</style>
</head>
<body>

<input type="date">
<input type="number" min=0 max=10 value=0>
<input type="text" list="animals" placeholder="Animals">
<input type="search" list="animals" placeholder="Search...">

<details>
  <summary>Details</summary>
  <p>Peek-a-boo</p>
</details>

<ul>
  <li>This</li>
  <li>Is</li>
  <li>A</li>
  <li>List</li>
</ul>

<datalist id="animals">
  <option>Dog</option>
  <option>Cat</option>
  <option>Spider</option>
</datalist>

</body>
</html>

Résultat

Conclusion

La norme ne limite pas l'application de la propriété CSS accent-color aux quatre éléments présentés dans cet article, d'autres supports pourraient être ajoutés ultérieurement. Des éléments comme l'option (<option>) sélectionnée dans une balise <sélect> pourraient être mis en évidence avec la propriété CSS accent-color.

Comment utiliser la propriété CSS accent-color ?

Par : TutorialsGrey, le 05 Octobre 2022

Syntaxe

Valeur

Un moyen "facile" de styliser les formulaires !

La propriété CSS accent-color fonctionne avec des contrôles de formulaire spécifiques

La propriété CSS accent-color fonctionne avec les schémas de couleurs souhaités

Une approche différente est nécessaire pour les autres contrôles de formulaires

Conclusion

Article Précédent

Accordion - Comment créer un accordéon en HTML, CSS & JS

Article Suivant

Comment aligner du contenu HTML avec la propriété CSS align-content ?

Questions récentes

Catégories