Explication détaillée de l'utilisation de focus-within

Cette fois, je vais vous donner une explication détaillée de l'utilisation de focus-within. Quelles sont les précautions lors de l'utilisation de focus-within. Voici des cas pratiques, jetons un coup d'œil.

Le monde du CSS est vraiment un monde magique. De nombreux développeurs front-end ont peut-être entendu parler de :focus mais pas de :focus-within. Alors qu'est-ce que c'est que :focus-within ? Dans cet article, nous parlerons de :focus-within.

:Qu'est-ce que focus-within

En CSS : focus-within est une pseudo-classe, qui a désormais été incluse dans le Sélecteur CSS Moyen (sélecteur CSS niveau 4). C'est comme si vous connaissiez :focus ou :hover . :focus-within est très pratique pour gérer l’état du focus. Les éléments de la pseudo-classe :focus-within sont efficaces lorsque l'élément lui-même ou l'un de ses descendants a le focus.

Si le texte est difficile à comprendre, regardons d'abord un exemple simple :

<p class="form-group">
    <label for="email">
        Your email:
    </label>
    <input type="email" name="email" id="email" placeholder="Enter your email address"/>
</p>

Ce qui précède est un formulaire simple avec un contrôle de formulaire de saisie.

.form-group *:focus {
    background: yellow;
    color: #000;
}
.form-group {
    padding: 10px;
    border: 3px solid transparent
}
.form-group:focus-within {
    border-color: #000;
}

Dans l'exemple ci-dessus, lorsque .form-group obtient le focus, la couleur de la bordure est remplacée par #000. Mais cela ne signifie pas recevoir le focus clavier, car

n'obtient pas nécessairement le focus clavier et tabindex n'est pas défini. Ou si le lien ou l'élément d'entrée dans p reçoit le focus, alors l'élément .form-group changera la couleur de la bordure.

En voyant l’exemple ci-dessus, vous ne trouvez pas que c’est incroyable ? Pour obtenir des effets similaires dans le passé, nous devions utiliser des scripts JavaScript. Via les événements de souris ou de clavier des éléments descendants de .form-group, puis ajoutez le style correspondant à son élément parent (ou élément ancêtre).

 : Scénarios d'utilisation de focus-within

:focus-within est très puissant, principalement parce que la pseudo-classe sera activée lorsque l'un de ses éléments obtient le focus. Utilisez cette pseudo-classe avec prudence lorsque l'élément contient de nombreux sous-composants.

Avec :focus-within, certains comportements interactifs courants sont devenus très simples, en particulier les comportements interactifs qui nécessitaient auparavant des événements de clavier JavaScript, nous pouvons utiliser :focus-within à la place.

Ensuite, regardons quelques exemples courants de :focus-within.

Mise en surbrillance des lignes du tableau

Un exemple courant est le comportement de la mise en surbrillance des lignes du tableau, c'est-à-dire que lorsque la souris survole les lignes du tableau, la couleur devient mis en évidence. Ce style interactif peut aider les utilisateurs malvoyants à mieux lire un tableau complexe ou un formulaire long. Grâce à la mise en évidence, ces utilisateurs peuvent plus facilement suivre la ligne du tableau qu'ils sont en train de lire. La méthode qui était souvent implémentée dans le passé consistait à utiliser :hover pour modifier le style des lignes du tableau. Cette solution est une tâche facile pour les utilisateurs normaux, mais si vos utilisateurs ont des difficultés à utiliser la souris, alors :hover C'est un peu pénible. Si vous recherchez la perfection, vous pouvez ajouter des styles aux lignes du tableau via des événements de clavier JavaScript.

Avec :focus-within, on peut dire adieu à JavaScript. Nous pouvons le styliser comme ceci :

L'exemple ci-dessus montre comment utiliser :focus-within pour mettre en évidence une ligne entière d'un tableau. S'il existe un élément disponible qui peut obtenir le focus dans une ligne particulière du tableau, cela fait référence à l'obtention du focus via le clavier. Par exemple, dans l'exemple ci-dessus, il y a un élément dans le tableau. Vous savez, l'élément a peut obtenir le focus via le clavier.

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}

Menu déroulant

Le Le menu déroulant est notre composant Web le plus populaire. Lorsque j'ai vu pour la première fois la pseudo-classe :focus-within, le premier cas d'utilisation qui m'est venu à l'esprit était celui des menus déroulants.

Dans l'exemple ci-dessus, JavaScript est utilisé pour suivre le focus clavier de l'utilisateur dans un menu déroulant de navigation. Si JavaScript détecte que le focus clavier est sur un lien, ajoutez une classe .has-focus à .navlist_drop. Lorsque li a la classe .has-focus, ses éléments enfants seront affichés, c'est-à-dire que le menu déroulant sera affiché.

Pour cet effet, nous pouvons remplacer directement la fonction du script JavaScript via :focus-within. Utilisez .navlistdrop:focus-within au lieu de .navlistdrop.has-focus . Les menus déroulants apparaissent lorsque vous manipulez le clavier pour donner le focus à un élément de menu déroulant.

.navlist a:focus + .navlistdrop,
.has-drop:hover .navlistdrop,
.navlistdrop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

Navigation hors écran

La navigation hors écran est un effet courant sur les terminaux mobiles. Ensuite, nous pouvons également obtenir cet effet via :focus-within. Pour le code détaillé, veuillez consulter l'exemple suivant :

Compatibilité des navigateurs

:focus-within Bien que ce soit intéressant, de nombreux étudiants s'inquiètent de sa compatibilité. Grâce à Caniuse, nous pouvons voir la prise en charge du navigateur :

Résumé

Ce n'est pas surprenant si vous connaissez :focus, mais vous savez :focus-within Si , cela signifie que vous êtes constamment attentif aux nouvelles fonctionnalités liées au CSS. Bien sûr, cette propriété a encore rafraîchi le monde du CSS, ce qui est vraiment bizarre. Si vous êtes intéressé, écrivez simplement la démo vous-même. Vous allez adorer cette propriété.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

animation de dégradé de texte CSS3

css3 créant un arc semi-circulaire

Comment utiliser la disposition autocollant-pied de page en CSS

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!