Давным-давно появился проект спецификации CSS3 Generated Content, который разрешил свойство contentfor any HTML element (не только :: before/:: после псевдоэлементов), без каких-либо формальных ограничений для пустых или замененных элементов. Это когда-то поддерживали Opera Presto (1, 2) и, по крайней мере, в некоторой степени, WebKit (3). К концу 2011 года реализация WebKit content для элемента img, казалось, эффективно конвертировала его из пустого замененного элемента в незаменимый элемент, например span (даже его контекстное меню изменилось, удалив такие опции, как «Сохранить изображение как ...»). Это также позволило применять псевдоэлементы, такие как img::before.Как свойство CSS `content` работает для элемента` img` в WebKit?
В текущей реализации Blink (Chrome и т. Д.), Размещая content свойство img элемент не имеет видимого эффекта. Но элемент img явно имеет разную структуру в зависимости от того, правильно ли он загружен или сломан: если он загружен, он отображается в DOM Inspector как простой пустой элемент, но если он разбит, он раскрывает внутреннюю структуру DOM DOM следующим образом:
<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>
Вероятно потому, что разбитое img отображается с помощью теневых div с, то можно применить псевдо элементы к нему только в этом случае (4).
Настоящий WebKit не поддерживает псевдо элементы для img. Но, что интересно, по крайней мере, iOS 9.2.1 Safari начинает их поддерживать после установки свойства content для этого img (5).
Почему это свойство вносит такие изменения? Я предполагаю, что если пустой элемент получает какой-либо контент (даже сгенерированный), браузер должен предоставить что-то, чтобы отобразить этот контент, эффективно заменив пустой элемент каким-то контейнером (например, тень Blink div id="alttext-container"), и этот контейнер может иметь pseudos. Я ошибаюсь? И разве это поведение не было удалено из последних версий WebKit?
интересно .. сафари также показывает элементы after и не отображает изображение, даже если его не сломано .. –
Да, кажется, что в Safari это свойство 'content', а не загруженное/сломанное состояние, которое изменяет модель рендеринга элемента' img'. Это отличается от поведения Blink. Кстати, вы протестировали его в ОС X Safari? –
Удивительно, не могу найти его документально нигде, хотя .. –