CSS *

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

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

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

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

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

Когда работаешь с такими масштабными продуктами, как мы делаем в VK, быстро начинаешь ценить код, который можно не писать. Особенно если речь о небольших сценариях: открыть поповер, анимировать появление блока или подстроить поле под контент. Ещё недавно для таких задач мы почти автоматически тянулись к JavaScript. Но за последние два года CSS сильно расширил свои возможности для задач, связанных с интерфейсом.

Я Максим Кузнецов, занимаюсь оптимизацией производительности и улучшением стабильности веб-версий ВКонтакте. В этой статье расскажу, что уже можно использовать как альтернативу JS, что стоит попробовать аккуратно, а за чем пока лучше просто следить.

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

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

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

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

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

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

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

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

Что, если я скажу вам, что в 2026 году JavaScript для всего этого нам больше не нужен?

У вас бывает такое чувство, когда вы при выполнении работы упёрлись в какую-то проблему и что-то внутри подсказывает, что не может такого быть, чтобы у неё не было решения? Когда кажется, что уже всё пропало и мы столкнулись с фундаментальным ограничением реальности, но отказ принять это продолжает вести вас в дебри спецификаций, беседы на Github 10 летней давности и изучение статей гигантов уже прошедших этот путь и поделившихся с нами своими результатами? И вот спустя многие часы напряжённого скрипа извилин вы дописали очередную строчку, обновили страницу и вот оно, то, что вы хотели получить смотрит на вас с экрана? Это ощущение успеха, наверное, в той или иной степени знакомо каждому инженеру. В такие моменты мне, обычно, очень хочется поделиться результатом с коллегами и, по возможности, написать статью если это может быть полезно кому-то ещё. В этой записи я собрал 3 подобных ситуации, где в рамках нашей работы возникли решения, которые, насколько мне известно, довольно уникальны и в полной мере не были описаны раньше. Приглашаю вас разделить со мной радость обнаружения решения, которое казалось невозможным!

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

В CSS огромное количество псевдо-элементов и псевдо-классов. Так много, что я не знаю ни одного фронтендера, который помнит все. Я тоже не исключение из этого правила.

Часто нахожу что-то новое и интересное у зарубежных блогеров, рассказывающих о CSS. Так что неудивительно, что мы с вами упускаем пользу. Это нормально.

Сегодня я пришёл к вам, чтобы исправить это. Мы рассмотрим несколько псевдо-элементов и псевдо-классов, которые, по моему мнению, редко используют. Хотя они принесут немало пользы!

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

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

Сегодня фронтендеры любят подход атомарных классов, в частности Tailwind. Я не имею ничего против этого подхода. Каждый волен выбирать сам, с чем ему работать.

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

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

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

CSS «слушает» нас. Нет, не в буквальном смысле. Суть в том, что в CSS появляется все больше псевдоклассов, которые позволяют реагировать на события JS без необходимости писать сам JS. Формально псевдоклассы отслеживают состояния, а не события, но порой они настолько похожи на обработчики событий, что разница становится почти незаметной (хотя в контексте CSS это не так уж важно).

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

Я сейчас часто обмениваюсь книгами. И так получилось, что мне попалась книга по вёрстке 2004 года. Мне было забавно почитать о техниках, которые были в то время. Я даже вдохновился написать статью. Вот я и здесь.

Сегодня я расскажу о техниках, которые были пятнадцать лет назад. Я как раз в это время начал работать верстальщиком. Уверен, что большинство из вас их никогда не видели. А старички смахнут скупую слезу и вспомнят время, когда были моложе.

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

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

В прошлом месяце я опубликовал статью с вопросами о HTML. Неожиданно для меня, она понравилась многим и стала одной из самых популярных за последнее время. Раз так получилось, то почему бы не сделать то же самое про CSS? Вот я и пришёл со своими вопросами и, конечно, ответами.

Моя цель — это развлечь вас. Хотя вопросы связаны с практикой, на них не так просто ответить. Если вы не сможете ответить на большинство, то ничего страшного. Но, возможно, они покажутся вам легкотнёй.

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

Cвойство backdrop-filter: blur() под капотом работает совсем не так, как интуитивно кажется, и это приводит к багам, которые нелегко воспроизвести и довольно сложно объяснить. Потому давайте разбираться.

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

Я начал использовать медиа-запросы ещё в 2011 году. Помню, как на работе руководитель подарил мне книгу Итана Маркотта «Отзывчивый веб-дизайн». В тот день я даже не работал, а сел читать её. В конце дня я сделал свою первую реализацию адаптивной вёрстки.

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

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

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

Webnative - фреймворк для разработки нативных приложений на языках веба с использованием нативных webview компонентов.

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

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

Как человеку, который является поклонником CSS, мне немного грустно это наблюдать. Столько интересных возможностей остаётся без внимания! А ведь с их помощью код нередко становится короче, надёжнее и проще для понимания. Поэтому я собрал несколько примеров популярных решений прошлого и переписал их, используя новинки CSS, вышедшие за последние несколько лет.

Давайте посмотрим, что у меня получилось.

Когда возникает идея создать браузерный IRC-клиент без JavaScript, приходится сталкиваться с классической проблемой фронтенда: все насколько привыкли гнать динамику через JavaScript, что перестали замечать возможности HTML/CSS с щепоткой серверной магии по реализации многих фич. HTTP Streaming существует с давних времён, а CSS эволюционировал настолько, что может справиться с логикой состояний — но мы упорно продолжаем грузить мегабайты JavaScript (и иногда даже WebAssembly) для решений, которые вполне можно реализовать иначе.

Идея создать IRC клиент без JavaScript не совсем нова (хоть это и выяснилось уже после создания такого :) ). Ещё в нулевых появился CGI:IRC — настоящий IRC клиент, который может работать полностью без JavaScript, позволяя людям общаться в реальном времени через браузер, даже если JavaScript по каким-то причинам не работал. Но это было в эру table-layouts, и когда CSS не был так развит, как сейчас. Сегодня возможностей больше, и мы воспользуемся ими, чтобы навернуть функциональность, которая не видана CGI:IRC.

Результат можно глянуть (хоть и с дополнительной стилизацией и изменениями, которые не так важны для статьи) здесь, а ещё на GitHub

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

Мне всегда нравилось следить за тем, как развивается CSS. Стараюсь следить за новыми возможностями, чтобы не пропускать что-то действительно важное. И недавно подумал: «А почему бы не рассказать о них читателям Хабра?» Так я и оказался здесь.

Я составил список новинок, которые кажутся мне особенно интересными и важными. Они всё ещё экспериментальные. Браузеры только в последние месяцы начали поддерживать их. Так что это суперсвежие штуки.

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

Я попробовал собрать маркетинговый сайт через Claude Design - и быстро упёрся в лимиты токенов и непрозрачность облачного тула. Перешёл на Open Design - open-source альтернативу, которая цепляет твой Claude Code, держит дизайн-систему как DESIGN.md в репозитории и работает локально. Под катом - четыре практики, которые сработали на сайте конференции: design-as-code в git, симлинк дизайнера в код сайта, два markdown-файла под бренд и дизайн токены, и как мы учили автономных агентов делать сайт с помощью нашей дизайн системы

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

Мне нравится рассказывать про HTML и CSS. Отдельное удовольствие — находить очень старые фичи языков, о которых редко кто знает. Сегодня я пришёл как раз с ними.

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

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

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

Рендерер Scratch имеет долгую историю связанных с SVG уязвимостей. Их источником становится то, что Scratch парсит сгенерированный пользователем (то есть контролируемый нападающими) контент в элемент <svg> и добавляет его в основной документ для выполнения различных операций (например, для измерения ограничивающего прямоугольника SVG более надёжным образом, чем viewbox или width/height).

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

Я считаю, что подход Scratch к санации SVG обречён на провал. Чтобы объяснить это, нам нужно совершить путешествие по истории санации SVG в Scratch и посмотреть, насколько хорошо он с этим справлялся.