soy Kseso y esto EsCSS

Qué ocurre al usar IMAGE como selector css. Sorpresa en los IEs

Qué ocurre al usar IMAGE como selector css. Sorpresa en los IEs

·Por Kseso ✎ 5

Curiosidades de esas que te llegan vía twitter y que siendo quien es quien lo tuitea es obligado pinchar el enlace:

Resumiendo: que el elemento <image> sí está recogido por el WHATWG en la especificación sobre HTML.

A start tag whose tag name is "image"
Parse error. Change the token's tag name to "img" and reprocess it. (Don't ask.)

Y resumiendo la conclusión final del autor del artículo sobre el comportamiento de los navegadores cuando se encuentran la etiqueta image:

  • Firefox renombra 'image' por 'img' al analizar el documento(at parse-time).
  • Chrome y Safari cambian 'image' por 'img' en el momento de crear el elemento (at element-creation time).
  • IE lo hace en el momento de ejecutar /el código/ (throughout the runtime).

Pero como éste es un blog sobre Css, es una tarde de Agosto y uno tenía ganas de encontrar algo con lo que enredar un rato, la cuestión era inevitable:

Image como selector Css

En el blog ya vimos en su día cómo utilizar tag´s inventados y que funcionen (tanto en el html como selectores de css): ácratas del css

Pero en este caso, no estamos ante una etiqueta totalmente fuera de las especificaciones como era el caso en el enlace anterior. Ahora el navegador, en un momento u otro, convierte el tag image en la etiqueta img.

¿Tendrá esto alguna incidencia si en el Css usamos como selector la palabra image?

Para matar la curiosidad, que no al gato, creemos un html tal que así:

<img src='Pencil-Vs-Camera-12.jpg' alt=""> <image src='Pencil-Vs-Camera-12.jpg' alt="">

Y a continuación vayamos a la hoja de estilos:

img, image { background: #f0f0f0; display: block; margin: 1rem; padding: 1rem; } image { background: #FF7361; }

Nota que por aquello de que lo último que lee el navegador es lo que manda, la declaración relativa a 'image' está después de la que aplica a 'img'. Cuestión que se mostrará relevante más tarde.

Image tag en Firefox

Como Firefox hace el cambio en la etiqueta cuando analiza el html como cabría esperar aplica las declaraciones del selector 'img'. Y pese a que sí reconoce y lee la regla para 'image' en el Css (parte inferior izquierda de la captura de Firebug) en ningún momento la asocia con el elemento marcado como 'image' en el HTML. Fíjate que ni la muestra en la zona de las herencias.

Image tag en Chrome

En Chrome ocurre como en Firefox. Reconoce el selector 'image' en el css pero en ningún momento lo asocia con el "reprocesado" 'img'.

Idénticos resultados obtenemos en Opera y Safari. Todas las pruebas realizadas en Vi$ta.

Image tag en Internet Explorer

Interesante. Pero no es que reconozca al elemento 'image' como tal. Que ya vimos en el artículo sobre él que también lo reconvierte a 'img'. La sorpresa en los IE viene por lo que hace con el Css. Tanto en el 7, 8 como el 9 "reescribe" nuestros estilos y cambia el selector 'image' por 'img' y al estar declarado el último lo aplica.

Si se intercambia el orden (aparecer primero la regla para 'image' en el css) aplica los estilos de 'img', como es lógico.

Esto ocurre con independencia de colocar los estilos en le head del documento o en archivo css aparte llamado con 'link href'.

Si alguno hace la prueba con el 10 o sucesivos, dejad el resultado en un comentario. Gracias.

Construí este pen para que puedas verlo en vivo

See the Pen image as css selector by Kseso (@Kseso) on CodePen

Adenda final

En el lenguaje CSS, a diferencia de lo que ocurre con Html, ni existe ni está recogido en ninguna parte de las especificaciones (que yo recuerde) que el navegador reescriba los estilos bajo ninguna premisa. En ningún elemento de los presentes en las hojas de estilos.

Cosa lógica por otra parte.

Lo que sí recoge es la forma de tratar los errores. Ver punto "Errores y sus consecuencia" en ese artículo.

En el caso que nos ocupa no se puede hablar de error css al utilizar la palabra image como selector (de elementos html). La construcción del selector es perfectamente válida según "la norma" css.

El que sea o no un elemento reconocido (estándar dentro de las especificaciones html) al lenguaje Css le es indiferente. No es su cometido ese análisis.

Estaríamos ante el mismo caso que el de definir una clase en la hoja de estilos y después no usarla en el thml. El navegador debería leerlo "tal cual" y al no encontrar un elemento con ese atributo (la clase) o tag (image) símplemente no la aplica. Css declarado y no utilizado.

El que una palabra clave en un momento dado no sea identificativa de elementos del html no quita que mañana cambie y sí lo sea. Como ha pasado con todos los nuevos elementos aparecidos con Html5.

Y repito, creo que en este aspecto el intérprete de Css del navegador se debería limitar a leer los estilos y aplicarlos si encuentra a quien. Y punto.

De ahí la extrañeza (relativa) de que los IE´s hagan lo que hacen: reescribir el css según una guía ajena totalmente a css como es la de html.

Pero posíblemente esto sea algo de todo punto intrancendente y carente de utilidad. Pero no olvides que ha surgido como entretenimiento para una calurosa tarde de Agosto.

¡Ala! Ya me voy pa'la sombra a ver si se me pasa xDD

avatar del Editor del blog

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 Don Kseso Kseso