has - ¿Qué significa "i" en un selector de atributos CSS?

css selectores

Question

He encontrado el siguiente selector de CSS en la hoja de estilo del agente de usuario de Google Chrome:

[type="checkbox" i]

¿A qué i refiero?

Answer 1

Como se menciona en los comentarios, es para la coincidencia de atributos sin distinción entre mayúsculas y minúsculas. Esta es una nueva característica en Selectores CSS Nivel 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 configurando el indicador de características experimentales.

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

Ejemplo de trabajo / prueba de 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.

Answer 2

Ese es el distintivo de 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 desde agosto de 2014.

En pocas palabras: este indicador le dice al navegador que haga coincidir los valores respectivos para el atributo de type sin distinción entre mayúsculas y minúsculas. El comportamiento de coincidencia de selector predeterminado para los valores de atributo en HTML distingue entre mayúsculas y case-sensitive , 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 recoge 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 que no distinguen entre mayúsculas y minúsculas .

Aquí están los commits relevantes:

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

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

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 uso un atributo de datos personalizado en lugar del type para mostrar que se puede usar con casi cualquier atributo.

No estoy al tanto de ninguna otra implementación a partir de este escrito, 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 usarlo en el futuro.