Qué ocurre al usar IMAGE como selector css. Sorpresa en los IEs 13.8.13
Qué ocurre al usar el selector 'image' en la regla css como marcador del elemento html image. Y las distintas interpretaciones en el Css.
Qué ocurre al usar IMAGE como selector css. Sorpresa en los IEs
Curiosidades de esas que te llegan vía twitter y que siendo quien es quien lo tuitea es obligado pinchar el enlace:
Did you know about <image> in HTML? @jaffathecake had some fun with its peculiarities http://t.co/R5kzUzglnz
— Lea Verou (@LeaVerou) August 13, 2013
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
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
saludos, ésta es la versión en ie8
ResponderEliminarhttp://static.elespectador.com/archivos/tag-image.html.jpg
Gracias Rowilson
EliminarVeo que hace lo mismo que sus hermanos menores. Renombra a img todo, incluido el selector en los estilos.
Un saludo.
N.B.: Porque es la v10, ¿no? y fue un lapsus al escribir ie8, supongo.
Hola;
ResponderEliminarPersonalmente, no lo considero «intran(s)cendente», porque como siempre, IE (Micro$oft, vamos) sigue haciendo lo de siempre: pasarse todo, especialmente las reglas, por allí, y joderla como es lógico:
Porque, ¿alguien ha comprobado esto con archivos que no sean HTML? Es que si IE, me renombra CSS en archivos XML (un SVG por ejemplo, o uno propio, el caso es que esté bien formado) apaga y vámonos.
Ni pensar ya en documentos que usen varios NS (XHTML + SVG + Math, XHTML...) porque se puede hacer la picha un lío con los elementos que podría haber en estos documentos, ...por poner, elementos propios, de tu propio NS, etc. Claro, algo que no tendría porqué ocurrir si, como hacen los demás, no tocarán lo que no deben, el CSS.
...aunque siendo realista, tampoco es que espere uno que IE maneje otra cosa (cualquier cosa) distinta de HTML, y si lo hace, que lo haga medio decentemente... ¡nos hemos vuelto locos?! :D
Saludos, vi el artículo en la comunidad de Google+ "Club de programadores", muy bueno ;)
Antes que nada: ¿existe la etiqueta '<image />'?. No soy muy afecto a seguir la evolución de los estándares y no tengo idea de lo que aprueban o no en cada lenguaje.
EliminarSupongo que no, pero existe una razón para que se mencione.
Y justamente tiene que ver con Internet Explorer. Porque cuando el HTML comenzó a hacerse popular, siempre aparecían los "intuitivos" que en vez de agarrar los manuales se ponían a inventar (nos poníamos a inventar) lo que no existía, y quizá nuestra mejor excusa para eso era simplemente "ver qué pasaba", pero también estaban los que pretendían aprender de esa forma. Y entonces aparecían esas confusiones de dimensión épica como que la maquetación se hace con tablas, o que el atributo 'alt=' es para disparar un "cartelito" (tooltip) desde cualquier elemento.
A estas alturas es evidente que lo primero que ensayaban los autodidactas con poco criterio para serlo, era una etiqueta '<image />' para insertar sus dibujos.
Y los inventores de la intellisense no lo iban a dejar pasar, porque era otra forma más de decir "Nuestro navegador adivina lo que quieren hacer hasta los programadores y diseñadores" (que siempre deberían saber lo que hacen, agrego yo).
Por eso en Internet Explorer funcionan ambas etiquetas desde la versión 5.5 (al menos). Es un resabio de viejas épocas que no corrigieron ni van a corregir, porque no vale la pena. Pero sus programadores sí sabían que estaba mal, y allí aparece una excusa para la reescritura: el navegador está corrigiendo el código fuente.
Hoy las cosas han cambiado; como dice en éste y otros artículos, ya podemos ser más creativos con etiquetas, atributos y sus selectores CSS. Pero como muchos de los inventos de HTML5 o CSS+2.1 ya fueron pre-inventadas por Microsoft hace años con su propio código (que nunca les fue aprobado después cuando aparecieron otros estándares), su política evidente es crear polifills internos que traduzcan los nuevos atributos, etiquetas y sus selectores CSS para que ejecuten esos viejos JScript, VBScrpt y objetos que ya tenía integrados a su navegador y sistema operativo. Y no sé si debamos criticar eso, porque es una política comercial de esa empresa. Aunque ya no vendría mal que se tomaran un tiempo para crear una nueva versión de navegador, teniendo en cuenta unas tendencias que van a durar al menos unos 5 años más.
Gracias Juan Antonio y Furoya por vuestros aportes.
EliminarLa razón del artículo no es el tema del elemento image (su etiqueta) en el html. Para eso el artículo que me inspiró.
La cuestión principal fue resaltar cómo se comportan y qué hacen cuando en los estilos se encuentran con una regla CSS cuyo selector de elemento es 'image'
Y en ésto, Furoya, creo que Microsoft (pionero -con su terminología y formas- en muchos aspectos) se equivoca al modificar el CSS.
Un saludo