J'ai trouvé le sélecteur CSS suivant dans la feuille de style de l'agent utilisateur de Google Chrome:

[type="checkbox" i]

Qu'est-ce que cela isignifie?

Comme mentionné dans les commentaires, c'est pour la correspondance d'attributs insensible à la casse. Il s'agit d'une nouvelle fonctionnalité dans CSS Selectors Level 4.

Actuellement, il est disponible dans Chrome 49+, Firefox 47+, Safari 9+ et Opera 37+ *. Auparavant, il n'était disponible que dans les styles d'agent utilisateur Chrome à partir de Chrome 39, mais pouvait être activé pour le contenu Web en définissant l'indicateur des fonctionnalités expérimentales.

* Les versions antérieures d'Opera peuvent également le prendre en charge.

Exemple de travail / Test du navigateur:

[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>

Le carré ci-dessus sera vert si le navigateur prend en charge cette fonctionnalité, rouge si ce n'est pas le cas.

Il s'agit de l'indicateur insensible à la casse pour les sélecteurs d'attributs, introduit dans les sélecteurs 4 . Apparemment, ils ont introduit une implémentation de cette fonctionnalité dans Chrome dès août 2014.

En un mot: cet indicateur indique au navigateur de faire correspondre les valeurs respectives de l' typeattribut sans tenir compte de la casse. Le comportement de correspondance du sélecteur par défaut pour les valeurs d'attribut en HTML est sensible à la casse , ce qui n'est souvent pas souhaitable car de nombreux attributs sont définis pour avoir des valeurs insensibles à la casse, et vous voulez vous assurer que votre sélecteur sélectionne tous les bons éléments quelle que soit la casse. typeest un exemple d'un tel attribut, car il s'agit d'un attribut énuméré , et les attributs énumérés sont censés avoir des valeurs insensibles à la casse .

Voici les commits pertinents:

• 179370 - mise en œuvre
• 179401 - modifications des feuilles de style UA comme indiqué dans la capture d'écran de la question

Notez qu'il est actuellement masqué dans l'indicateur "Activer les fonctionnalités expérimentales de la plate-forme Web", auquel vous pouvez accéder à l'adresse chrome: // flags / # enable-experimental-web-platform-features. Cela pourrait expliquer pourquoi la fonctionnalité est passée en grande partie inaperçue - les fonctionnalités cachées derrière cet indicateur ne peuvent être utilisées qu'en interne et non dans du code public (comme les feuilles de style des auteurs) à moins qu'elle ne soit activée, car elles sont expérimentales et donc pas prêtes pour une utilisation en production.

Voici un cas de test que vous pouvez utiliser - comparez les résultats lorsque l'indicateur est activé et désactivé:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

Notez que j'utilise un attribut de données personnalisé au lieu de typepour montrer qu'il peut être utilisé avec à peu près n'importe quel attribut.

Je ne suis au courant d'aucune autre implémentation au moment de la rédaction de cet article, mais j'espère que d'autres navigateurs rattraperont bientôt. Il s'agit d'un ajout relativement simple mais extrêmement utile à la norme et j'ai hâte de pouvoir l'utiliser à l'avenir.