Les Schéma de couleur La propiedad CSS y la metaetiqueta correspondiente permiten a los desarrolladores incluir sus páginas en los valores predeterminados específicos del tema de la feuille de style du agent utilisateur.
Mise à jour
Antécédents
Les préfère le jeu de couleurs función de medios de preferencia del Nom d'utilisateur
Les
préfère le jeu de couleurs
La fonctionnalité multimédia de préférence utilisateur donne aux développeurs un contrôle total sur l'apparence de leurs pages. Si vous ne le connaissez pas, veuillez lire mon article
préfère le jeu de couleursBonjour Darkness, mon vieil ami, où j'ai documenté tout ce que je sais sur la création d'incroyables expériences en mode sombre.
Une pièce du puzzle qui n'a été que brièvement mentionnée dans l'article est le Schéma de couleur Propiedad CSS y la metaetiqueta correspondiente del mismo nombre. Ambos le facilitan la vida como desarrollador al permitirle incluir su página en los valores predeterminados específicos del tema de la hoja de estilo del agente de usuario, como, por ejemplo, controles de formulario, barres de desplazamiento y colores del sistema CSS. Al mismo tiempo, esta función evita que los navigateurs apliquen transformaciones por sí mismos.
La feuille de style de l'agent utilisateur
Avant de continuer, permettez-moi de décrire brièvement ce qu'est une feuille de style d'agent utilisateur. La plupart du temps, tu peux penser au mot agent utilisateur (UA) comme une façon élégante de dire le navigateur. La feuille de style UA détermine l'apparence par défaut d'une page. Comme son nom l'indique, une feuille de style UA dépend de l'UA en question. Vous pouvez jeter un oeil à
Chrome
(et la feuille de style UA de Chromium) et comparez-la à
Depuis Firefox ou
Safari (et WebKit). En règle générale, les feuilles de style UA correspondent à la plupart des choses. Par exemple, ils rendent tous les liens bleus, le texte général noir et la couleur d'arrière-plan blanche, mais il existe également des différences importantes (et parfois ennuyeuses), par exemple, la façon dont ils conçoivent les contrôles de formulaire.
Regarde de plus près
Feuille de style WebKit UA
et ce qu'il fait concernant le mode sombre. (Effectuez une recherche en texte intégral pour «sombre» dans la feuille de style.) La valeur par défaut fournie par la feuille de style change selon que le mode sombre est activé ou désactivé. Pour illustrer cela, voici une règle CSS qui utilise le
: allumettes
pseudo-classe et variables internes de WebKit comme -apple-system-control-backgroundainsi que la directive de préprocesseur interne WebKit #if défini:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
Couleur: texte;
Couleur de l'arrière plan: -apple-system-control-background;
#else
Couleur de l'arrière plan: white;
#endif
}Vous remarquerez des valeurs non standard pour le Couleur y Couleur de l'arrière plan propriétés ci-dessus. Rien texte ni -apple-system-control-background ce sont des couleurs CSS valides. Ils sont internes à WebKit sémantique couleurs.
Il s'avère que CSS a standardisé les couleurs du système sémantique. Ils sont spécifiés dans
Module de couleur CSS niveau 4. Par exemple,
Toile
(à ne pas confondre avec etiqueta) es para el fondo del Contenu o documentos de la aplicación, mientras que
CanvasText
C'est pour le texte dans les documents ou le contenu de l'application. Les deux vont de pair et ne doivent pas être utilisés isolément.
Las hojas de estilo UA pueden utilizar sus propios colores patentados o los del sistema semántico estandarizado, para determinar cómo se deben representar los elementos HTML de forma predeterminada. Si el sistema operativo está configurado en modo oscuro o usa un tema oscuro,
CanvasText (ou alors texte) serait conditionnellement mis à blanc, et Toile (ou alors -apple-system-control-background) serait défini sur noir. La feuille de style UA n'attribue le CSS suivant qu'une seule fois et couvre à la fois le mode clair et le mode sombre.
corps {
Couleur: CanvasText;
Couleur de l'arrière plan: Toile
}Les Schéma de couleur Propriété CSS
Les Module de réglage des couleurs CSS niveau 1
La especificación introduce un modelo y controla el ajuste automático del color por parte del agente de usuario con el objectif de manejar las preferencias del usuario, como el modo oscuro, el ajuste de contraste o esquemas de color específicos deseados.
La propiedad definida en el mismo permite que un elemento indique con qué esquemas de color se siente cómodo renderizado. Estos valores se negocian con las preferencias del usuario, lo que da como resultado un esquema de color elegido que afecta aspectos de la interface utilisateur (UI), como los colores predeterminados de los controles de formulario y las barras de desplazamiento, así como los valores usados de los colores del sistema CSS. Actualmente se admiten los siguientes valores:
-
OrdinaireIndique que l'élément ne connaît pas du tout les jeux de couleurs, donc l'élément doit être rendu en utilisant le jeu de couleurs par défaut du navigateur. -
[lumière | sombre] +Indique que l'élément connaît et peut gérer les jeux de couleurs répertoriés et exprime une préférence ordonnée entre eux.
Proporcionar ambas mots-clés indica que el primer esquema es el preferido (por el autor), pero el segundo también es aceptable si el usuario lo prefiere.
Dans cette liste, Lumière représente une palette de couleurs claires, avec des couleurs d'arrière-plan claires et des couleurs de premier plan sombres, tandis que foncé représente le contraire, avec des couleurs de fond sombres et des couleurs claires de premier plan.
Avertissement:
Auparavant, la spécification permettait une valeur supplémentaire lumière seulement
qui a indiqué que l'élément devait être rendu avec un jeu de couleurs claires si possible, même si la préférence de l'utilisateur est pour un jeu de couleurs différent. Auteurs je ne devrais pas utilisez cette valeur et à la place, vous devez vous assurer que votre page s'affiche bien avec le jeu de couleurs que l'utilisateur préfère.
Pour tous les éléments, le rendu avec un jeu de couleurs doit rendre les couleurs utilisées dans toute l'interface utilisateur fournie par le navigateur pour que l'élément corresponde à l'intention du jeu de couleurs. Certains exemples sont les barres de défilement, les soulignements de vérification orthographique, les contrôles de formulaire, etc.
Les Schéma de couleur La propriété CSS peut être utilisée à la fois dans : racine niveau ainsi que niveau individuel par élément.
Sur le : racine élément, le rendu avec un jeu de couleurs doit en outre affecter la couleur de la surface du canevas (c'est-à-dire la couleur d'arrière-plan globale), la valeur initiale de la Couleur et les valeurs utilisées des couleurs système, et doivent également affecter les barres de défilement de la fenêtre.
: racine {
Schéma de couleur: dark light;
}Honorer le Schéma de couleur La propriété CSS nécessite que le CSS soit d'abord téléchargé (s'il est référencé par ) et à analyser. Pour aider les agents utilisateurs à rendre l'arrière-plan de la page avec le jeu de couleurs souhaité. immédiatement, ongle Schéma de couleur La valeur peut également être fournie dans un
élément.
<meta patate douce="Schéma de couleur" contenu="dark light">Combinatoire Schéma de couleur y préfère le jeu de couleurs
Étant donné que la balise meta et la propriété CSS (si elle est appliquée à la : racine element) aboutissent finalement au même comportement, je recommande toujours de spécifier le schéma de couleurs via la balise meta, afin que le navigateur puisse adopter le schéma préféré plus rapidement.
Alors que pour les pages de référence absolues, aucune règle CSS supplémentaire n'est nécessaire, dans le cas général, vous devez toujours combiner Schéma de couleur avec préfère le jeu de couleurs. Par exemple, la couleur CSS propriétaire de WebKit -webkit-lien, utilizado por WebKit y Chrome para el relier clásico azul rgb (0,0,238), a un rapport de contraste insuffisant de 2,23: 1 sur fond noir et
échec
WCAG AA et WCAG AAA
conditions.
J'ai ouvert des erreurs pour Chrome,
WebKity
Firefox
ainsi qu'une problème de méta dans la norme HTML
pour résoudre ce problème.
Interaction avec préfère le jeu de couleurs
L'interaction de Schéma de couleur Propriété CSS et la balise Meta correspondante avec le préfère le jeu de couleurs La fonction multimédia de préférence de l'utilisateur peut sembler déroutante au début. En fait, ils jouent très bien ensemble. La chose la plus importante à comprendre est que Schéma de couleur
détermine exclusivement l'apparence par défaut, tandis que préfère le jeu de couleurs détermine l'apparence stylisable. Pour clarifier cela, supposez la page suivante:
<diriger>
<meta patate douce="Schéma de couleur" contenu="dark light">
<style>
fieldset {
Couleur de l'arrière plan: gainsboro;
}
@media (préfère le jeu de couleurs: foncé) {
fieldset {
Couleur de l'arrière plan: darkslategray;
}
}
</style>
</diriger>
<corps>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<bouton taper="bouton">Lorem ipsum</bouton>
</fieldset>
</form>
</corps>Le code CSS en ligne sur la page définit le éléments Couleur de l'arrière plan à gainsboro dans le cas général, et pour darkslategray si l'utilisateur préfère un foncé jeu de couleurs selon préfère le jeu de couleurs fonction multimédia de préférence de l'utilisateur.
À travers le élément, la page indique au navigateur qu'elle prend en charge un thème sombre et un thème clair, avec une préférence pour un thème sombre.
Selon que le système d'exploitation est défini sur sombre ou clair, la page entière apparaît claire sur sombre, ou vice versa, selon la feuille de style de l'agent utilisateur. Voilà Pas Un développeur supplémentaire a fourni du CSS pour modifier le texte du paragraphe ou la couleur d'arrière-plan de la page.
Remarquez comment le éléments Couleur de l'arrière plan Les modifications sont basées sur l'activation du mode sombre, en suivant les règles de la feuille de style en ligne fournie par le développeur sur la page. C'est bien gainsboro ou darkslategray.
Couleur de l'arrière plan c'est gainsboroselon la feuille de style du développeur en ligne.
Couleur de l'arrière plan c'est darkslategrayselon la feuille de style du développeur en ligne.
Les L'apparence de l'élément est contrôlée par la feuille de style de l'agent utilisateur. Leur Couleur est configuré dans le
ButtonText
la couleur du système et sa Couleur de l'arrière plan et les quatre couleur de la bordures sont réglés sur la couleur du système
ButtonFace.
Couleur de l'arrière plan et les diverscouleur de la bordures sont établis dans le ButtonFacecouleur du système.
Maintenant, remarquez comment le éléments couleur de la bordure changements. Les calculé valeur pour lui border-top-color et le border-bottom-color
changement de rgba (0, 0, 0, 0,847) (noirâtre) à rgba (255, 255, 255, 0,847) (blanc cassé), au fur et à mesure que l'agent utilisateur se met à jour ButtonFace dynamiquement basé sur la palette de couleurs. Il en va de même pour le éléments Couleur
qui est réglé sur la couleur système correspondante ButtonText.
border-top-coloret le
border-bottom-color qui sont configurés pour ButtonFacedans la feuille de style de l'agent utilisateur sont maintenant
rgba (0, 0, 0, 0,847).
border-top-coloret le
border-bottom-color qui sont configurés pour ButtonFacedans la feuille de style de l'agent utilisateur sont maintenant
rgba (255, 255, 255, 0,847).Manifestation
Vous pouvez voir les effets de Schéma de couleur appliqué à un grand nombre d'éléments HTML dans un Démo Glitch. La démo délibérément montre WCAG AA et WCAG AAA
violation
avec les couleurs des liens mentionnés dans l'avertissement ci-dessus.
Les manifestation
alterné à jeu de couleurs: clair.
Les manifestation
alterné à jeu de couleurs: foncé. Veuillez noter les WCAG AA et WCAG AAA
violation
avec les couleurs du lien.
Merci
Les Schéma de couleur La propriété CSS et la balise Meta correspondante ont été implémentées par
Rune de Lillesveen. Rune est également co-éditeur de la spécification de niveau 1 du module de réglage des couleurs CSS. Image de héros de
Philippe Leone
au Unsplash.
