Simplifier les styles de formulaire avec des couleurs d'accent —

Je ne sais pas pour vous, mais j'adore quand arrivent de nouvelles propriétés CSS qui simplifient notre quotidien de développeur et nous permettent de supprimer tout un tas de code redondant. aspect-ratio est l'une de ces propriétés (éliminant récemment le besoin du padding hack). accent-color pourrait bien être le prochain.

Style des entrées de formulaire

Prenons les cases à cocher. Dans chaque navigateur, ceux-ci sont stylisés différemment par la feuille de style de l'agent utilisateur (responsable des styles par défaut du navigateur).

Historiquement, il n'existait aucun moyen réel de styliser ces entrées. Au lieu de cela, de nombreux développeurs Web ont recours à un hack bien connu, qui consiste à masquer visuellement (mais de manière accessible) l'entrée elle-même, puis à styliser un pseudo-élément sur l'étiquette. (Tout cela s'applique également aux boutons radio.)

Ceci est en fait moins détaillé que les solutions précédentes. ModernCSS propose un didacticiel détaillé sur la façon d'implémenter des cases à cocher et des boutons radio personnalisés à l'aide de cette technique.

Cette technique fonctionne avec tous les navigateurs et sera toujours nécessaire si les cases à cocher doivent être entièrement personnalisées (avec des animations, etc). Mais dans de nombreux cas, nous n'avons pas besoin de style sophistiqué – nous devons simplement pouvoir appliquer une couleur de marque et passer à autre chose. Ne serait-il pas formidable de se débarrasser de tout ce CSS maladroit ? Entrez accent-color!

Simple Use

Pour le cas d'utilisation le plus simple, nous pouvons définir la propriété accent-color sur l'élément :root et l'appliquer partout sur notre page Web :

 :root {
  couleur d'accentuation : rgba (250, 15, 117) ;
}

Cela applique la couleur choisie (au moment de la rédaction) aux cases à cocher, boutons radio, éléments de plage et de progression.

Accessibilité

Une fonctionnalité assez intéressante est que le navigateur déterminera automatiquement la meilleure couleur pour la coche afin d'assurer un contraste de couleur suffisant, en utilisant ses propres algorithmes internes. Cela signifie qu'aucun style de code supplémentaire n'est requis pour garantir que nos cases à cocher sont aussi accessibles que possible.

Dans la démo suivante, nous appliquons deux couleurs d'accent différentes. Si vous affichez cela dans Chrome, vous devriez voir que la coche de celle de gauche est blanche, tandis que celle de droite est noire. Les navigateurs utilisent des algorithmes différents pour cela, vous pouvez donc rencontrer des résultats différents dans Chrome par rapport à Firefox.

Custom Properties

Si nous voulons appliquer la même couleur à d'autres éléments de l'interface utilisateur, nous pouvons utiliser une propriété personnalisée. Nous pouvons définir notre couleur en tant que propriété personnalisée sur l'élément racine, puis l'appliquer (par exemple) aux en-têtes ou à d'autres éléments de formulaire :

:root {
  --marque : rgba (250, 15, 117) ;
  couleur d'accent : var(--marque);
}

On peut même créer des effets amusants. Dans la démonstration suivante, nous attribuons à chaque groupe de cases à cocher une propriété personnalisée qui correspond à l'index de l'élément (--i) à l'aide de l'attribut style dans le code HTML. Ensuite, nous l'utilisons dans notre CSS pour calculer la valeur de teinte dans une fonction de couleur HSL afin de déterminer la couleur d'accent. Cases à cocher arc-en-ciel !

Autres éléments de formulaire

Malheureusement, accent-color n'est pas appliqué à d'autres éléments auxquels nous pourrions nous attendre, comme les listes déroulantes sélectionnées . Nous pourrions vouloir appliquer la couleur que nous avons choisie aux éléments de formulaire déjà stylisés, comme les boutons et les entrées de texte. La propriété personnalisée est utile ici, car nous pouvons l'appliquer à la bordure de nos entrées de texte et à l'arrière-plan des boutons, par exemple :

The Web La documentation .dev sur accent-color comprend cet extrait pratique d'Adam Argyle pour styliser d'autres éléments non exclusifs aux formulaires, y compris les marqueurs de liste, les surbrillances de sélection de texte et la bague de mise au point :

html {
  --marque : rose vif ;
  couleur de la barre de défilement : toile rose vif ;
}

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

:est(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  couleur : var(--marque);
}

Color Schemes

Pour personnaliser davantage nos éléments de formulaire, la propriété color-scheme peut nous aider à les styliser en fonction des préférences de l'utilisateur pour le mode clair ou sombre. Pour le moment, nous pouvons fournir des styles de mode sombre en fonction des préférences système de l'utilisateur avec la requête média prefers-color-scheme :

/*
    Si la préférence de l'utilisateur est définie sur « foncé », cela rend le texte blanc sur un fond noir
*/
@media (préfère le schéma de couleurs : sombre) {
  corps {
    couleur d'arrière-plan : #000000 ;
    couleur : #ffffff ;
  }
}

Si nous en restons là, nos cases à cocher auront toujours un fond clair dans leur état non coché.

Nous pouvons utiliser color-scheme pour nous assurer que nos cases à cocher prennent un style clair ou foncé selon les préférences. Le définir sur l'élément racine dans notre CSS garantit qu'il s'applique à toute la page :

:root {
  schéma de couleurs : clair foncé ;
}

Ceci exprime les schémas de couleurs par ordre de préférence. Alternativement, nous pourrions l'implémenter en utilisant une balise meta dans notre HTML :

Ceci est en fait préférable, car il sera lu par le navigateur juste avant que le fichier CSS ne soit analysé et exécuté – cela pourrait donc nous aider à éviter un flash de contenu sans style (FOUC).[19659013] Dans notre démo de cases à cocher arc-en-ciel, vous remarquerez peut-être que le navigateur ajuste également la couleur de certaines des coches lorsque nous changeons de schéma de couleurs, tout en maintenant un contraste suffisant. Plutôt cool !

color-scheme affecte les styles de l'agent utilisateur. Si nous l'utilisons sans fournir d'autres couleurs d'arrière-plan ou styles de couleur de texte pour la page, les couleurs par défaut de la page seront inversées si l'utilisateur sélectionne un schéma de couleurs sombres – la couleur d'arrière-plan par défaut sera donc le noir et la couleur du texte sera blanche. En pratique, il est fort probable que nous voudrons les remplacer par CSS. Nous pouvons utiliser color-scheme avec la requête média prefers-color-scheme. Dans cette démo, j'utilise prefers-color-scheme pour définir la couleur du texte uniquement lorsqu'un schéma sombre est préféré.

color-scheme peut également être défini sur des éléments individuels, ce qui est utile s'il existe certaines zones de notre conception pour lesquelles nous souhaitons conserver un schéma de couleurs spécifié, que le mode clair ou sombre soit basculé. Dans cette démo, nous avons un formulaire avec un fond sombre même lorsque la palette de couleurs globale est claire. Nous pouvons spécifier un schéma de couleurs sombres, pour garantir que nos cases à cocher sont stylisées avec une couleur sombre à tout moment :

.dark-form {
  schéma de couleurs : sombre ;
}

Limitations

Comme mentionné, il existe plusieurs éléments qui ne sont actuellement pas affectés par accent-colorpour lesquels cette fonctionnalité serait sois utile. Une autre considération est que nous sommes actuellement limités à styliser uniquement l'état coché de la case à cocher ou du bouton radio – en plus d'utiliser color-schemequi a un certain effet sur la bordure de la case à cocher, mais ne permet pas personnalisation complète. Ce serait formidable de pouvoir styliser la couleur et l'épaisseur de la bordure pour l'entrée dans son état non coché ou d'implémenter un style encore plus personnalisé, comme changer la forme générale, mais nous n'en sommes pas encore là. À tout le moins, permettre à la bordure de la case à cocher d'hériter de la couleur du corps du texte serait préférable.

Il serait également utile de pouvoir étendre l'utilisation de accent-color à d'autres éléments au-delà des formulaires, comme les commandes vidéo. Actuellement, pour un développeur, créer des contrôles personnalisés implique une quantité de travail importante afin de recréer l'accessibilité des contrôles natifs. Cet excellent article de Stephanie Stimac détaille le travail effectué par Open UI pour normaliser les éléments de l'interface utilisateur afin de faciliter leur style pour les développeurs.

Alternatives

An Une autre façon de styliser une case à cocher ou un bouton radio consiste à masquer le style par défaut avec -webkit-appearance: none et à le remplacer par une image d'arrière-plan. (Voir cette démo.) Les navigateurs modernes supportent assez bien cela, mais cela a ses limites par rapport à la première méthode d'utilisation d'un pseudo-élément (décrite au début de cet article), comme nous pouvons' t manipuler directement l'image d'arrière-plan avec CSS (par exemple en changeant sa couleur ou son opacité), ou faire la transition de l'image. dans les propriétés personnalisées pour manipuler une image d'arrière-plan. Découvrez cette belle démo (et le worklet qui l'accompagne) par Matteo. La prise en charge est actuellement limitée aux navigateurs Chromium.

Accessibilité

Nous devons veiller à fournir des styles de focus accessibles lors de l'utilisation du masquage de l'apparence par défaut des contrôles de formulaire. Un avantage de accent-color est qu'il ne masque pas les paramètres par défaut du navigateur, préservant l'accessibilité.

Browser Support

accent-color est actuellement pris en charge dans les dernières versions de Chrome et Edge. Il peut être activé dans Firefox avec le drapeau layout.css.accent-color.enabled et devrait être pris en charge dans la prochaine version. Malheureusement, il n'y a pas de support Safari pour le moment. Cela ne veut pas dire que vous ne pouvez pas commencer à l'utiliser tout de suite – les navigateurs qui ne prennent pas en charge accent-color obtiendront simplement les paramètres par défaut du navigateur, donc cela fonctionne très bien comme amélioration progressive.

Conclusion

Nous avons principalement parlé des cases à cocher et des boutons radio ici, car ils font partie des éléments de formulaire les plus courants nécessitant une personnalisation. Mais accent-color a le potentiel de fournir un style rapide et facile pour bon nombre de nos éléments de formulaire, en particulier lorsqu'une personnalisation étendue n'est pas nécessaire, ainsi que de permettre au navigateur de choisir les meilleures options d'accessibilité.[19659071]Lectures complémentaires

Quelques ressources sur accent-colorcolor-scheme et les entrées de formulaire de style :

(vf, yk, il)