Уместно ли в таких ситуациях использовать figure & figcaption?
Доброго дня!
Есть такие карточки:
Я реализовываю через ol > li > a (циферки в правом верхнем углу карточки вешаю на before техникой counter). Стоит ли делать еще доп вложенность (ради семантики) через figure (position: relative), img (position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;) и figcaption? Хорошая ли это практика?
Картинке-то зачем абсолют?
Да и для псевдо и подписи есть гриды.
figure- это отличный элемент для обрачивания картинки.
Является ли при этом текст figcaptionили нет, решаю в зависимости от происходящего.
Если картинка первична и текст описывает что на ней, то да, использую figcaption.
Если первичен текст, а картинка его сопровождает, то для текста использую другие теги (заголовки подходящего уровня или p или что-то ещё)
Pavel_20, против object-fit я ни слова не сказала. Абсолют-то при чем?
Вы, я так понимаю, убираете из потока псевдо и подпись. Картинка в родителе остается одна. И может прекрасно занять всю площадь родителя. Да, именно с помощью object-fit.
Но сейчас есть гриды. А значит, и для псевдо и подписи тоже нет нужды в абсолютах.
Pavel_20, ну и так, на всякий случай уточним, у Вас картинка не фоновая. Она контентная. То, что на ней изображено, судя по всему, важно для пользователя как контент. Значит через img.
Ankhena, нет, как раз картинку я абсолючу, а надпись я прибиваю книзу задавая родителю display: flex; align-items: flex-end;
Насчет псевдо, видно я не совсем еще продвинутый в гридах. И разве он не на абсолюте работал всегда (родителю relative)?
andand44, ну просто если есть счетчик, то ol как-то семантичнее кажется. Другое дело, что li-шка тогда просто лишней оберткой выступает, так как еще ссылка нужна внутри
Простой
