Entrevista de Frontend - JS HTML CSS

Кастомизация списков: от ::marker до @counter-style Современный CSS позволяет гибко управлять списками, не перегружая HTML лишними элементами. Разбираем три основных подхода. ✅ Псевдоэлемент ::marker Самый быстрый способ изменить стандартную точку или цифру. Что можно: менять color, font-size и font-family. Ограничение: нельзя задать фон или произвольное позиционирование. Нюанс: маркер выравнивается по базовой линии текста. При большом font-size он сместится вверх относительно строки. ✅ Директива @counter-style Инструмент для создания собственных систем нумерации (Baseline 2023). system: cyclic — позволяет зациклить любые символы или эмодзи (например, фазы луны 🌑🌓🌕). system: extends — модифицирует стандартные стили (например, заменяет точку после цифры на скобку: 1) вместо 1.). ✅ Полный контроль через ::before Когда возможностей ::marker не хватает для сложного дизайна. Доступность: при list-style: none обязательно добавляйте role="list" в HTML, иначе Safari перестанет озвучивать список корректно. Механика: используйте функции counter(list-item) для простых списков или counters(list-item, ".") для вложенной нумерации (1.1, 1.2). Верстка: через position: absolute маркеру можно задать любые размеры, фон и точное положение относительно текста. Источник: Ссылка скрыта 👉 @frontendInterview