soy Kseso y esto EsCSS

Pequeños secretos CSS: Selector atributo [case-insensitive i]

El identificador i en los selectores CSS por nombre y valor de atributo para que sean case-insensitive con independencia de que el documento al que se aplican lo sea o no.

Pequeños secretos CSS: Selector atributo [case-insensitive i]

·Por Kseso ✎ 0
Pequeños secretos CSS: Selector atributo case-insensitive

Selector por valor de atributo o su valor case-insensitive

CSS es un lenguaje insensible al uso de mayúsculas o minúsculas (es case-insensitive). Es igual que declares en la hoja de estilos .EL {} que .el {} o cualquier variante.

Sin embargo hay lenguajes a los que aplica CSS donde esto no ocurre. Como XML o xHTML (HTML no lo es). Los atributos de los elementos y sus valores sí que son case-sensitive. Así que en ellos no es lo mismo EL que el.

El documento Selectores level 3 (actual RC) dice al respecto:
Toda la sintaxis de los selectores es case-insensitive dentro del rango ASCII (por ejemplo [a-z] y [A-Z] son equivalentes), salvo en las partes que no están bajo el control de los selectores. La concordancia de los nombres de los elementos, los nombres de sus atributos y sus valores con los selectores CSS depende del lenguaje del documento. Por ejemplo, en HTML, los nombres de elementos no distinguen entre mayúsculas y minúsculas (es case-insensitive), pero en XML, que es case-sensitive, sí.

Para evitar los problemas derivados de este hecho CSS define el identificador i que añadido justo antes del corchete de cierre i] convierte al selector CSS en case-insensitive para el documento de destino [ver especificación].

El nuevo documento CSS Selectors Level 4 (ED) dice al respecto:
Por defecto la concordancia de mayúsculas y minúsculas entre el selector CSS y los nombres y valores de los atributos de los selectores depende del lenguaje del documento. Para volver case-insensitive los valores de atributos con independientemente de las reglas del lenguaje del documento, el selector de atributos puede incluir el identificador i antes del corchete de cierre (]). Cuando esta opción está presente, los AU (agentes de usuario) deben hacer el valor del atributo case-insensitive dentro del rango ASCII.

Así que imagina que tienes una Hoja de Estilos para aplicar a un documento XML y en ella declaras lo siguiente:

[data-user] {} /* Sólo aplicará a los elementos que su atributo 'data-user' esté escrito tal cual aparece en el selector*/ [DATA-USER*='algo'] {} /* Lo mismo que el anterior aplicará sólo si el nombre del atributo está todo en mayúsculas y la cadena textual 'algo' en minúsculas*/ [data-user*='algo' i] {} /* NO IMPORTA que no haya concordancia mayúsculas / minúsculas entre selector CSS y el atributo y su valor en el documento XML.*/

Soporte

Puedes verificarlo en tu navegador con ayuda del siguiente pen:

See the Pen rxgOXW by Kseso (@Kseso) on CodePen.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso