CSS *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сегодня уже будет не только HTML и CSS. В некоторых кейсах мы будем использовать ARIA-атрибуты. Я расскажу:

• как мы незаметно потеряли пользу элементов <section> и <form>;
• как атрибут tabindex запутывает незрячего пользователя;
• почему визуально скрытые элементы — проблема современных интерфейсов;
• что делать с паттерном «Звёздочка» для обязательных полей.

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

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

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

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

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

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

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

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

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

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

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

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

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

В этой статье будет: атрибут autofocus и его нюансы, паттерн «Skip-link» и идея Ильи об использовании его на практике, проблема использования одинаковых ссылок для одной новости, что не так с кнопкой «Наверх» и как вы спрятали список от скринридеров.

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

Hola, Amigos! На связи Игорь Мельников, Frontend-разработчик компании Amiga. Возможно, вы уже слышали про технологии, которые я описываю в статье, но не использовали их, потому что думали, что они не поддерживаются актуальными браузерами. Теперь можете смело брать их во всеоружие и применять в своих проектах! 

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