Кастомизация списков: от ::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 маркеру можно задать любые размеры, фон и точное положение относительно текста.

Источник: https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/

👉 @frontendInterview

TanStack Form: новый стандарт для работы с формами в JS

Все знают TanStack Query (бывший React Query), который перевернул работу с запросами. Теперь команда разработчиков выпустила TanStack Form - библиотеку для управления формами, которая решает старые боли фронтендеров.

Главные фишки:

🟢Агностицизм: работает не только с React, но и с Vue, Angular, Solid, Svelte и даже Vanilla JS.

🟢100% Type-Safe: глубокая интеграция с TypeScript. Ошибки в названиях полей или типах данных подсвечиваются прямо при написании кода.

🟢Валидация без привязки: можно использовать любую привычную библиотеку (Zod, Valibot, Yup) или писать кастомные функции.

🟢Производительность: библиотека обновляет состояние точечно, поэтому даже огромные формы с сотнями полей не будут тормозить интерфейс.

Если вам надоело мучиться с настройкой сложных форм, TanStack Form - отличный кандидат на замену старым инструментам.

👉 @frontendInterview

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер

3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе

🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00

ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться.

Как это будет:
📂 Александр Дмитриев, разработчик из известного международного финтеха, ex-VK, ex-Ozon проведет вайбкодинг секцию разработчику-добровольцу;
📂 Александр будет задавать реальные вопросы с секций, которые проводил сам и комментировать ответы;
📂 В конце можно будет задать любой вопрос Александру.

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.