Оформление незагруженных изображений

Перевод статьи 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;
}

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

Screen-Shot-2016-02-27-at-12-42-08

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

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

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

Браузер Текст в 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. Это тоже может быть интересно:

9 Комментарии

  1. Александр

    Тема с Канье, неожиданно для статей такого характера, порадовала. Посмеялся спасибо))

    1. Алексей

      Аналогично :) Подобный юмор очень уместен в подобных статьях, и делает их прочтение более лёгким и интересным.

  2. Алексей

    content: "\f1c5" " " attr(alt); — прошу прощения, а зачем столько кавычек? И ещё: иконки хранятся в самом браузере? То есть могут быть различны для различных браузеров?

    1. SelenIT

      Иконки тут шрифтовые (используется FontAwesome), поэтому отображаться будут более-менее одинаково с точностью до рендеринга шрифта. А отдельные кавычки для Unicode-подстановки — думаю, для наглядности (чтоб не напрягаться, где именно подстановка, а где символы — в данном случае пробел — читаются «как есть»), но это дело вкуса, вполне можно записать их и одной строкой.

      Тут ведь еще заодно демонстрируется не очень популярная возможность свойства content, что оно может быть составным, собранным из нескольких строк, картинок и значений attr. Причем эти значения «склеиваются» без пробелов. Поэтому необходимый пробел между символом-иконкой и значением атрибута добавляется как отдельная строка — опять же для наглядности, полагаю. А в следующем примере там уже полноценная строка с пробелами по краям.

      1. Алексей

        Ну, то есть, если взять мой пример, то там будет три пробела, верно?
        Ну а в целом, идея понятна, спасибо!

        1. SelenIT

          Нет, пробел будет один. Итоговое значение склеивается из трех строк: «\f1c5″ — шрифтовая иконка-символ, » » — пробел между ней и последующим текстом, attr(…) — текст атрибута. Пробелы между самими этими строками не учитываются, они лишь для удобства записи.

          1. Алексей

            То есть вот это: » » » » (или ‘ ‘ ‘ ‘ ‘ ‘) будет восприниматься как один пробел? А если нужно больше, то   нужно ставить?

            1. Алексей

              ой, наверное, нужно было тэг код ставить:

               

              нужно ставить, чтоб получить больше одного пробела

              1. Алексей

                Не хочет вордпресс аперсанд-нбсп-английскими точка с запятой отображать хоть с тегом код, хоть нет :-)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.