Standardisant les styles de mise au point avec les propriétés personnalisées CSS

Testez rapidement votre projet: ouvrez votre navigateur, utilisez uniquement la clé de l'abat et essayez de naviguer entre des éléments interactifs tels que des boutons, des liens et des éléments de formulaire.

Si vous êtes un utilisateur avec une vision normale, vous devriez être en mesure de voir les changements visuels lorsque la focalisation saute entre les éléments DOM. Mais s'il n'y a pas de changement visuel ou si le changement est minime, vous pouvez trouver un moyen de faire une énorme différence pour vos visiteurs.

Cet article introduira une technique pour gérer plus efficacement les styles de mise au point du projet à l'aide de propriétés personnalisées CSS et apprendre les sélecteurs de mise au point CSS modernes. Tout d'abord, comprenons pourquoi les styles de mise au point visibles sont si importants.

Rencontrez les normes de style WCAG Focus

Le statut de mise au point visible est conforme aux directives de réussite sur l'accessibilité du contenu Web (WCAG) Standard 2.4.7 - La mise au point est visible. Le document "de compréhension" au 2.4.7 indique l'intention de cette norme:

Le but de ce critère de réussite est d'aider l'utilisateur à comprendre quel élément a une mise au point du clavier. Il doit être en mesure de faire savoir à l'utilisateur quel élément de plusieurs éléments a une mise au point du clavier.

Dans le prochain WCAG 2.2, une nouvelle norme sera ajoutée pour clarifier «à quel point l'indicateur de mise au point devrait être évident». Bien que toujours au stade du projet, se familiariser avec et l'application du guide en 2.4.11 - l'apparence de mise au point (minimum) est sans aucun doute une étape active pour améliorer les styles de mise au point que vous pouvez prendre aujourd'hui.

Gérer les styles de mise au point avec les attributs personnalisés CSS

Une technique que j'ai commencé à utiliser cette année consiste à inclure les paramètres suivants le plus tôt possible sur les principaux éléments de base interactifs de ma feuille de style en cascade:

 <code>:is(a, button, input, textarea, summary) { --outline-size: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor; } :is(a, button, input, textarea, summary):focus { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

Cela attache des propriétés personnalisées, vous permettant de personnaliser de manière flexible certaines parties du style de contour selon les besoins pour vous assurer que l'accent reste visible lorsque le contexte de l'élément change.

Pour --outline-size , nous utilisons max() pour assurer une valeur d'au moins 2px tout en permettant une mise à l'échelle basée sur 0.08em basée sur des composants (par exemple, de gros boutons ou des liens dans le titre).

La propriété que vous ne connaissez peut-être pas ici est outline-offset , qui définit l'espace entre l'élément et le contour. Vous pouvez même fournir un nombre négatif pour intégrer le contour, ce qui est très utile pour assurer le contraste du style de mise au point. Dans notre ensemble de règles, nous définissons cette propriété pour accepter une propriété personnalisée en option --outline-offset afin qu'elle puisse être personnalisée si nécessaire, sinon elle se repliera pour correspondre à --outline-size .

Amélioration de l'apparence des contour

Au cours de ma carrière, on m'a demandé de supprimer les contours et j'ai également supprimé moi-même les contours parce qu'ils sont considérés comme «disgracieux».

Il y a maintenant deux raisons pour lesquelles le contour ne devrait jamais être supprimé (sauf pour les effets d'accessibilité):

1. Dans Chromium et Firefox, outline suit désormais border-radius ! box-shadow
2. Avec :focus-visible , nous pouvons demander au navigateur d'utiliser une heuristique pour afficher le style de mise au point que lorsqu'un modèle d'entrée nécessitant une mise au point visible est détecté. En bref, cela signifie que l'utilisateur de la souris ne les verra pas lorsqu'il est cliqué et que l'utilisateur du clavier les verra toujours lorsque les touches d'onglet fonctionnent.

Il convient de noter que les éléments de forme affichent toujours les styles de mise au point - ils ne sont pas limités par :focus-visible .

Améliorons donc notre ensemble de règles, ajoutant ce qui suit pour inclure :focus-visible . Nous garderons le style initial :focus que nous avons défini pour l'ancien navigateur au cas où il ne sera pas perdu.

 <code>:is(a, button, input, textarea, summary):focus-visible { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

En raison de la façon dont les navigateurs gèrent les sélecteurs qu'ils ne comprennent pas, nous devons séparer ces règles, même s'ils définissent les mêmes propriétés de contour, nous ne pouvons pas les combiner ensemble.

Enfin, nous avons également besoin de cette règle d'aspect étrange :focus:not(:focus-visible) , qui supprime le style de mise au point régulier pour les navigateurs qui soutiennent :focus-visible :

 <code>:is(a, button, input, textarea, summary):focus:not(:focus-visible) { outline: none; }</code>

Il convient de noter que les dernières versions de Chromium et de Firefox sont passées à l'utilisation :focus-visible comme moyen par défaut d'appliquer les styles de mise au point sur les éléments interactifs et ont récemment été activés comme moyen par défaut de WebKit, donc il devrait arriver bientôt en version stable Safari! Nos règles sont toujours valables car nous personnalisons l'apparence de contour.

Pour plus de conseils sur les styles de mise au point visibles, je recommande le guide merveilleux et complet de Sara Soueidan sur les indicateurs de mise au point, car il prend en compte la prochaine norme 2.4.11.

Démonstration de style de mise au point

Cet exemple démontre chacun de ces éléments interactifs et comment appliquer des paramètres personnalisés à l'aide de propriétés personnalisées, y compris certaines modifications en mode sombre. Selon la prise en charge de votre navigateur, vous ne verrez peut-être pas le style de mise au point à moins que vous n'utilisiez la touche de tabulation, car :focus-visible est utilisé.

Dernière chose: en termes de styles de mise au point, button est un élément interactif unique car il a des considérations supplémentaires entre ses états, surtout si vous comptez uniquement sur les couleurs. Pour obtenir de l'aide, essayez d'utiliser le générateur de palettes dans mon projet ButtonBuddy.dev.

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!