¿Qué significa “i” en un selector de atributo CSS?

Encontré el siguiente selector de CSS en la hoja de estilo del agente de usuario de Google Chrome:

[type="checkbox" i] 

¿Qué es lo que quiero decir?

Como se mencionó en los comentarios, es para la coincidencia de atributos insensible a mayúsculas y minúsculas. Esta es una nueva característica en CSS Selectors Level 4.

Actualmente está disponible en Chrome 49+, Firefox 47+, Safari 9+ y Opera 37 + *. Antes de esto, solo estaba disponible en los estilos de agente de usuario de Chrome que comenzaban alrededor de Chrome 39, pero se podía habilitar para contenido web configurando el indicador de características experimentales.

* Las versiones anteriores de Opera también pueden ser compatibles.

Ejemplo de trabajo / Prueba del navegador:

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

Esa es la bandera insensible a mayúsculas y minúsculas para los selectores de atributos, introducida en Selectores 4 . Al parecer, se coló una implementación de esta función en Chrome ya en agosto de 2014.

En pocas palabras: este indicador le dice al navegador que coincida con los valores respectivos para el atributo de type sin distinción de mayúsculas y minúsculas. El comportamiento de coincidencia de selector predeterminado para valores de atributo en HTML distingue entre mayúsculas y minúsculas , lo que a menudo es indeseable porque muchos atributos están definidos para tener valores insensibles a mayúsculas y desea asegurarse de que su selector selecciona todos los elementos correctos independientemente del caso. type es un ejemplo de dicho atributo, porque es un atributo enumerado , y se dice que los atributos enumerados tienen valores insensibles a mayúsculas y minúsculas .

Aquí están los commits relevantes:

  • 179370 – implementación
  • 179401 – cambios a hojas de estilo UA como se muestra en la captura de pantalla en la pregunta

Tenga en cuenta que actualmente está oculto dentro del indicador “Habilitar características de la plataforma web experimental”, al que puede acceder en chrome: // flags / # enable-experimental-web-platform-features. Esto podría explicar por qué la característica pasó desapercibida: las funciones ocultas detrás de esa bandera solo se pueden usar internamente y no en código público (como las hojas de estilo del autor) a menos que esté habilitada, porque son experimentales y por lo tanto no están listas para su uso en producción.

Aquí hay un caso de prueba que puede usar: compare los resultados cuando la bandera esté habilitada y deshabilitada:

 span[data-foo="bar"] { color: red; } span[data-foo="bar" i] { color: green; } 
 If all of this text is green, your browser supports case-insensitive attribute selectors.