Que fait le modificateur \'i\' dans les sélecteurs d'attributs CSS ?

Dévoilement de l'énigme du "i" dans les sélecteurs d'attributs CSS

Dans le domaine du CSS, la lettre énigmatique "i" a a émergé au sein des sélecteurs d’attributs, laissant beaucoup de personnes perplexes. Pour percer son mystère, explorons son objectif et découvrons l'importance qu'il apporte au style Web.

Qu'est-ce que « i » dans un sélecteur d'attribut CSS ?

Le modificateur "i" dans un sélecteur d'attribut CSS signifie une correspondance d'attribut insensible à la casse. Cette fonctionnalité, introduite dans CSS Selectors Level 4, permet une flexibilité dans la correspondance des attributs HTML quelle que soit leur capitalisation.

Comment ça marche ?

Considérez les extrait de code suivant :

[type="checkbox" i]

Ce sélecteur correspondrait à tous les éléments d'entrée de case à cocher, que leur L'attribut 'type' est en majuscule, en minuscule ou dans un mélange des deux. En d'autres termes, il ferait correspondre les éléments avec les attributs 'type="Checkbox"', 'type="cHeCkBoX"', etc.

Contexte historique et disponibilité

La correspondance d'attributs insensible à la casse a été initialement introduite dans les styles d'agent utilisateur de Chrome, mais pourrait ensuite être activée pour le contenu Web grâce à des fonctionnalités expérimentales. drapeaux. Depuis, il est largement pris en charge dans les navigateurs modernes, notamment Chrome 49 , Firefox 47 , Safari 9 et Opera 37 *.

Exemple et test de navigateur

Pour démontrons la fonctionnalité, considérons un sélecteur qui définit une couleur d'arrière-plan verte pour les éléments avec l'attribut 'data-test="a"' ou 'data-test="A"'.

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Si ce code est appliqué au HTML suivant :

<div data-test="A"></div>

L'élément résultant aura un fond vert s'il n'est pas sensible à la casse la correspondance d'attributs est prise en charge dans le navigateur et rouge sinon.

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!