Привет, Хабр. Я продолжаю делиться «косяками» CSS, которые могут сбить нас с толку. Мне не нравится, что многие плюются от него. Конечно, не без оснований. Я их понимаю, потому что тоже плевался.

Только мне нравится CSS. Хоть и потратил множество часов на изучение неочевидных моментов, я не хочу, чтобы у языка была слава «костыля». Подумав, как помочь другим меньше мучиться, я собираю и объясняю неочевидности CSS.

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

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

• почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
• чем можно заменить объявления свойства height со значением auto для изображений;
• какой есть нюанс при установке максимальной ширины у группы элементов;
• плавную прокрутку без неприятных ситуаций для пользователя;
• чего не хватает при использовании фоновых изображений.

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

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

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

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

• сброс стилей до значений, взятых из веб-стандартов;
• возврат значений свойств, установленных в браузере;
• что можно сделать с прыжками контента при открытии и закрытии модального окна;
• возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
• способ стилизации элементов на языке, отличающимся от основного.

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

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

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

• подходы при стилизации элементов для вёрстки текста;
• какая может быть проблема с радиокнопками в вашем проекте;
• как задать размеры с использованием функций min() и max();
• CSS-наследование и свойство line-height;
• для чего делать подсказки в имени класса.

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

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

Сегодня я расскажу:

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

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

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

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

• какие сюрпризы есть при использовании свойства display;
• о чём нужно помнить при вёрстке кнопки «Показать пароль»;
• зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
• как можно переборщить с заголовками и какие проблемы будут.

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

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

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

Сегодня я расскажу:

• как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
• про свойство inset, сокращающее код на целых три строки;
• мой сниппет для расширения интерактивной области у кнопок и ссылок;
• стиль написания медиа-запросов, позволяющий сократить количество правил;
• альтернативный способ центрирования элемента без свойства transform.

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

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

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

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

• какие скрытые проблемы с паттерном «visually-hidden» нас ждут;
• в каких ситуациях кнопка «Закрыть» указывает на выход;
• чем вредно значение contents у свойства display;
• почему подсказка с помощью атрибута aria-label вызывает недоумение.

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

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

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

• возможность задать несколько фонов с помощью свойства background;
• свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
• как заставить псевдоэлемент nth-child выбрать элементы без привязки к позиции;
• где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.

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

Привет, Хабр. Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»

Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.

Последний технический момент. Во всех примерах я использую <body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.

А теперь переходим к статье.

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

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

• загрузку фоновых изображений для экранов с повышенной плотностью пикселя с помощью функции image-set();
• как с помощью неё же ускорить загрузку страницы;
• можно ли использовать нестандартный шрифт без его загрузки;
• чем полезен псевдокласс :focus-within при вёрстке кастомных чекбоксов;
• мой любимый лайфхак на основе пользовательских CSS-свойств.

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

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

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

• к чему приводят распространённые ошибки с элементом <label>;
• лучший лайфхак с inputmode="numeric" улучшающий мою жизнь;
• как пользователи скринридера понимают, что модальное окно открыто.

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

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

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

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

Сегодня я дам ответ на следующий вопрос: «Зачем нужно использовать свойство display?»

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

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

• какие символы нужно пропускать в тексте для атрибута alt;
• в какой ситуации атрибут inert может быть бесполезен;
• как атрибут maxlength не позволил моей знакомой купить авиабилеты;
• в чём польза свойства border в режиме высокого контраста дисплея.

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

В разговорах людей, интересующихся доступностью, часто можно услышать слово «Роль». Так, что это такое? Это специальная форма представления элемента для скринридера. Устанавливается она с помощью атрибута role. Сегодня поговорим о нем.

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

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

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

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

• какое количество символов следует использовать для текста подсказки для атрибута alt;
• в чём польза атрибута lang;
• почему использование текстовых символов для декоративных задач — это плохая идея;
• для чего существует режим повышенной контрастности.

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

Хабр, я рассказал вам, как создавать подсказки с помощью атрибута aria-label. Это отличный шаг к классному опыту для пользователей скринридера. А сегодня сделаем второй — мы научимся правильно скрывать элементы. Встречайте, атрибут aria-hidden.

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

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

• как сверстать поиск, чтобы им мог воспользоваться пользователь скринридера;
• чем полезно свойство outline-offset;
• зачем вам нужно использовать медиа-функцию prefers-color-scheme;
• где должен находиться заголовок в разметке блока с новостью.

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

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

Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!

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

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