Comments 32
Чтобы битая картинка не ломала дизайн и не так была заметна, в первую очередь надо задавать точный размер всех картинок. Тогда однопиксельная картинка не превратится в то, что на первом скриншоте. Но по-моему для большинства разрабов просто лень прописывать размеры всех картинок, так как браузеры нормально её сами растянут.
А в респонсиве что делать? У изображения ширина 100%, высота высчитывается автоматически, пропорции задать нельзя.
Если пропорции известны, то есть два способа: через контейнер c padding-top, либо через SVG.

В отличие от минимальной высоты и т.п., помогает избежать reflow после того, как картинка загрузится.
Судя по всему, автор IE считает программой для скачивания браузеров ;)
В комментариях к оригинальной статье пишут, что IE как раз всё делает по стандарту (внутри самозакрывающихся тегов не может быть псевдоэлементов). То есть это хак, но довольно полезный.
Хабр — не место для политики.

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

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

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

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

Кстати, используя before, after и FontAwesome можно стилизовать отсутствующие аватарки (когда их нет).
Часто видел, что при отсутствии аватарки выводится первая буква логина. Наверно, можно это через :after реализовать
Уже пару недель эту статью можно прочитать по-русски в более удачном переводе (и без политики) здесь: ссылка.
Only those users with full accounts are able to leave comments. Log in, please.