Comme vous le savez peut-être, il existe trois pseudo-classes similaires dans CSS, à savoir: focus ,: Focus-visible, et: focus-within.
Au premier coup d'œil, on peut être confus quant à la différence entre ceux-ci et quand utiliser lequel. La bonne nouvelle est: ces trois pseudo-classes sont extrêmement simples à comprendre et à se distinguer les unes des autres.
Dans cet article, nous comprendrons ce qu'est exactement: Focus ,: Focus-visible, et: focus-within, et quand et comment utiliser chacun de ces pseudo-classes.
Lire plus approfondie:
Si vous avez besoin d'un rafraîchissement sur les pseudo-classes, passez aux cours de pseudo CSS du chapitre, dans notre cours CSS.
Tout d'abord, le : focus pseudo-classe s'applique à un élément quand il est focalisé .
Cette orientation peut être réalisée à l'aide de la souris (lorsque nous cliquons sur l'élément), le clavier (lorsque nous y naviguons en appuyant sur l'onglet), ou le programme sous-jacent (lorsque nous utilisons JavaScript).
Lire plus approfondie:
Vous pouvez explorer le: Focus pseudo-classe en détail dans CSS Pseudo Classes :: Focus.
De plus, seuls des éléments focalisés sont autorisés à recevoir une concentration et, par conséquent, à faire l'objet de: Focus. Ce sont généralement des éléments interactifs dans HTML - comme & lt; entrée & gt;, & lt; textarea & gt;, & lt; Button & gt;, et ainsi de suite.
? Remarque : Éléments non interactifs tels que & lt; p & gt;, & lt; h1 & gt;, & lt; blockquote & gt;, & lt; code & gt;, etc., ne sont pas focalisés et ne peuvent donc pas faire l'objet de: focus. Ce n'est que si nous les rendons explicitement focalisés, en définissant l'attribut tabindex sur eux, que nous pouvons nous attendre: Focus s'appliquer à eux.
Retour à: Focus, cette pseudo-classe est utilisée pour sélectionner et, par la suite, appliquer des styles aux éléments lorsqu'ils sont à l'état ciblé.
Peut-être, l'exemple le plus naïf de cela serait de considérer un champ d'entrée comme démontré ci-dessous:
<label> <span>Name</span> <input type="text" name="name"> </label>
Exemple en direct
Au moment où nous cliquons sur le champ de saisie, il reçoit une concentration et, par conséquent, le navigateur lui applique un contour noir, comme illustré ci-dessous:
Cela nous aide immédiatement à voir dans quelle entrée nous sommes actuellement dans la forme de nombreux champs d'entrée.
pour mieux apprécier les avantages de cela, imaginez le contraire. Supposons que nous cliquons sur un champ de saisie et n'avons aucun style spécial appliqué au champ comme nous le faisons.
Que pensez-vous, serait-il possible pour nous de déterminer dans quelle entrée sommes-nous actuellement? Eh bien, il ne sera clairement pas impossible de le faire, mais pas aussi rapide non plus.
La chose idéale dans la conception des interfaces utilisateur de toute nature est de 'Rendre tout aussi facile que possible.' Et dans ce cas, ce monde idéal peut très facilement être réalisé simplement en utilisant le: Focus Pseudo -classe.
Essentiellement:
La pseudo-classe: Focus (même les deux autres pseudo-classes) nous aide à améliorer améliorer l'accessibilité d'une page Web.
En communiquant clairement à l'utilisateur visuellement quant à l'endroit où il se trouve actuellement sur la page Web, nous facilitons la tâche de l'interagir avec la page Web et de faire son travail sans aucune confusion.
En d'autres termes, le focus est plus important d'une pseudo-classe que nous ne le pensons.
mais ce n'est pas la seule pseudo-classe importante basée sur la mise au point; Nous avons : Focus-visible aussi.
Dans l'exemple ci-dessus pour: Focus, nous avons considéré un champ de base de texte de base. Passons maintenant à un bouton afin de voir une lacune de: focus.
Considérez le bouton suivant, avec la règle de mise au point ajoutée:
<label> <span>Name</span> <input type="text" name="name"> </label>
<button>A button</button>
Exemple en direct
Au moment où nous cliquons sur le bouton, nous obtenons le contour bleu souhaité, comme illustré ci-dessous:
Mais attendez une seconde? Ce désir de nous est-il souhaitable?
a dit une autre façon: est-ce une sage décision de présenter le contour lorsque nous cliquons sur le bouton à l'aide de la souris? Il s'avère, non, ce n'est pas!
Comprenons pourquoi ...
Lorsque nous cliquons sur un bouton - ou tout élément interactif, en général, qui est destiné à effectuer une action , pour par exemple Un lien - nous savons déjà où nous sommes sur la page Web. De toute évidence, parce que nous cliquons consciemment sur le bouton, nous ne pouvons certainement pas être confus quant à quel élément de la page Web se concentre actuellement - nous savons clairement que c'est le bouton que nous venons de cliquer qui a le foyer actuellement.
À cet égard, cela n'a pas beaucoup de sens, le cas échéant, pour souligner visuellement le bouton pour être l'élément actuellement ciblé.
Mais pourquoi cela a du sens pour les champs d'entrée?
bonne question. Vous avez raison dans votre observation: la mise au point fonctionne très bien lorsque nous l'utilisons sur les champs d'entrée et qu'il y a une raison simple à cela. Lorsque nous cliquons sur un champ de saisie à l'aide de la souris, notre travail ne termine pas ; Nous devons encore saisir des données dans le champ.
et parce que notre travail n'est pas encore terminé, nous avons rapidement et clairement besoin de savoir quelle entrée est actuellement active.
Plus important encore, remarquez la distinction importante, mais subtile, entre les champs d'entrée et les boutons (et d'autres éléments interactifs tels que):
Ainsi, à ce stade, nous savons que les champs d'entrée gel bien avec la pseudo-classe: ce n'est pas le cas avec les boutons.
Mais gardez à l'esprit que ce raisonnement ne s'applique que lorsque nous interagissons avec ces éléments à l'aide de la souris. Que se passe-t-il lorsque nous passons à un clavier?
Découvrons ...
Comme vous le savez peut-être, il n'est pas seulement possible de naviguer autour d'une page Web à l'aide de la souris; Nous pouvons également utiliser le clavier pour cela, et tout aussi bien .
En fait, si une page Web est construite de cette façon pour ne divertir que les interactions de la souris, elle est extrêmement inaccessible.
Imaginez que quelqu'un a cassé son appareil de souris et veut maintenant se préparer à son examen, et qu'il n'y a aucun moyen d'en commander un autre pour le moment. Le pire des cas serait si cette personne voulait se préparer à partir d'un site Web construit uniquement autour des interactions de souris.
En tant que développeurs CSS, nous devons reconnaître que les sites Web de faits et de conception sont aussi accessibles sans souris qu'avec lui. À cet égard, nous devons nous assurer de fournir un accent visuel nécessaire sur les éléments interactifs lorsqu'ils reçoivent une concentration.
Et cela comprend maintenant aussi des boutons.
Indiquons à nouveau cela.
Lorsque nous utilisons la souris pour interagir avec une page Web, la création d'accessoires visuels pour les boutons (et les éléments similaires) dans leur état ciblé n'est pas nécessaire; En fait, c'est indésirable comme nous l'avons vu ci-dessus. En effet
Mais lorsque nous utilisons le clavier à la place,La création de l'accent visuel est le plus nécessaire . En effet,, maintenant, l'utilisateur ne sait pas quel élément interactif est mis au point. Nous BESOIN pour la présenter visuellement.
Le problème est que nous ne pouvons pas utiliser: Focus pour cette préoccupation de style parce que ...bien ... il s'applique à Button même lorsque nous interagissons avec eux en utilisant la souris.
maintenant quoi?
Pas besoin de s'inquiéter, car nous avons: Focus-visible à la rescousse!
'naming' ). Il y a de fortes chances que la signification réside dans le nom lui-même.
Suivant cela, si nous analysons le nom: Focus-visible, cela a clairement quelque chose à voir avec'focus' mais aussi quelque chose à voir avec 'visible' .
pouvez-vous comprendre juste par le nom ce que signifie cette pseudo-classe?
Eh bien,: Focus-Visible s'applique à un élément qui est au foyer et dont la mise au point doit être rendue visible (idéalement). Compactage, nous pourrions également dire que: Focus-Visible s'applique à un élément qui devrait avoir son Focus visible .
: Le focus-visible n'apparaît que lorsque nous apportons un élément au foyer en utilisant le clavier, ou une autre interaction non souris (pour par exemple en utilisant JavaScript).
Plus important encore - et c'est vraiment vraiment important - : La concentration ne s'applique pas aux boutons (et à ces éléments) lorsqu'ils reçoivent la focalisation en vertu des interactions de souris .
Avec cela, revenons à notre & lt; bouton & gt; Exemple ci-dessus et remplacer la règle: Focus par: Focus-visible afin que le contour ne soit présenté que lorsque le bouton reçoit Focus via le clavier:
<label> <span>Name</span> <input type="text" name="name"> </label>
Exemple en direct
Voici ce que nous obtenons lorsque nous cliquons sur le bouton (en utilisant la souris):
rien.
Mais lorsque nous appuyons sur la touche Tab afin de naviguer vers le bouton et de le mettre au point, nous obtenons le même contour qu'avant:
Cela nous amène juste à la conclusion ultime que lorsque vous coiffez les boutons (ou d'autres éléments de même, pour par exemple & lt; a & gt;), nous devons de préférence utiliser: la concentration-visible au lieu de: focus (pour les raisons que nous avons vues ci-dessus).
: Le focus-visible est essentiellement une situation gagnant-gagnant en ce que (a) nous n'appliquons pas les styles lorsque les boutons sont cliqués, et donc concentrés, en utilisant la souris et (b) nous nous assurons que notre page Web reste accessible Lorsque vous utilisez le clavier avec les styles de mise au point nécessaires sur les boutons.
: Le focus-visible est un héros! (Mais je ne connais pas le nom du film!)
Évidemment, nous ne pouvions pas mettre fin à cet article sans passer en revue le moins utile : focus-within pseudo-classe. Faisons ça maintenant.
: focus-within, comme son nom l'indique ( N'oubliez pas de lire les noms avec soin ), s'applique à un élément qui a focus inverse .
.En d'autres termes, tout élément qui contient un élément descendant qui correspond: la mise au point, ou elle-même, correspond à: Focus, est un candidat pour: focus-within.
Ce qui suit est un exemple:
<button>A button</button>
Nous avons un bouton contenu dans A & lt; div & gt;. Notre objectif est de coiffer le & lt; div & gt; Surtout lorsque son bouton est mis au point. Le CSS suivant accomplit ceci:
button:focus {
outline: 3px solid blue;
}
Exemple en direct
au moment où le bouton reçoit la focalisation, le & lt; div & gt; obtient une couleur de fond rose.
assez basique.
? Remarquez : Gardez à l'esprit que: Focus-Within se comporte exactement comme: Focus en ce qu'il apparaît également sur les interactions de souris sur les boutons, par exemple. Il ne présente pas de comportement similaire à: Focus-visible.
Maintenant, vous cherchez peut-être un exemple plus pratique de: Focus-Within et c'est précisément ce que j'ai ensuite pour vous.
Comme indiqué précédemment ,: Focus-Within n'est pas très utilisé dans le CSS, mais certains cas sont tels qu'ils peuvent être résolus assez élégamment en utilisant: focus-within. Lisez la suite pour en savoir plus sur un tel cas.
Supposons que nous ayons une barre d'accessibilité sur un site Web qui n'apparaît que lors de l'utilisation de la navigation au clavier. Initialement, il est caché mais seulement visuellement; Autrement dit, il est possible d'adapter l'un des boutons à l'intérieur de cette barre.
? Remarquez : 'caché uniquement visuellement' signifie que l'élément n'a pas d'affichage: aucune ou la visibilité: un réglage caché pour le cacher autrement. Par exemple, Opacity: 0 cache un élément visuellement.
Maintenant, au moment où l'un des boutons de cette barre d'accessibilité se concentre, il est nécessaire de présenter cette barre à l'utilisateur.
Mais comment sélectionner la barre d'accessibilité lorsque l'un ou l'autre de ses boutons a une orientation? Eh bien, en supposant que la barre peut être sélectionnée par le sélecteur de classe .a11y-bar ( 'a11y' est une forme courte pour 'accessibilité' ), le sélecteur souhaité serait .a11y-bar: focus-within.
.a11y-bar: Focus-Within sélectionne la barre .a11y chaque fois que Focus réside en lui, ce qui est exactement ce dont nous avons besoin.
bon travail!
Le lien ci-dessous démontre cet exemple:
Exemple en direct
malgré le fait que nous avons couvert presque tout ce que nous devons savoir: Focus ,: Focus-visible, et: focus-within, il y a toujours de la valeur à lire à partir de certaines ressources comme mentionné ci-dessous:
Si vous êtes un débutant en CSS et que vous voulez bien apprendre les bases, considérez le cours CSS sur CodeGuage.
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!
Quelle est la raison de l'échec de la résolution DNS ?
méthode de configuration de Nagios
Comment flasher le téléphone Xiaomi
Quelle est la différence entre l'écran d'origine et l'écran assemblé ?
emplacement.recherche
Quels sont les logiciels antivirus ?
Quelles versions du système Linux existe-t-il ?
Que fait Matcha Exchange ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
