bootstrap - ¿Cómo funcionó la propiedad CSS `content` para el elemento` img` en WebKit?

placeholder css

Question

Hace mucho tiempo hubo un borrador de la especificación de contenido generado por CSS3 que permitía la propiedad de content para cualquier elemento HTML (no solo :: antes / :: después de pseudo-elementos), sin ninguna restricción formal para los elementos vacíos o reemplazados. Una vez fue apoyado por Opera Presto ( 1 , 2 ) y, al menos en cierta medida, por WebKit ( 3 ). A fines de 2011, la implementación de WebKit del content para el elemento img parecía convertirlo de un elemento reemplazado vacío en un elemento no reemplazado como el span (incluso su menú contextual cambió, eliminando opciones como ''Guardar imagen como ...''). También hizo posible la aplicación de pseudo elementos como img::before .

En la implementación actual de Blink (Chrome, etc.), la eliminación de la propiedad de content al elemento img no tiene ningún efecto visible. Pero el elemento img 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 del DOM Shadow 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 img roto se muestra con la ayuda de los div sombra, es posible aplicar pseudo elementos solo en este caso ( 4 ).

El WebKit actual no admite pseudo elementos para img . Pero, curiosamente, al menos iOS 9.2.1 Safari comienza a admitirlos después de configurar la propiedad de content para ese img ( 5 ).

¿Por qué esta propiedad hace tal cambio? Supongo que si un elemento vacío obtiene algún contenido (incluso generado), el navegador tiene que proporcionar algo para mostrar este contenido, reemplazando efectivamente el elemento vacío con algún tipo de contenedor (como la sombra shadow div id="alttext-container" Blink div id="alttext-container" ), y este contenedor puede tener pseudos. ¿Me equivoco? ¿Y no se eliminó este comportamiento de las últimas versiones de WebKit?

Answer 1

Recientemente me di cuenta de esto. Estaba realmente frustrado con eso. Me alegra ver que alguien ya lo mencionó.

Ustedes parecen mucho más conocedores del tema que yo. Entonces, probablemente ya conozca estos métodos, pero escribiré mi solución de todos modos, para los jóvenes que encontrarán este tema como yo.

Necesitaba un método para los marcadores de posición de imagen rota. Pensé que podía revisar archivos y dar nombres de clase ".brokenimg" para etiquetar en Back-end y cambiar la imagen con CSS "contenido:". Pero no funcionó. (Probado en Chrome, Firefox, Opera, Edge, el navegador web Android de Samsung. Todos iguales).

Luego, intenté cambiar mi script y usar s en lugar de s. Y probé esto en CSS;

.brokenimg::before { content: url(picture.jpg); }

Casi funcionó pero, pero esto es realmente limitado y no era lo que necesitaba.

Así, resolví mi problema con el evento de JavaScript;

<img onerror="this.src=''broken.jpg''" src="image.jpg">

Sé que no es lo mismo. Pero en mi caso, hizo exactamente lo que necesitaba.

Supongo que tenemos que encontrar formas como estas por ahora.