Comment obtenir des styles de mise au point uniquement au clavier sans affecter l'esthétique visuelle ?

Obtention de styles de focus pour le clavier uniquement

Vous souhaitez désactiver :focus lorsque cela n'est pas nécessaire, car cela entre esthétiquement en conflit avec l'état actif. Cependant, vous souhaitez conserver les styles de focus pour les utilisateurs de clavier. Voici une approche globale pour résoudre ce problème :

La solution :focus-visible

Envisagez d'utiliser :focus-visible, une pseudo-classe qui indique la concentration lorsqu'elle est bénéfique pour le l'utilisateur, par exemple lors d'une interaction au clavier. Les navigateurs modernes prennent désormais en charge cette pseudo-classe.

En utilisant :focus-visible, vous pouvez appliquer des styles de focus de manière conditionnelle :

<code class="css">button:focus-visible {
  /* remove default focus style */
  outline: none;
  /* custom focus styles */
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

Compatibilité des navigateurs

Les navigateurs sans prise en charge de :focus-visible peuvent toujours afficher les bagues de mise au point par défaut. Pour garantir un comportement cohérent, utilisez une stratégie de secours :

<code class="css">button:focus {
  outline: none;
  background: #ffdd00; /* gold */
}

button:focus:not(:focus-visible) {
  background: white; /* undo gold */
}</code>

Styles de focus sur le clavier uniquement

Pour une solution de style de focus sur le clavier uniquement, envisagez d'utiliser cette approche :

<code class="css">button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

Cette méthode utilise un élément interne () dans chaque bouton/lien/etc. et définit le tabindex pour cet élément interne. Les styles de focus sont appliqués uniquement à l'élément interne, garantissant qu'ils apparaissent uniquement sur le focus du clavier.

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!