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


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

[type="checkbox" i]

¿Qué significa i?

Author: James Donnelly, 2014-12-16

2 answers

Como se mencionó 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 los 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 alrededor de Chrome 39, pero podría ser habilitado para el contenido web mediante el establecimiento de la bandera de características experimentales.

* Las versiones anteriores de Opera también pueden soportarlo.

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 cuadrado anterior será verde si el navegador admite esta característica, rojo si no lo hace.

 117
Author: Alexander O'Mara,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-07 20:01:05

Es el indicador que no distingue entre mayúsculas y minúsculas para los selectores de atributos, introducido en Selectores 4. Al parecer, se coló una implementación de esta característica en Chrome ya en agosto 2014.

En pocas palabras: esta bandera le dice al navegador que coincida con los valores respectivos para el atributo type sin distinción de mayúsculas y minúsculas. El comportamiento de coincidencia de selector predeterminado para los valores de atributo en HTML es distingue entre mayúsculas y minúsculas , lo que a menudo es indeseable porque se define que muchos atributos tienen valores insensibles a mayúsculas y minúsculas, y desea asegurarse de que su selector recoge todos los elementos correctos independientemente de las mayúsculas y minúsculas. type es un ejemplo de tal 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 las confirmaciones relevantes:

  • 179370 - aplicación
  • 179401 - cambios a hojas de estilo UA como se muestra en la captura de pantalla en el pregunta

Tenga en cuenta que actualmente está oculto dentro de la bandera "Habilitar experimental Web Platform features", que se puede acceder en chrome://flags/#enable-experimental-web-platform-features. Esto podría explicar por qué la característica pasó desapercibida en gran medida-las características ocultas detrás de esa bandera solo se pueden usar internamente y no en código público (como las 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 uso un atributo de datos personalizados en lugar de type para mostrar que se puede usar con casi cualquier atributo.

No estoy al tanto 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 futuro.

 34
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-27 16:26:36