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

Question

[caof19]

Следующая ситуация, все мы видели такие "карточки" или как их правильно назвать? В общем у каждой подобной карточки есть картинка сверху/снизу или где-то еще, не суть

Собственно вопрос в том, что лучше или правильнее использовать в этой ситуации и почему? Есть два варианта вставить эту картинку: при помощи псевдо-элементов (after, before) или при помощи background-img? Желательно ответ как-то обосновать. Вопрос глупый, но имеет место быть. Или может есть еще варианты реализации данного вопроса?

Comments

[alex]

Вопрос бессмыслен т.к. в обоих случаях вы будете юзать background-image. Ну а вообще псевдо-элемент удобней в этом случае

Answer 1

[Сергей delphinpro]

1. Это должна быть векторная картинка
2. Вешать на общий фон карточки совершенно неправильно.

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

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

role="presentation"

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

Я бы собрал svg-спрайт из всех иконок и вставлял бы посредством use.

Comments

[caof19]

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

То есть, если я верно ваши слова понял, необходимо создать любой контейнер. Но опять же, вы предлагаете img (что как мы выяснили выше будет не совсем верно, для этих целей), или создать div и в него вставлять тэг img? Или делать задним фоном на диве? С svg еще не работал, не могу прокомментировать. Даже с учетом того что мы даем роль "для визуального представления", мы все равно обязаны дать прописать ему атрибут alt, что подразумевает наличие смысла в картинке. Но, мне кажется, у данных картинок нет смысла.

Просто мне не понятно, чем этот способ правильнее чем работа через псевдоэлементы?

[Сергей delphinpro]

caof19, Я где-то на середине перестал читать ту ветку. Бессмысленное обсуждение. В этом контексте нет критериев "правильно/неправильно". Есть "доступно/недоступно". Вы можете использовать здесь любой тег. Но если вы используете img, а картинка здесь является чисто оформительской, то вам просто нужно исключить ее из дерева доступности (чтобы читалки, например, ее проигнорировали).
<img src="" alt="" role="presentation">
Сделайте это и посмотрите в панель Accessibility — там этой картинки не будет.
Вот пример:



Если будете использовать div, то он и так семантически незначимый, просто оставляете и картинку на бэкграунд. Такой способ хорош для картинок, которые нужно вписать в отведенную область или заполнить (contain/cover), ибо поддержка лучше, чем у object-fit.

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

Почему отдельный элемент, а не псевдо?

Это гарантированно не создаст проблем в дальнейшем. Это позволит сделать смену иконок в html (например выбирать их в админке сайта). Это упростит селектор и уменьшит его специфичность.

Вспомним один и постулатов разработки — KISS =)

[caof19]

Сергей delphinpro, Огромное спасибо, примерно такой ответ я и ожидал услышать.

Answer 2

[profesor08]

А <img src="img.png"> уже запретили?

Comments

[caof19]

А о неправильно использовании тэгов что-то слышали?

[profesor08]

caof19, нет не слышал, их можно использовать как угодно и для каких угодно целей, можно придать любому тегу любое поведение (за исключением некоторых тесно связанных с системой). Так что тут нет правильно/неправильно.

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

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

[caof19]

profesor08, Что такое семантическое ядро ты наверное тоже не слышал? Сайты верстаешь до сих пор при помощи дивов и вместо flex используешь inline-block? Лол, удачи)

[profesor08]

caof19, задавая детский вопрос, зачем дерзить, если не понимаешь ответа?

[caof19]

Во - первых, дерзить начал ты, я просто решил продолжить диалог в сложившимся ключе
Во - вторых, и чем же вопрос детский? Любой вопрос имеет место быть,. А если не знаешь ответа, то можно просто не отвечать, а не начинать делать вид что ты здесь самый умный
В третьих, я обосновал, почему img не подходит
Так выходит, кто из нас не понял ответа то?

[Антон Спирин]

caof19,

В третьих, я обосновал, почему img не подходит

Где обоснование-то?

[caof19]

Антон Спирин,

Что такое семантическое ядро ты наверное тоже не слышал?

По семантике оно не подходит, собственно в этом и был вопрос, как именно семантически верно это

[Антон Спирин]

caof19, с чего бы? img - тег для изображений.

[profesor08]

caof19,

Во - первых, дерзить начал ты

В каком месте, ткни пальцем?

[caof19]

Img для контекстных картинок, которые несут какой смысл

[Антон Спирин]

caof19,

Img для контекстных картинок, которые несут какой смыс

Первоисточник, пожалуйста.

Семантическое ядро не имеет никакого отношения к верстке.

[caof19]

Я уточню.
Я не говорю, что запрещено использовать img, я просто говорю, что это не верно в данной ситуации. А вопрос именно так и звучал: " что более верно использовать". Причем попросил выбрать из двух вариантов, и если есть лучше, то попросил сообщить об этом. А тот, предложил вариант хуже, причем весьма в некорректной форме, делая вид что он тут самый умный.

[caof19]

Антон Спирин, Да? Вот только на этапе верстки, мы создаем HTML разметку, и тем самым проходим этап семантической разметки, которая входит в состав семантического ядра.
Пруф кинул

[caof19]

profesor08, у тебя было несколько вариантов начать диалог, например:
"Чем плох img?", "Почему не использовать img?", но ты решил демонстрировать свое превосходство, добавив туда сарказма. Поэтому твое сообщение было воспринято как: "Ты что тупой, img не дано использовать?". Отсюда и ответная реакция.

[profesor08]

caof19, спустись на землю, там нет сарказма, если ты в силу своей юношеской вспыльчивости, не способен различать адекватные ответы и ищешь во всем наезды на себя, то что ты тут забыл?

[caof19]

Может и в силу этого, но это не отменяет того факта, что по причине незнания ты написал глупый вариант (и похоже до сих пор не осознал этого), и того, что можно было воспользоваться другими вариантами ответа, Так что учись разговаривать с людьми так, что они тебя верно понимали, чтоб после каждой вброшенной тобой фразы люди не огрызались на тебя.

[Антон Спирин]

, и тем самым проходим этап семантической разметки, которая входит в состав семантического ядра.

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

По поводу img и background-image убедили. Сам для иконок использую svg и use.

[profesor08]

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

[caof19]

profesor08, Повторюсь, огрызаться я начал только потому что, мне показалось твое сообщение дерзким.
Вопрос в другом, я предложил два варианта решения данной задачи, ты предложил третий, менее подходящий, так и зачем мне такой вариант? Так что стоит задуматься и над своей осведомленностью

[caof19]

Антон Спирин, и правда, здесь нет записи о связи семантического ядра и семантической разметки. Но я действовал другой логике, семантическое ядро предназначено для более высокого ранжирования страницы, семантическая разметка так же служит для этих целей.
Признаю, что в этом был не прав, отчасти.
Но это не отменяет того факта, что img для этих целей подходит менее, нежели предложенные мною выше варианты

[Антон Спирин]

caof19, да, почитал ваши ссылки, вы правы и это общепринятая практика.

[caof19]

Антон Спирин, Но самое обидное, что на свой вопрос я ответа так и не получил)

[profesor08]

caof19, твой вопрос лишь в том, задать фон через background-img, или через background-img. Или если нет, то в том, чтоб вставить картинку как контент, либо задать фоном через background-img. Так вот если первый, то вопрос не имеет смысла, так как выбор среди одной вещи. Если второй, то вставка как контент это равносильно вставке img, так как и то и то это контент, либо вставить как background-img. Так вот может это тебе следует задумать над своей осведомленностью, и разберешься в используемых инструментах?

[Антон Спирин]

caof19, думаю, можно так:

.some-title:before {
  display: block;
  width: 90px;
  height: 90px;
  margin: 30px auto 65px;
  background-image: url(images/gear.png);
  background-repeat: no-repeat;
}

[caof19]

Я нигде не писал о выборе между выбором "вставить картинку как контент или как задний фон". Эти оба варианта используют задний фон. Меня интересовала сторона, как это более верно реализовать, потому что на многих сайтах видел, что данная задача была решена при помощи псевдоэлемнтов, но для себя нашел способ реализовывать напрямую через задний фон. Стало интересно, в чем разница. Научись еще и вопросы читать. И долго мы будем мерится осведомленностью?

[caof19]

Конечно можно, но разве так не проще и не быстрее? Нет необходимости создавать псевдоэлемент

.service-item {
    width: 330px;
    border: 1px #DBDBDB solid;
    margin: 0 30px;
    background-image: url(img/support.png);
    background-repeat: no-repeat;
    background-position: 50% 30px;
}

Повторюсь, вопрос возник потому что на многих сайтах, да и курсах, это реализуются через before или after, вот и стало интересно, почему так, а не напрямую?

[Stalker_RED]

caof19, вы уж определитесь, вам попроще, или поправильнее?
По хорошему оно должно быть в векторе, а не png, и если этих штук много, то есть смысл собрать их в svg спрайт или иконочный шрифт (они есть готовые, или можно сделать свой).

[caof19]

Stalker_RED, Мне нужно правильнее, собственно в этом и был вопрос.
По поводу шрифтов я не знал, но есть одна проблема. На сайте есть фот такая иконка

При наведении на нее она должна становиться вот такой

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

[Антон Спирин]

caof19, ну вариант с before, как минимум, можно использовать в стандартных блоках кита(kit), если он есть. Еще вы padding забыли в своем примере.
Думаю, стоит смотреть по ситуации и подбирать самое рациональное решение из возможных. Оно не обязательно должно быть одно, часто правильных вариантов несколько.

[caof19]

Антон Спирин, Не знаю что такое киты)
Padding? Для чего?
Да, тоже думал об этом, был один человек, попросил сверстать карточку на сайт, и его просьбой было сделать так, чтоб стили были прописаны у каждого элемента, и соответственно, там не было возможности возможности использовать псевдоэлементы. Собственно после этого у меня и возник данный вопрос и решил задать здесь данный вопрос, но как то вышло неудачно.

[Антон Спирин]

caof19, kit - набор. Базовый набор элементов, как в bootstrap, например.
С другой стороны, если наоборот блок нестандартный, а заголовок из кита, то можно использовать background-image для блока.

Padding для контента, иначе он будет перекрывать ваше изображение.

С вашей задачей все просто, раз попросили не использовать псевдо-элементы - не используйте. Хозяин - барин :)

[caof19]

У меня на margin'ах все держится, с padding иногда возникают проблемы: почему-то иногда если задаешь width: 100% то padding может увеличить размеры блока, такая ситуация была на некоторых проектах, даже не разбирался почему, но похоже это связано с тем, что контент не влезал, а с маргином все проще, с ним подобных проблем не было.

[Stalker_RED]

caof19,
и да, мне лень отрисовывать ее кривыми, я просто прогнал через какой-то онлайн конвертер.

[caof19]

Stalker_RED, Не совсем верно, но вы подкинули мне хорошую идею, так оно даже лучше
Только такой вопрос, как вы нашли данную иконку на сайте?

.myIcon:hover {
  background-color: grey;
}
.myIcon:hover g {
  fill: white;
}

[Антон Спирин]

caof19,

У меня на margin'ах все держится,

Не очень хороший подход.

с padding иногда возникают проблемы

Скорей всего надо добавить правило:

* {
  box-sizing: border-box;
}

[caof19]

Антон Спирин, Надо будет попробовать в следующий раз, спасибо

[Stalker_RED]

caof19,

как вы нашли данную иконку на сайте?

не понял вопрос. Я никакую иконку не искал, вроде как.

[Rustam Bainazarov]

caof19, ну, у текста же при наведении можно менять цвет. Если будет шрифтовая иконка — принцип тот же, потому что это тот же шрифт. Разницу между SVG и шрифтовой иконкой в плане изменения цвета я описал ниже. Если вставлять SVG через тэг use — с иконкой будет невозможно взаимодействовать.

Кроме того, внизу человек вам написал решение, как использовать тэг img и соответствовать при этом вашим требованиям (с помощью role="presentation").

[I_GRIN_I]

А тег noindex это плохо?

[caof19]

I_GRIN_I, а как этот вопрос относится к моему вопросу?)

[I_GRIN_I]

caof19, чтобы не индексировать картинку вообще

Answer 3

[lumb]

И вместо картинки здесь похоже используются шрифты, вроде fontawesome

Comments

[caof19]

Не знал, о существовании такого, но в любом случае, по мне проще из макета взять картинку, чем искать необходимую картинку

[lumb]

caof19, зря. Загружается быстрее, иконок очень много, подключается и используется элементарно, цвет меняется как угодно в css и т.д. И вообще, это уже "формат".
+ иконки используются не только как в вашем примере, но и для пунктов меню и кто во что горазд, - удобно в общем.

[caof19]

В плане смены цвета согласен, это удобнее, но одновременно и сложность добавляет, есть у меня один пример

Answer 4

[Сергей Соколов]

Похоже на компонент «карточка» (Card). Посмотрите его реализацию в разных фремворках.

Напр. в Bootstrap.

Answer 5

[Максим]

https://codepen.io/topicstarter/pen/vQegoz - не увидел проблему - если критично вставить img то можно на прямую вставить svg - для иконок это нормально

Comments

[caof19]

Так я же не писал, что не могу это сделать, я спросил какой вариант будет лучше