Explorer Color-Contrast () pour la première fois

J'ai vu dans les notes de publication pour safari technique Aperçu 122 qu'il a pris en charge une fonction couleur-contraste () dans CSS. Safari est le premier de la porte ici. Pour autant que je sache, aucun autre navigateur ne le prend en charge et je n'ai aucune idée du moment où safari stable l'expédiera, ou si un autre navigateur le fera jamais. Mais! C'est une très bonne idée! Tout outil natif pour nous amener à expédier des interfaces plus accessibles (dont le contraste de couleur est une partie) est cool par moi. Alors essayons de le faire fonctionner.

Tout le monde peut télécharger safari Aperçu technique, donc je l'ai fait.

J'ai dû poser des questions à ce sujet, mais ce n'est pas parce qu'il s'agit d'un navigateur préalable à la libération, cela ne signifie pas que toutes ces fonctionnalités sont actives par défaut. Tout comme Chrome Canary a des drapeaux de fonctionnalité, vous devez vous activer, il en va de même pour Safari Technical Aperçu. Donc, j'ai dû le retourner comme ceci:

Les notes de publication n'ont aucune information sur la façon d'utiliser réellement Color-Contrast (), mais heureusement, la recherche sur le Web monte une spécification (elle fait partie du module de couleur 5), et MDN a une page pour elle avec des informations de syntaxe très basiques.

C'est ainsi que je comprends:

Cet exemple ci-dessus est un peu idiot, car il reviendra toujours blanc - qui a le plus de contraste avec le noir. Cette fonction devient réellement utile lorsqu'une ou plusieurs de ces valeurs de couleur sont dynamiques , ce qui signifie que c'est très probablement une propriété CSS personnalisée.

La fonction renvoie une couleur, donc le cas d'utilisation supérieur, je suppose, va définir une couleur basée sur un arrière-plan dynamique. Donc…

 section {
  Contexte: var (- bg);
  Couleur: Color-contraste (var (- bg) vs blanc, noir);
}

Maintenant, nous pouvons lancer n'importe quelle couleur à --BG et nous aurons du texte blanc ou noir, selon ce qui a le plus de contraste:

C'est extrêmement cool, même dans le cas d'utilisation le plus élémentaire.

Voici une démo de Dave où il ne définit pas seulement la couleur du texte dans le parent, mais aussi la couleur des liens, et les liens ont un ensemble différent de couleurs à choisir. Jouez avec les curseurs HSL (dans Safari Technology Preview, bien sûr) pour le voir fonctionner.

Il est assez facile de choisir deux couleurs qui ont un contraste suffisant (bien que vous soyez surpris de la fréquence à laquelle il est foutu par ceux d'entre nous avec de bonnes intentions). Mais oh wow, cela se complique rapidement avec des situations différentes, et encore moins d'avoir un tas de variations de couleur, ou Dieu ne plaise pas, des combinaisons arbitraires.

Voici une vidéo de moi en jouant avec le testeur de Dave afin que vous puissiez voir comment les couleurs se mettent à jour à différents endroits.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!