Comment l'indicateur « i » permet-il la correspondance d'attributs insensibles à la casse en CSS ?

Correspondance d'attributs insensibles à la casse avec "i" dans les sélecteurs d'attributs CSS

Dans le contexte des sélecteurs d'attributs CSS, une question s'est posée concernant la signification de la lettre "i" dans un code extrait :

[type="checkbox" i]

Réponse :

Le "i" ajouté à la valeur d'attribut "case à cocher" indique une correspondance d'attribut insensible à la casse. Il s'agit d'une fonctionnalité introduite dans les sélecteurs CSS niveau 4 qui permet une correspondance plus flexible et plus inclusive des attributs des éléments.

Prise en charge du navigateur :

Cette fonctionnalité est actuellement prise en charge. dans :

• Chrome 49
• Firefox 47
• Safari 9
• Opera 37 (et potentiellement versions antérieures)

Démonstration :

Voici un exemple de code pour illustrer le fonctionnement de l'attribut insensible à la casse matching :

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

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

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

Green if supported, red if not:

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

Si votre navigateur prend en charge la correspondance d'attributs insensible à la casse, l'exemple d'élément aura un fond vert. Sinon, il aura un fond rouge.

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!