Привет, Хабр!
Я помню время, когда фронтендеры активно делились своими велосипедами. Буквально каждый день я встречал статьи, где автор рассказывает, какую классную штуку он придумал.
Я, конечно, не такой умный. Ничего нового я не придумал, но мне хочется показать вам мой набор базовых стилей, которые я использую для всех проектов. В нём есть старые фишки, есть малоизвестные, а есть и новые.
Давайте посмотрим, что я вам подготовил.
Вступление:
Привет, Хабр! Я всегда любил физику и ретро-эстетику. Однажды мне захотелось сделать научно-популярный проект, который не просто показывает текст с формулами, а позволяет «покрутить» физику руками. Так появился ЦУП-7 — интерактивный пульт с рендерингом черной дыры на WebGL и пятью квантовыми экспериментами. В этой статье я расскажу, как устроен проект под капотом, с какими проблемами я столкнулся и почему решил отказаться от фреймворков.
Привет, Хабр!
Мне кажется, что каждый фронтендер множество раз сталкивался с ситуацией, когда CSS переставал работать так, как ожидаешь. Причём не имеет значения опыт разработчика. С одинаковой вероятностью в тупик может попасть как джун, так и опытный разработчик. Не зря же CSS стал героем такого количества мемов.
Я и сам не раз попадал в подобные ситуации. Но, несмотря на все эти сюрпризы, CSS мне по-прежнему нравится. Конечно, изменить стандарты я не могу. Зато могу рассказать о ловушках, в которые когда-то я попался. Возможно, некоторые из них окажутся неожиданными и для вас.
Давайте посмотрим, что я подготовил.
У каждого HTML-элемента есть всего два псевдоэлемента: before и after — и с помощью них можно сделать крутые элементы.
Разберём, как с помощью обычного CSS превратить два псевдоэлемента в крутые графические штуки. Как создавать сложные формы через clip-path, собирать композиции из нескольких градиентов, работать с масками и режимами смешивания, а также строить анимации и элементы интерфейса без лишней HTML-разметки.
Привет, Хабр!
Я интересуюсь вёрсткой с момента появления первых версий браузера Google Chrome. Конечно, современному фронтендеру тяжело понять то, что я испытывал с коллегами. Мы именно те разработчики, которые знали кучу рецептов, как починить определённый баг в конкретном браузере.
Но тогда были не только плохие моменты. В этом легаси осталось много хороших возможностей. Только они затерялись с течением времени. Мне же от этого грустно.
По этой причине сегодня пришёл к вам исправлять эту ситуацию. Мы рассмотрим старые возможности HTML и CSS, которые сегодня всё так же полезны.
Давайте посмотрим, что я подготовил.
Большой визуальный гайд по CSS Anchor Positioning: от базовой привязки элементов до создания прочных соединителей и цепочек якорей.
Хабр, привет.
Многие люди с интересом относятся к истории. Читают книги, рассматривают архитектуру городов, смотрят фильмы времени наших родителей. Мне кажется, веб достиг периода, когда мы можем с интересом поговорить о прошлом HTML и CSS.
Сегодня я пришел к вам, чтобы оглянуться немного назад и вспомнить фичи, которые когда-то были частью веба. Возможно, некоторые из них вы когда-то даже использовали.
Давайте посмотрим, что я вам подготовил.
Привет, Хабр!
Я часто вам рассказываю, как HTML и CSS помогают улучшить пользовательский опыт в наших веб-интерфейсах. Мне это наскучило. Сегодня я хочу поговорить с вами о практиках, которые заставляют пользователей очень сильно ругать разработчиков.
Мы рассмотрим примеры, когда только использование HTML и CSS может привести к замешательству людей. Многие же думают, что эти технологии безопасны и не могут принести вреда. Вот и проверим это.
Давайте посмотрим, что я вам подготовил.
Хочу рассказать о своей npm‑библиотеке — это мой второй и самый сложный npm‑проект на момент написания статьи.
Библиотека решает ряд проблем и ограничений связанных с дефолтным поведением браузерного элемента скролл.
Глубоко в код погружаться не буду — поделюсь историей создания и мотивацией.✨
Расположить иконку рядом с текстом — с этой задачей сталкивался каждый фронтенд-разработчик. Вроде бы ничего сложного.
Тогда почему с ней не могут справиться ни Apple, ни Microsoft, ни Google, ни другие техногиганты?
Меня зовут Армен Аллахвердян, я фронтенд-разработчик из команды дизайн-системы Авито. В статье разберёмся, почему простая на первый взгляд задача вызывает столько проблем, и выясним, как надо и как не надо выравнивать иконки.
Выкатили новую фичу, а потом бэкендер со своим Firefox пишет, что у него что-то не работает? Или пользователь с Safari жалуется на неудобства? Ничего страшного: поищу причину в интернете, починю баг и продолжу использовать для разработки Chrome </sarcasm>.
В этой статье рассмотрим, почему проблемы кроссбраузерности никуда не пропали в 2026 году, и попробуем понять, как заранее определять появление ошибок.
Когда работаешь с такими масштабными продуктами, как мы делаем в VK, быстро начинаешь ценить код, который можно не писать. Особенно если речь о небольших сценариях: открыть поповер, анимировать появление блока или подстроить поле под контент. Ещё недавно для таких задач мы почти автоматически тянулись к JavaScript. Но за последние два года CSS сильно расширил свои возможности для задач, связанных с интерфейсом.
Я Максим Кузнецов, занимаюсь оптимизацией производительности и улучшением стабильности веб-версий ВКонтакте. В этой статье расскажу, что уже можно использовать как альтернативу JS, что стоит попробовать аккуратно, а за чем пока лучше просто следить.
Привет, Хабр.
Я переживаю, когда вижу плохие интерфейсы. Мне не нравится, когда пользователю сложно или неудобно. У меня очень сильно подгорает от этого.
Вместо обычного ворчания я делюсь мыслями о том, как исправить ситуацию. Больше всего мне нравится показывать, что HTML и CSS могут помочь в этой задаче.
Я сделал такой выбор, потому что решения на основе этих технологий легко начать использовать или добавить в существующий проект. Даже не имеет значения, какой фреймворк используется.
Вот давайте проверим это. Сегодня расскажу о нескольких подходах, а вы скажите, насколько просто их использовать. Я буду ждать вас в комментариях.
А теперь давайте посмотрим, что я вам подготовил.
В вашей дизайн-системе могут быть особые требования к внешнему виду скроллбаров. К сожалению, нативные возможности стилизации весьма ограничены, поэтому, если вы сталкивались с подобными требованиями, единственный вариант — делать собственный компонент.
Для этого нам нужно решить несколько задач: понять, когда надо показывать ползунок, какого он должен быть размера и где находиться, обновлять положение при прокрутке и тому подобное.
Что, если я скажу вам, что в 2026 году JavaScript для всего этого нам больше не нужен?
У коллег увидел интересный HTML трюк для значений в SELECT, который раньше не встречал.
Задача: сделать мульти-селект. Значения, которые влезут на текущем экране отображаем, а остальные указываем цифрой.
Первая мысль: нужно смотреть размеры элемента и родителя. Динамический высчитывать размеры и пытаться понять, влезет еще одно на экран или нет.
Google выпустила бета-версию Chrome 154. В обновлении разработчики получили новые возможности для работы с CSS, веб-API, криптографией и интерфейсами. Среди заметных изменений — расширение возможностей WebSocket, новые методы работы с HTML, поддержка постквантовых алгоритмов в WebCrypto и улучшения поведения диалогов и всплывающих элементов.
У вас бывает такое чувство, когда вы при выполнении работы упёрлись в какую-то проблему и что-то внутри подсказывает, что не может такого быть, чтобы у неё не было решения? Когда кажется, что уже всё пропало и мы столкнулись с фундаментальным ограничением реальности, но отказ принять это продолжает вести вас в дебри спецификаций, беседы на Github 10 летней давности и изучение статей гигантов уже прошедших этот путь и поделившихся с нами своими результатами? И вот спустя многие часы напряжённого скрипа извилин вы дописали очередную строчку, обновили страницу и вот оно, то, что вы хотели получить смотрит на вас с экрана? Это ощущение успеха, наверное, в той или иной степени знакомо каждому инженеру. В такие моменты мне, обычно, очень хочется поделиться результатом с коллегами и, по возможности, написать статью если это может быть полезно кому-то ещё. В этой записи я собрал 3 подобных ситуации, где в рамках нашей работы возникли решения, которые, насколько мне известно, довольно уникальны и в полной мере не были описаны раньше. Приглашаю вас разделить со мной радость обнаружения решения, которое казалось невозможным!
Привет, Хабр!
В CSS огромное количество псевдо-элементов и псевдо-классов. Так много, что я не знаю ни одного фронтендера, который помнит все. Я тоже не исключение из этого правила.
Часто нахожу что-то новое и интересное у зарубежных блогеров, рассказывающих о CSS. Так что неудивительно, что мы с вами упускаем пользу. Это нормально.
Сегодня я пришёл к вам, чтобы исправить это. Мы рассмотрим несколько псевдо-элементов и псевдо-классов, которые, по моему мнению, редко используют. Хотя они принесут немало пользы!
Давайте посмотрим, что я вам подготовил.
Привет, Хабр!
Сегодня фронтендеры любят подход атомарных классов, в частности Tailwind. Я не имею ничего против этого подхода. Каждый волен выбирать сам, с чем ему работать.
Но если вы пишете стили по-старому с использованием семантических классов, то у меня есть несколько интересных трюков для вас. Ими пришёл поделиться с вами сегодня.
Мои трюки улучшают пользовательский опыт, помогают организовать стили на контентных проектах и многое другое. Надеюсь, вам будет интересно!
Давайте посмотрим, что я вам подготовил.
CSS «слушает» нас. Нет, не в буквальном смысле. Суть в том, что в CSS появляется все больше псевдоклассов, которые позволяют реагировать на события JS без необходимости писать сам JS. Формально псевдоклассы отслеживают состояния, а не события, но порой они настолько похожи на обработчики событий, что разница становится почти незаметной (хотя в контексте CSS это не так уж важно).
