Дублирующийся контент - действительно ли это так плохо?

С появлением display contents и grid стало гораздо легче решать задачи, которые раньше могли требовать дублирования или перестроений DOM на JS.
Сейчас в большинстве случаев этого можно избежать.

Поэтому, почему бы и не сделать, как просит SEOшник. Тем более, что он прав и этот аргумент был всегда.

Как выровнять крестик?

vlados096zver, как хотите и смотря как вы храните svg

Как лучше всего реализовать данный фон?

Никита Геннадич,

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

По меньшей мере дважды написали, что есть.

Нюансов у псевдоэлементов там не меньше перечислено.

Пока нет примера или ссылки на эти нюансы - пустые слова.

Я вам большой секрет открою: такие вещи как иконки зачастую делаются именно вставкой SVG, либо буквально тегом SVG, либо спаном с бэкграундом, представляете

Представляю, так, действительно делали и делают те, кто не заметил, что 2025.

Я всё ещё не понимаю при чём тут добавление ОДНОГО дива в конкретном кейсе.

Вы и не хотели этого понимать.

Но я и не для вас старалась, а для автора и для тех, кто ещё придёт сюда с аналогичными вопросами.

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

С вами прощаюсь.

Как лучше всего реализовать данный фон?

Никита Геннадич,

Пф... О сколько вам, открытий чудных.

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

То что за много лет в стандарте так и не предложили нормальный путь стилизации инпутов кроме разных извращений с разными псевдо-элементами, которые приходится по разному указывать для разных браузеров это крайне показательно демонстрирует ущербность подхода стилизации через псевдо-элементы

Вот, например, с этой. Где, как и почему обычные before after у вас перестают одинакового работать внутри тега уже неимеющего начальных стилей при appearance none.

Ну понятно что ещё от z-index родителя зависит.

Верно. И ещё почти десятка других нюансов. В статье на MDN перечислены.

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

Смартфонам не плевать.
Месяц назад был сайт, на смартфонах скрипел. Убрали около 10 тыс нод, сократив примерно на треть, забыла сколько точно было до, можно по коммитам посмотреть, если прям интересно. Стало заметно легче.

Во-первых у списков есть list-style-image

Есть, конечно. Ещё бы к нему можно было что-то ещё хорошее применить.

. Да, в целом семантическая вёрстка это здорово, но учитывая что в коде всё равно неизбежно торчит куча IMG или SVG этот аргумент смысл теряет.

Если эти img это декоры, а не контент, то не понятно, что они делают в разметке.

С svg аналогично. Кроме случаев сложной анимации или другого взаимодействия (например, карта с областями или схема этажа и тд) svg в разметке делать нечего. Современные спрайты (стеки) работают из css, кастомные свойства оттуда же, смена цвета тоже. Даже прилетевшая с бэка в атрибут style кастомка будет лучше.
Если на ваших сайтах они до сих пор в разметке, имеет смысл хотя бы на новых сайтах переходить на светлую сторону.

Ладно, я понял. Продолжайте верстать как вам нравится. У меня нет вопросов к вам.

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

И что-то пока я ни единого внятного аргумента почему простой и очевидный способ с дивом плох я не вижу

Мне жаль, но может быть через некоторое время.

Кстати, можно загуглить критерии качественной вёрстки. В большинстве будет что-то типа "нет лишних тегов используемых только для стилизации и которые можно заменить на псевдо".
Например, начать отсюда https://habr.com/ru/companies/htmlacademy/articles...

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

Как задать прозрачность изображению?

jjsso, Пройдите интерактивные тренажеры в htmlacademy.ru уже будет полегче

Как задать прозрачность изображению?

jjsso,

может найду решения

В смысле, "может"?

<div>
  <header/>
  <section class="intro"/>
</div>

div {
 background: url() left -20px repeat-y;
 }

20px это сдвиг вверх, посмотрите сколько он в макете.
Сама картинка из 8 лепестков: два первых ряда.

Что тут искать? Простейшие свойства.

Вроде тема фонов это одна из первых тем по CSS. Где вы учитесь, что вам не рассказали даже такой базы?

Если подразумевается, что налево фон повторяется до края окна, а контент центрирован, то структура такая же, фон псевдоэлементу с шириной 50% - "что там выходит от правого края фона до центра".
Тогда в качестве самого фона берем 4 лепестка и репитим и по горизонтали и по вертикали.

Как лучше всего реализовать данный фон?

Никита Геннадич,

Имел ввиду, разумеется, position: absolute, исправил в ответе.

Ага
Со всеми приключается.

Нет там ничего сомнительного, это просто номер слоя, в чём тут можно запутаться?

z-index
Вопрос вам, как профи (просто, чтобы вспомнить, что всё не так просто):
На странице есть элементы с z-index 0, 20 и 99. Всегда ли 99 будет поверх двух остальных?
Для новичков про нюансы контекста наложения:
css.yoksel.ru/kontekst-nalozheniya
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

В чём минус отдельного дива не понимаю до сих пор.

Давайте так: повторю, что один див вообще не сделает погоду и мы не будем говорить про экономию на спичках. Будем считать, что страница сложная и есть за что бороться и что оптимизировать.

before/after vs div

Простые аргументы:

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

(Если вернуться к тому же z-index или избавлению от него, совсем элементарная замена before на after поменяет порядок наложения элементов. В случае div, придётся переставлять его в разметке.)

Яркий пример: современная стилизация радио и чекбоксов. Можно нагородить древний огород из пустых тегов и сложных селекторов. (Написание таких селекторов, несомненно, очень полезно при обучении и изучении работы CSS, но в реальных проектах лучше без них)
А можно использовать appearance none и стилизовать напрямую, а также использовать before/after этих инпутов.

Посложнее:

Чем сложнее DOM дерево, тем тяжелее будут работать сложные селекторы.
Это же усложнит и замедлит операции, связанные с обходом, поиском и манипуляциями через JS.
При замене на псевдо снижается нагрузка на память, поскольку каждый DOM-элемент — это объект с собственными свойствами и событиями, а псевдоэлементы — лишь часть визуального оформления.

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

В вопросах на stackoverflow и других частных ресурсах есть примеры исследований скорости рендеринга и fps при анимациях, легко гуглятся. Не хочу приводить сюда ссылки, потому что кроме этого там есть и устаревшая информация. Да и думаю, что вы, как профи, можете самостоятпельно сотворить такой тест, если действительно интересно.

Представьте, что спискам на сайте нужно добавить стрелочки/галочки/звёздочки. Вы же не станете засовывать в каждый по пустому спану. (Я надеюсь)

Почему-то один из популярных запросов ко мне: у нас тупит страница, хепл плиз. Речь в основном о длинных страницах или многоблочных лендингах. Обычно с них удается удалить пару десятков тысяч узлов. Конечно, тут роль играет не только количество, но и их вложенность.

Псевдо для стилизации применять — это всегда кривые-косые костыли, которые везде по разному выглядят.

Действительно по-разному могут работать всякие ::marker, специфические псевдо инпутов или селектов и т.д.

::before и ::after работают всюду одинаково и их стилизация отличается от div только
1. Наличием content
2. По умолчанию разным display, у div он блочный, у псевдо инлайновый.
3. Начальный порядок "элементов". Before всегда первый, after последний, div можно вставить куда угодно.
Всё.

Если у вас что-то пошло не так, приходите с отдельным и конкретным вопросом с примером. Можете даже позвать.

Как повторить фильтр с фигмы?

vlados096zver, часто такие картинки дешевле экспортировать как png, даже с учетом разной плотности и т.д., чем блюрить.
Но окончательное решение, конечно, зависит от ТЗ и того что в макете.

Как лучше всего реализовать данный фон?

Никита Геннадич,

а в чем проблема прилипшего фона?

Ни в чем, кроме того, что он там не должен прилипать. Он там с девушкой дружит.
Пятно само по себе могло бы и прилипнуть десяток или пару десятков лет назад (когда там bg attachment было модно), но с девушкой - очень сомнительно.
Но это скорее вопросы к дизайнеру или ТЗ.

Что не так с z-index? Тоже какие-то проблемы о которых рассказали на курсах?

С одним - ничего или близко к тому для современных браузеров.
Только зачем вообще, если можно без него.

очевидно z-index должен быть выше

Очевидность работы z-index вообще сомнительна, а для новичков особенно.
И пока не появилось прозрачности или трансформа или других аспектов меняющих контекст наложения, всё будет хорошо. Но мы вообще не знаем, что там ниже в макете.

У вас, видимо, привычка верстать всратые убогие лэндинги ни на секунду не задумываясь о том как ими люди пользуются. Как и у вашего дизайнера.

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

Как лучше всего реализовать данный фон?

Никита Геннадич,

а, то есть transform это гораздо лучше отдельного дива?)

Т.е. вы всё таки знаете минусы лишнего дива вместо псевдика. Уже хорошо.

Но нет, трансформ не лучше.
Лучше просто фоном.
Но если выбирать между псевдо с трансформом и дивом с ним же, то лучше псевдик.

Как лучше всего реализовать данный фон?

position fixed

Ну и зачем там прилипший фон?
Да ещё и дивом сделанный?

z-index (у остальных элементов, очевидно z-index должен быть выше).

Вообще отличный план (Не надо так делать, если есть возможность не делать).

прибитый справа вверху

Теперь откройте на большом мониторе: контент остался по центру, а девушка с пятном улетела вправо.
Покажите результат дизайнеру, пусть плачет.

Нужно записать видео с аудио из браузера. Какой программой?

OBS, Movavi

Как повторить фильтр с фигмы?

Открываете инструменты разработчика. Вкладка Styles. Находите нужное свойство. Кликаете мышкой по значению, стрелками с клавиатуры увеличиваете или уменьшаете значение.
До тех пор, пока не понравится.

Как лучше всего реализовать данный фон?

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

Считать от центра. Не важно фон или псевдо.
Либо от правого края и трансформ с %.

Идея экспортировать вместе с девушкой - неплоха, если девушка не меняется.
Только не забудьте сделать варианты для разной плотности экранов и через image-set

Как выровнять текст и картинку внутри ссылки?

oksana_melikhova,
1. Абсолют, с виду, лишний. Иконка ведь внутри ссылки. Флекса достаточно.
2. Если вдруг хочется всё таки абсолютом, то нужно разобраться со значениями. Откуда вылезли 80% и 120% и 40px в паддинге.
Когда эти числа обретут логику, станет нормально.

Типа
left 0
top 50%
translateY -50%
И padding ссылки 100px + 40px = 140px (можно кастомными свойствами)
Так логично.

Но повторю, что разумнее флексом.

Как задать прозрачность изображению?

jjsso, фоном хедеру. Если хедер это весь белый блок.
Либо фоном псевдоэлемента хедера.

Если хедер это только лого с меню, а секция отдельно, то обернуть в div.
Альтернатива - считать высоту псевдика на JS и передавать через кастомное свойство.
Либо гридом, если body целиком грид.

В разметке ему в любом случае делать нечего.

Как задать прозрачность изображению?

jjsso, хоть фигмой, хоть прямо хромом или любимым приложением.

Хромом

Как задать прозрачность изображению?

jjsso, пи-пет-кой!
Ещё раз: не посмотреть цвет в панели, не стили через inspect, а тыкнуть пипеткой.

У вас белый фон, он не меняется, вам не нужна прозрачность или наложение, можно ничего не усложнять.

Как задать прозрачность изображению?

jjsso, что показывает, если тыкнуть в него пипеткой?

Не влезает шрифт в input?

Способы с изменением размера шрифта не предлагать, так как не помогает.

Звучит по меньшей мере удивительно.

Но почитайте ещё про ascent-override, descent-override и line-gap-override