CSS *

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

Слоёв в передаче пять. Цвет, вариативный шрифт, сетка, прелоадер и карточка упаковки. По каждому покажу, что лежало в Figma и как я бы выгрузил это разработчику сейчас, токенами и короткими спецификациями. Код в статье мой, это пример формата передачи, а не вёрстка сайта.

Привет, Хабр!

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

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

Давайте посмотрим, что я подготовил.

Я проектировал каталог и калькулятор сметы для сайта компании, которая строит загородные дома. Моя часть была в проектировании и дизайне, вёрстку и бэкенд делала другая команда. Сайт запущен и работает. Недавно я снял с него разметку, CSS и клиентский скрипт и положил рядом с макетами, чтобы проверить, как решения дошли до кода.

Расскажу, как я раскладывал смету на данные, как она устроена в продакшене, какие граничные случаи я оставил без правила и какую спецификацию я передал бы сейчас. Почти все ошибки ниже начинаются в макете, а не у разработчика.

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

Здесь не будет про модели. Будет про то, как длинный неструктурированный результат обработки звонка превращается в экраны, которые читаются за минуту, и что происходит с дизайн-системой, когда её выгружают из Figma в CSS-переменные. Числа из макетов сняты через Plugin API, код токенов взят из выгрузки, данные на скриншотах демонстрационные или обезличенные.

У каждого HTML-элемента есть всего два псевдоэлемента: before и after — и с помощью них можно сделать крутые элементы.

Разберём, как с помощью обычного CSS превратить два псевдоэлемента в крутые графические штуки. Как создавать сложные формы через clip-path, собирать композиции из нескольких градиентов, работать с масками и режимами смешивания, а также строить анимации и элементы интерфейса без лишней HTML-разметки.

Делал интерактивную открытку на день рождения и хотел, чтобы картинка не просто появлялась, а «рисовалась»: сначала карандашные линии, потом по касанию её заливает акварель, причём с рваным краем, как у краски, которая впитывается в бумагу.

Готовых решений под такое не нашёл. Видео не подходило: нужна была реакция на тап и чёткость на любом экране. В итоге всё собралось на чистом SVG, паре фильтров и небольшом количестве JS. Ниже разбираю по шагам, с кодом и граблями, на которые наступил.

Теперь каталог живёт в HTML и CSS: текст, таблицы и схемы лежат в одном проекте и правятся вместе, PDF получается печатью из браузера. CorelDRAW остаётся только на полиграфическую доводку. Насколько это проще, видно по предыдущему каталогу: 35 страниц, текст и таблицы через Word, схемы через Inkscape, макет в CorelDRAW — и каждая правка означала новый экспорт и повторную ручную доводку. Что дал этот странный подход и чем пришлось заплатить.

Если следить за React только по крупным релизам, легко пропустить момент, когда библиотека тихо меняет направление. React 19.3 — как раз такой случай. Сам релиз вышел 9 сентября 2026 года. И я хочу поделиться парой моментов из этого обновления. Рассмотрим пару хуков это ViewTransition и Fragment Refs. Еще, что я могу выделить, это новые возможности для SSR, Server Components и работы с браузерными API.

Привет, Хабр!

Я интересуюсь вёрсткой с момента появления первых версий браузера Google Chrome. Конечно, современному фронтендеру тяжело понять то, что я испытывал с коллегами. Мы именно те разработчики, которые знали кучу рецептов, как починить определённый баг в конкретном браузере.

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

По этой причине сегодня пришёл к вам исправлять эту ситуацию. Мы рассмотрим старые возможности HTML и CSS, которые сегодня всё так же полезны.

Давайте посмотрим, что я подготовил.

Организованная разработка фронтенда должна отвечать на три вопроса: компоненты, ререндеринг, стилизация. И LandTS легко на них отвечает.

Большой визуальный гайд по CSS Anchor Positioning: от базовой привязки элементов до создания прочных соединителей и цепочек якорей.

Хабр, привет.

Многие люди с интересом относятся к истории. Читают книги, рассматривают архитектуру городов, смотрят фильмы времени наших родителей. Мне кажется, веб достиг периода, когда мы можем с интересом поговорить о прошлом HTML и CSS.

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

Давайте посмотрим, что я вам подготовил.

Год назад мы с другом делали интернет‑магазин для его девушки. Она модель, и у неё была совместная линейка одежды с одним брендом. Нужны были каталог, лукбук, страница о ней и промо‑баннеры под каждую новую коллекцию. Каталог сделали на WooCommerce, а главную, лукбук и баннеры я сверстал в Elementor. Чтобы было быстрее, вставил вёрстку в HTML‑виджеты, подогнал стили, и всё выглядело ровно так, как задумывали. Передал доступы и забыл.

Через пару недель она пишет: «кажется, я сломала сайт». Выходила новая коллекция, она хотела поменять текст на баннере, открыла виджет, увидела там кучу div‑ов и аккуратно поправила пару строк. Заодно случайно стёрла один закрывающий тег. Половина главной съехала, подвал оказался посреди лукбука.

Винить её не за что. Elementor мы и выбрали для того, чтобы она меняла баннеры и тексты сама, мышкой, без нас. А я отдал ей конструктор, внутри которого лежит обычный HTML. Формально это Elementor, а по сути та же ручная вёрстка.

Всем привет! Меня зовут Даниил Николаев и я frontend-разработчик в компании "Исходный Код"

На каждом kickoff нового проекта всплывает один и тот же сценарий: один разработчик топит за утилиты Tailwind, второй отстаивает чистоту и надежность CSS Modules, третий по привычке тянет проверенный CSS-in-JS, а кто-то просто молча открывает .scss и выходит из созвона.

В этой статье мы опустим споры о «красивом синтаксисе» и разберем инженерную сторону вопроса: кто на самом деле платит за динамику — сборка или браузер клиента.

Заглянем под капот ключевым подходам в мире React (для уровня middle и middle+): разберем классические CSS Modules, ушедший в maintenance mode styled-components, Emotion, современный Tailwind v4 на движке Oxide и перспективный zero-runtime (Linaria, Vanilla Extract). Посмотрим, что реально происходит с CSSOM, reflow и рендером в браузере, а в конце — соберем практическую матрицу выбора без фанатизма и хайпа месяца.

Привет, Хабр!

Я часто вам рассказываю, как HTML и CSS помогают улучшить пользовательский опыт в наших веб-интерфейсах. Мне это наскучило. Сегодня я хочу поговорить с вами о практиках, которые заставляют пользователей очень сильно ругать разработчиков.

Мы рассмотрим примеры, когда только использование HTML и CSS может привести к замешательству людей. Многие же думают, что эти технологии безопасны и не могут принести вреда. Вот и проверим это.

Давайте посмотрим, что я вам подготовил.

Почему логотип Coca-Cola — не шрифт, зачем одной гарнитуре сотни знаков, почему хороший веб-шрифт надо проверять на плохом мониторе и что именно нейросети уже могут забрать у шрифтового дизайнера?

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Александрой Корольковой — арт-директором Paratype, автором книги «Живая типографика» и YouTube-канала «Шрифтовой видеоблог», соавтором PT Sans, PT Serif и других известных шрифтовых систем. Обсудили историю профессии от металлических литер до веб-шрифтов, устройство работы шрифтовой студии, лицензии и цены, роль кириллицы, инструменты, заказные проекты, ИИ и довольно практичный ответ на вопрос, сколько шрифтов действительно нужно одному сайту. 

Хочу рассказать о своей npm‑библиотеке — это мой второй и самый сложный npm‑проект на момент написания статьи.
Библиотека решает ряд проблем и ограничений связанных с дефолтным поведением браузерного элемента скролл.

Глубоко в код погружаться не буду — поделюсь историей создания и мотивацией.✨

React 19.3 уже доступен в npm!

В прошлом году мы представили View Transitions и Fragment Refs как новые экспериментальные API, которые готовились к появлению в React. Теперь оба API получили стабильный статус в React 19.3.

В этой статье разберём, как они работают, а также рассмотрим другие заметные изменения в этом релизе.

Расположить иконку рядом с текстом — с этой задачей сталкивался каждый фронтенд-разработчик. Вроде бы ничего сложного.

Тогда почему с ней не могут справиться ни Apple, ни Microsoft, ни Google, ни другие техногиганты? 

Меня зовут Армен Аллахвердян, я фронтенд-разработчик из команды дизайн-системы Авито. В статье разберёмся, почему простая на первый взгляд задача вызывает столько проблем, и выясним, как надо и как не надо выравнивать иконки.

Выкатили новую фичу, а потом бэкендер со своим Firefox пишет, что у него что-то не работает? Или пользователь с Safari жалуется на неудобства? Ничего страшного: поищу причину в интернете, починю баг и продолжу использовать для разработки Chrome </sarcasm>.

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