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

[type="checkbox" i]

¿Qué isignifica?

Como se menciona en los comentarios, es para la coincidencia de atributos que no distingue entre 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 a partir de Chrome 39, pero se podía habilitar para contenido web estableciendo la marca de funciones experimentales.

* Es posible que las versiones anteriores de Opera también lo admitan.

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:

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

El cuadro de arriba será verde si el navegador admite esta función, rojo si no lo hace.

Ese es el indicador que no distingue entre mayúsculas y minúsculas para los selectores de atributos, introducido en Selectores 4 . Aparentemente, introdujeron una implementación de esta función en Chrome ya en agosto de 2014.

En pocas palabras: esta bandera le dice al navegador que haga coincidir los valores respectivos para el typeatributo sin distinción entre mayúsculas y minúsculas. El comportamiento de coincidencia del selector predeterminado para los valores de atributo en HTML distingue entre mayúsculas y minúsculas , lo que a menudo no es deseable porque muchos atributos están definidos para tener valores que no distinguen entre mayúsculas y minúsculas, y desea asegurarse de que su selector elija todos los elementos correctos independientemente del caso. typees un ejemplo de un atributo de este tipo, porque es un atributo enumerado , y se dice que los atributos enumerados tienen valores que no distinguen entre mayúsculas y minúsculas .

Aquí están las confirmaciones relevantes:

• 179370 - implementación
• 179401 : cambios en las hojas de estilo de UA como se muestra en la captura de pantalla de la pregunta

Tenga en cuenta que actualmente está oculto dentro de la marca "Habilitar funciones experimentales de la plataforma web", a la que puede acceder en chrome: // flags / # enable-experimental-web-platform-features. Esto podría explicar por qué la función pasó en gran medida desapercibida: las funciones ocultas detrás de esa marca solo se pueden usar internamente y no en código público (como hojas de estilo de 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;
}

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

Tenga en cuenta que utilizo un atributo de datos personalizado en lugar de typemostrar que se puede usar con casi cualquier atributo.

No tengo conocimiento de ninguna otra implementación al momento de escribir este artículo, pero espero que otros navegadores se pongan al día pronto. Esta es una adición relativamente simple pero extremadamente útil al estándar y espero poder usarla en el futuro.