@caof19

Что лучше? Как правильней?

Следующая ситуация, все мы видели такие "карточки" или как их правильно назвать? В общем у каждой подобной карточки есть картинка сверху/снизу или где-то еще, не суть
5bf1c652d0895588206963.png
Собственно вопрос в том, что лучше или правильнее использовать в этой ситуации и почему? Есть два варианта вставить эту картинку: при помощи псевдо-элементов (after, before) или при помощи background-img? Желательно ответ как-то обосновать. Вопрос глупый, но имеет место быть. Или может есть еще варианты реализации данного вопроса?
  • Вопрос задан
  • 474 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
1. Это должна быть векторная картинка
2. Вешать на общий фон карточки совершенно неправильно.

Остается только один из ваших вариантов — псевдоэлемент.
Вариантик прямо скажем, в данном случае так себе.

Наиболее верный подход — вставка отдельного элемента с отдельным классом. Что это будет, div, img или svg не суть важно. В любом случае вы дадите ему роль "для визуального представления"

role="presentation"

что исключит элемент из дерева доступности.

Я бы собрал svg-спрайт из всех иконок и вставлял бы посредством use.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
profesor08
@profesor08 Куратор тега CSS
А <img src="img.png"> уже запретили?
Ответ написан
@lumb
И вместо картинки здесь похоже используются шрифты, вроде fontawesome
Ответ написан
Похоже на компонент «карточка» (Card). Посмотрите его реализацию в разных фремворках.

Напр. в Bootstrap.
Ответ написан
Комментировать
LenovoId
@LenovoId
I want, women not to get sick
https://codepen.io/topicstarter/pen/vQegoz - не увидел проблему - если критично вставить img то можно на прямую вставить svg - для иконок это нормально
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы