¿Cómo funcionó la propiedad CSS `content` para el elemento` img` en WebKit?
Hace mucho tiempo hubo un borrador de especificación de contenido generado CSS3 que permitiócontent propiedadpara cualquier elemento HTML (no solo :: before / :: after pseudo-elements), sin ninguna restricción formal para elementos vacíos o reemplazados. Una vez fue apoyado por Opera Presto (1, 2) y, al menos en cierta medida, por WebKit (3) A finales de 2011, la implementación de WebKit decontent paraimg El elemento parecía convertirlo efectivamente de un elemento reemplazado vacío a un elemento no reemplazado comospan (incluso su menú contextual cambió, eliminando opciones como 'Guardar imagen como ...'). También hizo posible aplicar pseudo elementos comoimg::before.
En la implementación actual de Blink (Chrome, etc.), al vercontent propiedad aimg El elemento no tiene ningún efecto visible. Pero elimg El elemento claramente tiene una estructura diferente dependiendo de si se cargó correctamente o está roto: si está cargado, el Inspector DOM lo muestra como un elemento vacío simple, pero si está roto, expone la estructura interna DOM DOM de esta manera:
<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; box-sizing: border-box; padding: 1px;">
<img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;">
<div id="alttext" style="overflow: hidden; display: block;">Alt text</div>
</div>
Probablemente porque el rotoimg se muestra con la ayuda de la sombradivs, es posible aplicarle pseudo elementos solo en este caso (4)
WebKit actual no admite pseudo elementos paraimg. Pero, curiosamente, al menos iOS 9.2.1 Safari comienza a admitirlos después de configurar elcontent propiedad para esoimg (5)
¿Por qué esta propiedad hace tal cambio? Supongo que si un elemento vacío obtiene algún contenido (incluso generado), el navegador debe proporcionar algo para mostrar este contenido, reemplazando efectivamente el elemento vacío con algún tipo de contenedor (como la sombra de Blinkdiv id="alttext-container"), y este contenedor puede tener pseudos. ¿Me equivoco? ¿Y no se eliminó este comportamiento de las últimas versiones de WebKit?