Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
Почему в наших дизайн-системах и библиотеках есть сломанные нестандартные радиокнопки;
Мой способ отказаться от ссылки для изображения с сохранением интерактивности;
Дублирование стилей при наведении для фокуса вводит меня в ступор;
Можно ли скрыть кнопку с помощью атрибута disabled от скринридера.
Привет, Хабр. Я продолжаю делиться «косяками» CSS, которые могут сбить нас с толку. Мне не нравится, что многие плюются от него. Конечно, не без оснований. Я их понимаю, потому что тоже плевался.
Только мне нравится CSS. Хоть и потратил множество часов на изучение неочевидных моментов, я не хочу, чтобы у языка была слава «костыля». Подумав, как помочь другим меньше мучиться, я собираю и объясняю неочевидности CSS.
Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но пожалуйста, относитесь к этому контенту, как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня мы рассмотрим:
почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
чем можно заменить объявления свойства height со значением auto для изображений;
какой есть нюанс при установке максимальной ширины у группы элементов;
плавную прокрутку без неприятных ситуаций для пользователя;
чего не хватает при использовании фоновых изображений.
Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах.
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
сброс стилей до значений, взятых из веб-стандартов;
возврат значений свойств, установленных в браузере;
что можно сделать с прыжками контента при открытии и закрытии модального окна;
возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
способ стилизации элементов на языке, отличающимся от основного.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как к просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня мы рассмотрим:
подходы при стилизации элементов для вёрстки текста;
какая может быть проблема с радиокнопками в вашем проекте;
как задать размеры с использованием функций min() и max();
Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня я расскажу:
какие правила у меня есть при именовании 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;
где должен находиться заголовок в разметке блока с новостью.
