Оформляем красиво «битые» картинки

Предлагаю вашему вниманию вольный перевод статьи "Styling Broken Images" с сайта bitsofco.de.

«Битые» картинки выглядят ужасно.

image

Но они не всегда должны так выглядеть. Мы легко можем применить CSS к элементу (тегу) img, чтобы улучшить его внешний вид — сделать его куда более привлекательнее, чем как он выглядит по умолчанию.

Если вам наскучили дефолтные уведомления о «битых» картинках, милости прошу под кат.

Два интересных факта об элементе img


Прежде всего, перед тем, как начать стилизовать наши «битые» картинки, мы должны усвоить 2 важных момента, чтобы понять, как ведет себя элемент img:

1. Мы можем применить стили, затрагивающие типографику текста элемента img. Такие стили будут применены к альтернативному тексту, если картинка окажется «битой», и не будут применены к нормальной, работающей картинке.

2. Элемент img является "заменяемым элементом". Это такой элемент, чье появление на странице и его пропорции определяются внешним источником (ресурсом). И так как элемент контролируется внешним источником, то псевдо-элементы :before и :after не должны работать. Однако, когда картинка является «битой» и не загружается, только в таком случае эти псевдо-элементы будут отображены.

Исходя из вышеописанного можно сделать вывод, что мы можем применять стили к «битой» картинке, и они будут работать, когда изображение не загрузится, но не будут работать, когда наша картинка нормально прогрузится на странице.

Перейдем от слов к делу


Используя полученные нами знания, давайте разберем несколько примеров и увидим наглядно, как мы можем стилизовать «битые»" картинки, используя следующую «битую» ссылку:

<img src="http://kremlin.ru/bitiy_vladimir.jpg" alt="Владимир П.">

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

Первый способ, которым мы можем обрабатывать «битые» картинки, — это показать пользователю сообщение, что картинка «сломана». Используя выражение attr(), мы даже можем указать ссылку на «битое» изображение.

image

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;
}

Стилизация отображения альтернативного текста

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

image

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;
}

Стилизация для продвинутых

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

image

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;
}

Если картинка не «битая», и к ней применены все вышеописанные стили, то такая картинка отобразится нормально, без изменений. Ни один псевдо-элемент не проявится до тех пор, пока картинка не «сломается».

Владимир П.

Совместимость с браузерами


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

Вот, что было выявлено после проведения тестов на совместимость:

image

* Альтернативный текст появится только в том случае, если ширина картинки будет достаточного размера, чтобы вместить его. Если ширина картинки не указана, то альтернативный текст может вовсе не появиться
** Стили для текста не применяются


Для тех браузеров, которые не поддерживают использование псевдо-элементов, отображение описанных стилей будет проигнорировано. Но не стоит отказыватья от подобных «фишек» вовсе. Мы все же можем применять эти стили и делать действительно крутые вещи, которые увидят пользователи тех браузеров, которые эти стили поддерживают.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 32
  • +12
    Чтобы битая картинка не ломала дизайн и не так была заметна, в первую очередь надо задавать точный размер всех картинок. Тогда однопиксельная картинка не превратится в то, что на первом скриншоте. Но по-моему для большинства разрабов просто лень прописывать размеры всех картинок, так как браузеры нормально её сами растянут.
    • +1
      Применять однопиксельные картинки бред ещё тот…
      • +3
        А в респонсиве что делать? У изображения ширина 100%, высота высчитывается автоматически, пропорции задать нельзя.
        • +5
          Задавать минимальную высоту.
          • +1
            Если пропорции известны, то есть два способа: через контейнер c padding-top, либо через SVG.

            В отличие от минимальной высоты и т.п., помогает избежать reflow после того, как картинка загрузится.
        • 0
          А что с поддержкой в IE?
          • 0
            К сожалению, ни IE7-11, ни Edge данные методы не поддерживают.
            • +7
              Судя по всему, автор IE считает программой для скачивания браузеров ;)
              • +2
                Так все уже считают :) Даже сами Microsoft
              • +6
                В комментариях к оригинальной статье пишут, что IE как раз всё делает по стандарту (внутри самозакрывающихся тегов не может быть псевдоэлементов). То есть это хак, но довольно полезный.
              • –14
                Хабр — не место для политики.

                Не надо унижаться до того, чтобы высказывать собственные симпатии или антипатии подобным образом.

                В оригинальном тексте (по ссылке в начале поста) совсем другая картинка.
                • +18
                  У вас паранойя.
                • +1
                  Это адаптация перевода. В данной публикации не было ни малейшего намека на политику. Только CSS. Если использованная информация и графика вас чем-то оскорбила, то приношу свои извинения.
                  • –8
                    Когда «битый Владимир» пишется и подразумевается глава государства — это выглядит, мягко говоря, ангажированно и политизированно.

                    Можно было подобрать более нейтральное изображение, которое бы не имело отношение к политике.
                    • 0
                      это выглядит, мягко говоря, ангажированно и политизированно.
                      А не могли бы вы объяснить, как именно это выглядит? Автор подобным способом поддерживает или осуждает?
                      Мне просто интересно, в чём вы его осуждаете:)
                      • 0
                        Видно же что комментатора смущает именно "Битый Путин". Если раскидать логически — именно тут подтекст. Ну неприятно ему представлять в обозримом будущем ни "Битого Путина", ни "Путина в разрезе" и в каких других ипостасях.
                    • +5
                      Чтобы не было таких недоразумений, лучше всегда применять ставшую уже стандартом в этой сфере Лену. =)

                      https://habrastorage.org/files/2d8/52b/2d7/2d852b2d763b43a289dbc4b9ab94ba59.jpg
                      • +6
                        Боюсь, alt="битая Лена" породило бы ещё больше разногласий.
                        • 0
                          Так есть ещё котики. Они прекрасны, даже если не прогрузились. "Битый" — само по себе слово не очень удачное в данном контексте
                    • +1
                      Ну, я не автор, но мне кажется, тут нет никакой политики, просто узнаваемое лицо.
                    • +6
                      IOS начинает напоминать IE6 нового поколения. Ничего не умеет, ничего не хочет обвлять, всех всё устраивает. Но MS хотя бы не запрещала запускать альтернативные движки на Windows XP, за счёт чего FF/chrome и появились.
                      • +3
                        Выше уже отписались что это "багофича", а не часть стандарта и жаловаться не на что
                      • +1
                        Хороший способ, спасибо. Можно также использовать JS способ: />. С осликом проблем нет.
                        • +1
                          • 0
                            что вы этим хотели сказать?
                            • +3
                              Человеку не понравилось качество изображений в статье, ведь правилами хорошего тона является выкладывать изображения с текстом в .png
                          • +2
                            Если я правильно понимаю, то то, что не поддерживает описанные методы, будет отображать битые картинки стандартными способами. Тогда ничего страшного в общем-то. Хром, Огнелис и Опера — самые распространённые браузеры.

                            Кстати, используя before, after и FontAwesome можно стилизовать отсутствующие аватарки (когда их нет).
                            • 0
                              Все верно. С аватарками — отличная идея!
                              • 0
                                Часто видел, что при отсутствии аватарки выводится первая буква логина. Наверно, можно это через :after реализовать
                              • 0
                                Вы потеряли суть перевода, не включив это изображение в текст!
                                image
                                • 0
                                  Уже пару недель эту статью можно прочитать по-русски в более удачном переводе (и без политики) здесь: ссылка.

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.