web-dev-qa-db-fra.com

A: solution de contournement focalisée pour le bord

J'utilise actuellement le pseudo sélecteur: focus-within in chrome cependant selon caniuse.com il n'est pas disponible dans Edge et IE, j'ai trouvé un bon solution sur codepen pour cela:

.focus-within-class > input:focus

Cependant, il le combine avec un focus interne comme:

.focus-within > input:focus,
.focus-within:focus-within > input

ne fonctionne pas dans Edge et la solution suivante ne fonctionne pas dans Chrome:

.focus-within > input:focus

Comment puis-je créer un focus sur le navigateur croisé?

cssgoogle-chromecss-selectorsmicrosoft-edge
7
Joss Bird

Quelques choses. Tout d'abord, la "solution de contournement" que vous citez n'est pas vraiment équivalente à :focus-within car les règles résultantes s'appliquent à <input> élément. Vous pourriez tout aussi facilement le faire

input:focus {
    /* rules here */
}

sans se soucier des classes spéciales. Le vrai :focus-within les pseudo-classes vous permettent de définir des règles qui s'appliquent à l'élément contenant, pas le <input>

Mais si la solution de contournement particulière vous est utile, vous devrez diviser vos règles en blocs distincts. C'est parce que les navigateurs ignorent silencieusement tout CSS qu'ils ne comprennent pas. Donc, quand Edge voit

.focus-within > input:focus,
.focus-within:focus-within > input

il remarque qu'il existe une pseudo-classe qu'il ne comprend pas (:focus-within), il ignore donc tout le bloc de règles, comme vous l'avez remarqué. Si vous divisez les règles en deux blocs, Edge ignorera uniquement le bloc qu'il ne comprend pas.

.focus-within > input:focus {
    /* rules here, which Edge will apply */
}

.focus-within:focus-within > input
    /* same rules here, which Edge will ignore */
}
13
Stephen Thomas