Обновить
32K+
151
Стас Мельников@melnik909

Помогаю узнать больше про Accessibility и CSS

Отправить сообщение

Моя коллекция полезных HTML-фич

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели17K

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

Я часто рассказываю про CSS, потому что очень сильно люблю этот язык. И хочу, чтобы у вас с ним не было проблем. Но я совсем мало внимания уделяю HTML. А он тоже прекрасен и полезен!

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

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

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

Читать далее

9 CSS-лайфхаков для улучшения пользовательского опыта

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели14K

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

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

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

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

Читать далее

Чёрт, опять этот CSS. Коллекция кейсов, когда CSS бесит

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели12K

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

CSS часто преподносит сюрпризы, способные запутать даже опытных разработчиков. Я понимаю их раздражение. Тут всё закономерно.

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

И всё же, несмотря на все потраченные нервы, CSS мне нравится. Поэтому хочется, чтобы разработчики реже тратили время на борьбу с его особенностями. Изменить стандарты языка не в моих силах, но я смог собрать несколько неочевидных моментов, которые в своё время поставили в тупик меня и моих коллег.

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

Читать далее

Делаем ужасный интерфейс только при помощи HTML и CSS

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели12K

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

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

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

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

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

Читать далее

Современный HTML и CSS. 5 фич, которые уже пора использовать

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели14K

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

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

Конечно, я подумал о кроссбраузерности. Поэтому все фичи хорошо поддерживаются во всех современных браузерах с 2023 года. Я специально проверил их в «Can I use».

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

Читать далее

Отвечаю на популярные вопросы по HTML и CSS с собеседований джунов-фронтендеров

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели13K

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

Вопросы по HTML и CSS всё реже встречаются на собеседованиях для фронтендеров. Но в основном это касается позиций middle и выше. А вот для начинающих специалистов они всё ещё есть.

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

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

Сразу скажу, что буду душнить. Так что вы сами рассудите, кто из нас лучше отвечает.

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

Читать далее

Плохие практики в вёрстке

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели14K

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

Мне нравится смотреть, как верстают современные фронтендеры. Забавно наблюдать, как меняется вёрстка с годами. И сразу скажу, что не всё «плохо». Но ошибки, конечно же, есть. Раньше были свои примеры «плохого» кода, сейчас другие. О них хочу поговорить в этой статье.

Я составил список распространённых примеров кода «с душком». Старался быть объективным, но судить только вам, насколько это у меня получилось.

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

Читать далее

Интересные HTML и CSS фичи, которые почему-то обходят стороной

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели19K

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

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

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

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

Читать далее

Какие новые HTML и CSS фичи полностью поддерживаются браузерами в 2026 году

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели16K

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

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

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

Моё главное правило для отбора фич заключается в том, чтобы она стала «зелёной» в 2025 году на сайте «Can I Use». Смотрю последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Chrome.

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

Читать далее

Новые CSS-фичи, появившиеся к началу 2026 года

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели18K

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

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

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

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

Читать далее

Что такое цифровая доступность (accessibility)?

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели11K

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

У меня есть хобби — смотреть записи собеседований фронтенд-разработчиков. К моей радости, во многих из них встречаются вопросы про accessibility. На этом хорошие новости заканчиваются.

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

Я на практике покажу, в каких местах появляется accessibility. Дам несколько советов. Также важно сказать, что все термины, используемые в статье, моя вольная интерпретация. Пожалуйста, учтите это и больше обращайте внимание на смысл.

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

Читать далее

Делаем новогоднюю поздравительную открытку, используя только CSS

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели12K

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

На носу Новый год. Все друг друга поздравляют. Мне это время очень нравится. Для меня Новый год — самый главный праздник.

В общем, мы же фронтендеры. Я подумал: а почему бы не придумать специальную открытку с поздравлением? Использовать я буду только HTML и CSS. Никаких картинок. Да-да, даже векторного SVG.

Единственным «хаком» будет шрифт — мы подберём красивый. Также у нас будет анимация снега. В общем, сделаем всё по красоте!

В ходе реализации я буду использовать все последние фишки CSS. Вдруг вы о них не слышали — заодно и что-то полезное для себя найдёте.

Давайте уже сделаем новогоднюю открытку!

Читать далее

Коллекция полезных CSS фишек, которые вы редко используете

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели14K

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

В мире фронтенда активно всё меняется. Появляются одни инструменты, но только их выучишь — они устаревают, и нужно уже учить новые. Новые методы и API в JavaScript. Даже в HTML появляется что-то новое. И, конечно, CSS не отстаёт.

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

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

Читать далее

Как сделать ужасный интерфейс для пользователя. Моя коллекция простых лайфхаков

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели17K

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

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

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

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

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

Читать далее

Этот CSS пора оставить в прошлом

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели18K

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

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

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

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

Читать далее

Мои любимые CSS-трюки, которые вы могли упустить

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели14K

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

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

Ничего против них не имею. Просто хочу рассказать о нескольких приёмах, которые вы могли упустить. Они помогут вам в разных ситуациях.

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

Читать далее

HTML и CSS антипаттерны

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели18K

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

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

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

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

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

Читать далее

Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели22K

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

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

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

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

Читать далее

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

Время на прочтение6 мин
Охват и читатели8.5K

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

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

где полезно использовать элемент search;

существующие проблемы при использовании единиц измерения от размеров вьюпорта для установки размера текста;

как элемент hr влияет на опыт пользователей скринридера;

нужны ли заголовки модальным окнам.

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

Читать далее

Дорогие джуны, не делайте так. Коллекция плохих привычек в HTML и CSS

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели21K

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

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

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

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

Читать далее

Информация

В рейтинге
26-й
Откуда
Пенза, Пензенская обл., Россия
Работает в
Дата рождения
Зарегистрирован
Активность

Специализация

UX Accessibility Исследователь
HTML
CSS
Accessibility