тег img с совместимостью браузера атрибута CSS контента

.square {
  content: url('data:image/gif;base64,R0lGODlhIAAgAPcAAP8MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAIAAgAAAINQABCBxIsKDBgwgTKlzIsKHDhxAjSpxIsaLFixgzatzIsaPHjyBDihxJsqTJkyhTqlzJUmRAADs=');
}
There should be a red square below.
<br>
<img class="square">

Я ожидаю, что приведенный выше код будет отображать красный квадрат, например:

изображение приведенного выше HTML-кода с красным квадратом

Браузеры на основе WebKit, такие как Chrome, Opera и Konqueror, похоже, отображают его так, как ожидалось. Но Firefox, Seamonkey, Edge и Internet Explorer 11 не отображают красный квадрат (ничего не отображают).1

CSS-атрибут content описан в разделе 12.2 спецификации CSS 2.2..
Какие браузеры правильно соответствуют спецификации?

1 Для тестирования использовались последние стабильные версии всех браузеров.


css standards-compliance
person tambre    schedule 07.07.2018    source источник
comment
связанные: stackoverflow.com/questions/36106155/   -  person Temani Afif    schedule 07.07.2018
comment
в нем указано Applies to: :before and :after pseudo-elements , и вы не используете псевдоэлемент   -  person dippas    schedule 07.07.2018
comment
css content используется в сочетании с ::before или ::after. Используйте .square::after { content: url(....); }   -  person Tanvir Ahmed    schedule 07.07.2018
comment
@TanvirAhmed он знает это, и это четко указано в спецификации, но почему тогда это работает для img? это вопрос   -  person Temani Afif    schedule 07.07.2018
comment
@TanvirAhmed Использование ::after заставляет его работать в Firefox, но не работает в Chrome и Edge.   -  person tambre    schedule 07.07.2018
comment
@TemaniAfif Верно! Мой вопрос действительно заключался в том, какой из браузеров правильно соответствует спецификации.   -  person tambre    schedule 07.07.2018
comment
даже если он работает в хроме почти всегда, это плохая идея. он не предназначен для замены содержимого тега (может быть целым сайтом) на что-то другое ... как вы удивитесь, если попадете на сайт из Google и обнаружите что-то еще на экране. Я действительно удивлен, что он все еще работает в браузерах webkit ....   -  person G-Cyrillus    schedule 07.07.2018
comment
@G-Cyr, я почти уверен, что он ограничен только тегом img, чтобы разрешить замену изображения с использованием только CSS ... контент никогда не работал у меня с любыми другими тегами   -  person Temani Afif    schedule 07.07.2018
comment
Эта повторяющаяся цель, по-видимому, больше связана с конкретной реализацией свойства содержимого для фактических элементов, а не с общей идеей свойства содержимого, поддерживаемого в реальных элементах. Как ни странно, ответ на этот вопрос украден из ответа, который я помню дословно на еще один вопрос 6-летней давности, который служит более подходящей дублирующей целью.   -  person BoltClock    schedule 07.07.2018
comment
@TemaniAfif На самом деле это никогда не было. Только чтобы показать, как плохо я думаю, что это. Возможно, это было полезно в какой-то момент, если srcset еще не был доступен.   -  person G-Cyrillus    schedule 07.07.2018
comment
@Temani Afif о том, но почему тогда это работает для img? - Я пока не смог найти хорошего решения с использованием CSS-контента для этого сценария. Я согласен с G-Cyr и думаю, что мы не можем полагаться на установку изображения src таким образом, если в содержании нет поддержки src.   -  person Tanvir Ahmed    schedule 07.07.2018
comment
И я бы выбрал div со свойством css фонового изображения, чтобы он был удобен для браузера.   -  person Tanvir Ahmed    schedule 07.07.2018
comment
@TanvirAhmed Я также согласен с G-Cyr, но вопрос не в том, как полагаться на это или нет, а в том, почему это работает ... почему Chrome позволяет этому происходить, когда этого не должно происходить. Я знаю, что есть намного лучший способ сделать это, но лично я никогда не использую такую ​​технику.   -  person Temani Afif    schedule 07.07.2018