Pequeños secretos CSS: Selector atributo [case-insensitive i] 27.5.17
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]
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.
Kseso
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