/ 

За и против. Оформление незагруженных изображений.

Браузеры отображают незагруженное изображение
Браузеры отображают незагруженное изображение

Восьмого марта 2016 года, Ире Адеринокун опубликовала пост «Styling Broken Images», в котором рассказала о способе оформления не загрузившихся изображений через псевдоэлементы before/after. Эта статья, вызвала оживление сообщества. Её перевели на русский язык одновременно на нескольких ресурсах с задержкой около недели.

Если вы не знакомы с этой заметкой, то вот тезисы из неё:

  1. Если картинка не загрузилась, в некоторых браузерах для неё работают превдоэлементы before/after.
  2. Псевдоэлементы имеют свойство content, в которое можно передать значение атрибута.

Статья интересная, метод работает в десктопных версиях Хрома, Огнелиса и Оперы (еще бы ведь опера это хромиум). Но применять этот подход мне кажется сомнительным решением. И вот почему:

  1. Я не нашел в спецификации ничего о псевдоэлементах у медиа контента. Это баг или фича?
  2. Поддержка только десктнопными браузерами и не всеми.
  3. IE? Не работает.
  4. Safari/Safari web view — не работает.
  5. Это псевдозабота о пользователе, которая не решает его проблему.

Проблема незагруженных изображений мне не кажется такой серьезной. Об этом никто не задумывался раньше. Хотя решения были и до этого:

  1. JavaScript — слушаем событие onerror и делаем что хотим. Вообще все что хотим.

    <img src="error.jpg" onerror="remove()">
    <!-- или -->
    <img src="error.jpg" onerror="src='fallback.jpg'">
    
  2. Object

    <object data="error.jpg" type="image/jpg">
        <img src="fallback.jpg">
        <!-- или -->
        <p>Сорян, не загрузилась картинка :(</p>
    </object>
    
  3. Забить? Никого раньше это не пугало. Пользователю ясно что картинка не загрузилась.

Проблема, которую стоит решить у незагруженных/загружающихся изображений — изменяющиеся размеры. Изображение либо распирает после загрузки, либо остается маленьким если не загрузилось. Из-за этого плохо работает навигация по хэшам, скачет контент и полосы прокрутки, из-за чего невозможно читать статью.

Слышу голос критика с задней парты: «У изображений есть атрибуты width и height, поставьте туда значения и его не будет распирать после загрузки». Если у вас адаптивный дизайн — будет.

Но займемся этим в следующий раз.

⌘ ⌘ ⌘
Адекватное подчеркивание ссылок
Фронтенд

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline

Управляем поведением font-face в CSS
Фронтенд

Управляем поведением font-face в CSS

Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.

Старт курса по архитектуре JavaScript приложений в SmartJS академии
Фронтенд

Старт курса по архитектуре JavaScript приложений в SmartJS академии

Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии

CSS. Выравнивание блочного элемента по правому краю.
Фронтенд

CSS. Выравнивание блочного элемента по правому краю.

Способ горизонтального выравнивания по центру и правому краю для блочных элементов через CSS