Explication de l'utilisation spécifique de CSS :focus-within

Cet article présente principalement des informations pertinentes sur l'utilisation spécifique de CSS :focus-within, qui a une certaine valeur de référence.

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 (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 formulaire de saisie contrôles.

.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 e388a4556c0f65e1904146cc1a846bee 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 long tableau. 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 3499910bf9dac5ae3c52d5ede7383485 dans le tableau. Vous savez, l'élément a peut obtenir le focus via le clavier.

À ce stade, il vous suffit d'ajouter le style :

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

Menu déroulant

Menu déroulant Est l'un de nos composants Web les plus couramment utilisés. 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 à .nav__list_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 .nav__list__drop:focus-within au lieu de .nav__list__drop.has-focus . Un menu déroulant apparaît lorsque vous manipulez le clavier pour donner le focus à un élément du menu déroulant.

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop: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é, pourquoi ne pas écrire la démo vous-même. Vous allez adorer cette propriété.

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!