#фишка дня

Что раздражает больше, чем незагрузившаяся картинка?

Правильно, дефолтное оформление этих самых картинок!

В Firefox просто будет alt-текст, Chrome ещё добавит какую-то убогую иконку из девяностых... ну такое.

Что же делать?

А решение простое: когда картинка не загрузилась, её контейнер подчиняется основным блочным правилам, а значит, на него можно набросить псевдоэлементы!

Чтобы было понятно, что конкретно не загрузилось — стоит ещё и attr(alt) докинуть.

img::after {
  content: "Image of " attr(alt) "\A is not found 😞";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  background: #eee;
  border: 2px dashed;
  white-space: pre-wrap;
  color: #AA0000;
}

К слову, обратите внимание на пример: https://codepen.io/alinaki/pen/qEdEZOK

Там ещё и старый трюк с переводом строк без использования br использован: \A + pre-wrap.

Кстати, почему не ::before, а ::after? Да потому что Firefox занимает ::before под отображение alt и некоторые средства доступности могут этим пользоваться.

Оформляйте картинки правильно, котаны!

#css #img