Перевод статьи Styling Broken Images с сайта bitsofco.de, опубликовано на css-live.ru с разрешения автора — Ире Адеринокун.

Незагруженные изображения уродливы

Но им необязательно всегда быть такими. Можно воспользоваться CSS для оформления элемента <img>, чтобы впечатление от них было лучше, чем по умолчанию.

Пара фактов об элементе <img>

Чтобы понимать, как оформлять незагруженные картинки, для начала нужно знать пару особенностей в поведении элемента <img>.

1. К элементу <img> можно применять обычное шрифтовое оформление. Эти стили применяются к альтернативному тексту в случае его отображения, и не влияют на рабочее изображение.
2. Элемент <img> замещаемый. Это элемент, «внешний вид и размеры которого определяются внешними ресурсами» (Sitepoint). Поскольку элемент управляется внешним источником, псевдоэлементы :before и :after, как правило, к нему не применяются. Однако, когда изображение не загружается из-за сбоя, эти псевдоэлементы могут отобразиться.

Из-за этих особенностей, можно применять к элементу <img> такие стили, которые отобразятся только когда изображение поломано, а рабочее изображение мы оставим без изменений.

Применим это на практике

Учитывая эту информацию, вот некоторые примеры оформления незагруженных картинок, со следующим неправильным адресом:

<img src="http://bitsofco.de/broken.jpg" alt="Канье смеётся">

Добавление полезной информации

Один из способов обработать незагруженные изображение — сообщить пользователю, что изображение не загружено. С помощью выражения attr() можно даже отобразить ссылку на незагруженное изображение.

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before {  
  content: "Извините, изображение не загруженно :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Размещение альтернативного текста по умолчанию

Кроме того, можно использовать псевдоэлементы, чтобы заменить дефолтный текст в alt, спозиционировав псевдоэлемент поверх дефолтного текста, закрывая его.

img { /* те же стили, что и в первом примере */ }

img:after {  
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

Дополнительное оформление

В дополнение к отображению пользовательского сообщения (или вместо него), можно воспользоваться псевдоэлементами, чтобы ещё лучше оформить незагруженные картинки.

img {  
  /* те же стили, что и в первом примере */
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Незагруженная картинка, на которой " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

Если изображение загружается, при всех тех же стилях для элемента, тогда картинка отображается как обычно. Псевдоэлементы вообще не генерируются.

Поддержка браузерами

К сожалению, не все браузеры обрабатывают незагруженные изображения одинаково. В некоторых браузерах, даже если картинка не загружается, псевдоэлементы вообще не отображаются.

Вот результаты моих тестов:

Браузер	Текст в Alt	:before	:after
Chrome (Компьютер и Android)	✓	✓	✓
Firefox (Компьютер and Android)	✓	✓	✓
Opera (Компьютер)	✓	✓	✓
Opera Mini	✓ **	✗	✗
Safari (Компьютер and iOS)	✓ *	✗	✗
iOS Webview (Chrome, Firefox, другие)	✓ *	✗	✗

* Текст в alt отобразится только в том случае, если он умещается в ширину изображения.

** Шрифтовое оформление не применяется.

Для браузеров, в которых нет поддержки псевдоэлементов, применяемые стили игнорируются, так что никакого вреда от них не будет. Это значит, что можно по-прежнему применять стили и больше радовать пользователей в поддерживающих браузерах.

Перевод статьи Styling Broken Images с сайта bitsofco.de, опубликовано на css-live.ru с разрешения автора — Ире Адеринокун.

P.S. Это тоже может быть интересно:

• «Запашки» кода React-компонентов
• Новогодние подарки Рабочей группы CSS: значения и единицы 4 уровня, медиавыражения 4 и 5 уровней
• Как читать W3C-спецификации