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

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

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

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

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

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

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

На HTML и CSS очень сложно сделать критическую ошибку. Чтобы интерфейс не заработал. Но всё же я собрал список. Я постарался выделить только критические ошибки. Конечно, это субъективный список, поэтому не знаю, согласитесь ли вы с ним.

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

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

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

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

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

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

Общаясь с коллегами, я заметил, что они незнакомы с последними возможностями CSS. Как обычно, у всех свои причины. У кого-то много повседневной рутины. Кому-то в принципе неинтересно, что нового происходит в CSS. А кто-то по привычке использует подходы десятилетней давности и ему норм.

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

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

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

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

А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?

Надо помочь! Я собрал вредные HTML и CSS техники. Они супер простые, но очень действенные. Я уверен на сто процентов, что благодаря им интерфейс вашего проекта заставит пользователя вспомнить несколько «ласковых» слов.

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

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

Моя подруга постоянно читает новости о том, что искусственный интеллект заменит какую-то профессию. Тестировщик, программист, дизайнер, писатель и т. д. А сможет ли он заменить опытного верстальщика?

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

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

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

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

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

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

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

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

• что можно сделать лучше для пользователей с дислексией;
• как незаметно улучшить интерфейс для пользователей с травмой кистей рук;
• есть ли сложности с сокращениями для пользователей скринридера.

Давайте начнём!

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется что-то нового. Вызывающего споры. В общем, я пришёл к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».

При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).

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

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

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

• как можно избежать длинных значений для свойства transform;
• можно ли побороть неоднозначность медиа-запросов;
• малоизвестное и полезное свойство при работе с «гридами»;
• какой нюанс вы можете не знать про свойство align-content;
• древнейшее свойство, помогающее улучшить взаимодействие пользователя клавиатуры с интерфейсом.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем, я к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».

При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).

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

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

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

Сегодня мы рассмотрим:

• мой подход к написанию стилей для динамической сетки без использования БЭМ-модификаторов;
• как я перестал писать свойство text-decoration со значением none для элемента <button>;
• способ для вычисления значения свойства width в зависимости от контента элемента;
• почему вам стоит удалить все стили с использованием псевдо-класса :focus.

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

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем я возвращаюсь к формату статей в виде вопрос-ответ. Вопросы будут те, которые я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».

При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).

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

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

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

В начале января 2025 года мне захотелось посмотреть, какие новые фишки CSS стали поддерживаться современными браузерами за прошлый год. Провести некий срез, что уже можно использовать. И тут меня посетила мысль: «А почему бы не поделиться новинками на Хабре?». Вот я и пришёл.

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

Для составления списка я использовал сайт «Can I Use». Брал те новшества, которые стали «зелёными» в 2024 году. Смотрел последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Browser.

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

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

• что вы можете не знать про псевдо-класс :not();
• примеры работы псевдо-класса :has(), работающие по логике операторов ИЛИ и И;
• как неожиданно может повыситься специфичность правила при использовании псевдо-класса :has();
• чем полезно свойство user-select, кроме отмены выделения текста.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

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

За свою карьеру у меня было достаточно много собеседований. Конечно, одной из основных тем вопросов была вёрстка. Немного похвастаюсь. Не было вопроса, на который я не ответил.

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

У меня получился достаточно большой список. Он составлен на основе моего опыта, опыта моих знакомых и публично доступных собеседований. Каждый вопрос будет отдельной статьёй.

Сегодня я дам ответ на следующий вопрос: «Какие знаешь псевдо-классы?».

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Только я немного заскучал. Мне хочется повеселиться и отвести душу. В общем, я придумал новый формат статей в виде квиза.

Сразу скажу, что вопросы в нём только отчасти имеют практический смысл. На практике навряд ли вы столкнётесь с ними. Но это так задумано! Я специально хочу сделать всё, чтобы вы не ответили на вопросы! Поэтому, пожалуйста, не воспринимайте квиз серьёзно. Просто весело проведём время.

Конечно, я оставлю своё решение для каждого вопроса. Будет классно, если вы тоже добавите своё в комментариях. Я тоже хочу учиться. Давайте вместе увидим, каким может быть CSS.

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

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

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