CSS isn't magic

Для чего используют aria-hidden? Как его лучше использовать? Влад, привет. Перед тобой гайд про атрибут aria-hidden. В нем есть практические кейсами, советы и нюансы, которые трубется знать. Мы разберем с тобой следующие вопросы: - Для чего используют атрибут? - В каких практических задачах он полезен? Гайд составлен с учетом твоих текущих знаний и умений. Как я понял из личного общения у тебя есть опыт верстки, и ты стараешься использовать элементы семантически верно. Это хороший шаг к улучшению цифровой доступности. Также ты можешь протестировать интерфейс при помощи скринридера. При написании гайда я все это учел. Надеюсь тебе будет интересно. А теперь поехали! Что это такое? О проблеме доступности цифровых интерфейсов задумались относительно недавно. Лично я изучаю ее с 2016 года. А интерфейсы же проектировали еще в 2000ых годах. По этой причине подавляющее большинство, если не все, спроектированы для людей, видящих их. Графические элементы, механики взаимодействия, элементы управления, все заточено под человека, который может увидеть их. Небольшая, но значимая, часть этого опыта в принципе не может подходить для пользователя скринридера. Тут возникает потребность скрыть то, что бесполезно, и заменить полезным и удобным. Здесь вотчина атрибута aria-hidden. Он полностью скрывает элемент от скринридера, чем-то напоминая этим атрибут hidden. Только есть разница. Когда элемент скрывается при помощи атрибута hidden, он не доступен скринридерам и его нельзя увидеть. При использовании атрибута aria-hidden он продолжает отображаться визуально. Для скрытия элемента нужно использовать значение true, добавив атрибут с ним к элементу. Например, я сделал это для элемента <span>.

<body>
  <span aria-hidden="true">Этот текст не доступен для скринридера. Он не будет озвучен</span>
</body>

Теперь о тексте в элементе <span> знают только зрячие пользователи. Скринридером его прочитать нельзя. Где это будет полезно, мы рассмотрим далее.

background-color не подходит для кастомных радиокнопок Кто-то сделал так

.toggle[type="radio"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: #242424;
  /* оставшиеся CSS */
}

Я предлагаю делать так

.toggle[type="radio"]::before {
  content: "";
  border: 0.25rem solid #242424;
  /* оставшиеся CSS */
}

Делаете кастомные радиокнопки? Учтите, что в режиме высокой контрастности background-color не отображается. А вот с border будет все хорошо!

Чуть не забыл... Конечно, вы можете купить все мои советы (43шт). Сейчас опубликовано 16. Плюс у вас будет ранний доступ к новым. За последнюю неделю добавил 3 штуки. Напишите мне @melnik909, если хотите получить доступ.

justify-content: center и align-items: center приводит к потере элементов Кто-то сделал так

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Я предлагаю делать так

.parent {
  display: flex;
}

.parent::before {
  content: "";
  margin: auto;
}

Внимание! justify-content или align-items не учитывают размеры элементов. В результате мы можем потерять элементы, если они больше, чем их родитель. Вот почему margin: auto — лучшая альтернатива. И крестик не скроется за пределы вьюпорта!

Мне всегда было тяжело найти человека, с кем я могу поговорить про CSS, и чувствовать, что он меня понимает. За всю свою жизнь я встретил двух. Первый — Вадим Макеев, второй — Алексей Назаренко. Вадима я думаю вы знаете. Алексей относительно новое имя в среде фронтенда. Вкратце расскажу о нем. Алексей фанат нативных веб-технологий. Знает очень глубокие детали веб-платформы и спецификаций. Он начинающий автор контента. Хочет донести до вас важность HTML, CSS, JS и веб-компонентов. Делает это в своем канале. Пост не рекламный. Текст не согласован. Алексей помог мне набрать первых подписчиков в этом канале. Возвращаю должок. P.S. Кидать вам авторов (большинство англоговорящие), которые мне нравится? 🔥 — да, 👎 — нет

background-color не позволяет контролам сливаться с белым экраном Кто-то сделал так

.hero {
  background-image: url("hero.jpg");
}

Я предлагаю делать так

.hero {
  background-image: url("hero.jpg");
  background-color: #ff6347;
}

Контролы сливаются с белым экраном пока идет загрузка изображения. Почему бы вам не показать мне их? Тем более это легко. Добавьте background-color, а я не буду ждать загрузки изображений! #css #верстка #frontend

К слову о рекламе. Пришел толкать рекламу своих услуг. Я помогаю людям изучать CSS. Со мной можно: — Подготовиться к вопросам по CSS так, что будете знать больше, чем интервьюер на собеседовании; — Понять, что вы знаете CSS лучше, чем большинство разработчиков, и перестать срать себе в голову синдромом самозванца; — Получить код-ревью и альтернативные решения для своих задач по верстке. Я не люблю созвоны. Поэтому придумал свой формат. За подробностями пишите мне @melnik909 P.S. Жду ваших реакций. 🔥 — нравится, 👎 — перестать рекламировать.

Почему :not(class) полезен? Кто-то сделал так

ul {
  margin-top: 1rem;
}
.list {
  margin-top: 0;
}

Я предлагаю делать так

ul:not([class]) {
  margin-top: 1rem;
}

Как вы определяете основные стили типографики? Если вы задаете стили с помощью селектора типа и сбрасываете их с помощью класса, я предложу сделать это без сброса. Просто используйте :not([class])! #css #верстка #frontend

Обезопасьте анимацию движения медиа-функцией prefers-reduced-motion Кто-то сделал так

.container {
  animation: zoomIn 1s ease-out alternate infinite both;
}

@keyframes zoomIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

Я предлагаю делать так

@media (prefers-reduced-motion: no-preference) {

  .container {
    animation: zoomIn 1s ease-out alternate infinite both;
  }

  @keyframes zoomIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
  }
}

Как же достала анимация движения. Смотрю на нее, и голова кружится. Когда уже будут использовать медиа-функцию prefers-reduced-motion? Она поможет мне, потому что я запретил анимацию в настройках операционной системы. #a11y #accessibility #верстка #frontend #css

Завязывайте с resize: none Кто-то сделал так

.textarea {
  resize: none;
}

Я предлагаю делать так

.textarea {
  resize: vertical;
  min-height: 5rem;
  max-height: 15rem;
}

Привычное решение использовать resize: none. Только есть проблема. Обычно целый геморой заполнять такие текстовые области. Можно же разрешить ее изменение только по вертикали в заданном диапазоне 😉 #a11y #accessibility #верстка #frontend #css

Атрибут hidden устраняет необходимость определять display: none Кто-то сделал так

.modal {
  display: none;
  padding: 1rem;
  /* остальной CSS */
}
.modal--is-open {
  display: block;
}

Я предлагаю делать так

.modal:not([hidden]) {
  padding: 1rem;
  /* остальной CSS */
}

Не нужно вручную определять display: none у элементов, изменяющие свою видимость. Просто добавьте атрибут hidden к элементу и определите весь CSS с помощью :not([hidden]) 💡 #верстка #frontend #css

scroll-behavior: smooth может привести к головокружению или головной боли Кто-то сделал так

html {
  scroll-behavior: smooth;
}

Я предлагаю делать так

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Пожалуйста, обверните scroll-behavior: smooth медиа-функцией prefers-reduced-motion. Это поможет отобразить плавную прокрутку только, если пользователи разрешат ее в настройках операционной системы 💡 #верстка #frontend #css

Посадите медиа-запросы на диету Кто-то сделал так

.intro__heading { 
  font-size: 2rem; 
}

.intro__description { 
  font-size: 0.75rem; 
}

@media (min-width: 641px) {
  .intro__heading { 
    font-size: 3rem; 
  }

  .intro__description { 
    font-size: 1.25rem; 
  }
}

@media (min-width: 1025px) {
  .intro__heading { 
    font-size: 3.5rem; 
  }

  .intro__description { 
    font-size: 1.5rem; 
  }
}

Я предлагаю делать так

.intro__heading { 
  font-size: var(--_heading-font-size, 2rem); 
}

.intro__description { 
  font-size: var(--_hint-font-size, 0.75rem); 
}

@media (min-width: 641px) {
  .intro { 
    --_heading-font-size: 3rem; 
    --_hint-font-size: 1.25rem;
  }
}

@media (min-width: 1025px) {
  .intro { 
    --_heading-font-size: 3.5rem; 
    --_hint-font-size: 1.5rem;
  }  
}

Медиа-запросы очень быстро раздувают код. В результате дофига правил, в которых легко запутаться. Пользовательские свойства позволяют сократить их ☝️ #верстка #frontend #css

Что за :nth-child(n of S)?

/*
  В чем разница между селекторами?
*/

.highlight:nth-child(n+2) {
  color: green;
}

:nth-child(2 of .highlight) {
  color: red;
}

Псевдокласс :nth-child учитывает номер элемента в документе. 'of' убирает эту особенность и позволяет выбрать элемент с любым номером 💡 #верстка #frontend #css

Меняйте значение только в одном месте Кто-то сделал так

.banner {
  height: 2rem;
  position: fixed;
}

.content {
  padding-top: 2rem;
}

Я предлагаю делать так

:root {
  --page-banner-height: 2rem;
}

.banner {
  height: var(--page-banner-height);
  position: fixed;
}

.content {
  padding-top: var(--page-banner-height);
}

При рефакторинге сложно найти все точки, где значение одного свойства зависит от свойств установленных у других элементов. Давайте проще. Пользовательские свойства нам помогут ☝️ #верстка #frontend #css

Больше не нужно использовать 0 для margin и padding Кто-то сделал так

.container {
  padding: 1rem 0 1.5rem;
  margin: 0 1rem 0 1.5rem;
}

Я предлагаю делать так

.container {
  padding-block: 1rem 1.5rem;
  margin-inline: 1.5rem 1rem;
}

Всегда бесило писать 0 для установки отступа у противоположных сторон 😒 Сегодня это в прошлом, благодаря свойствам margin-block, margin-inline, padding-block, padding-inline 🥳 #верстка #frontend #css

CSS без зависимости от порядка правил Кто-то сделал так

.heading_size-l {
  font-size: 5rem;
}

.heading {
  font-size: 2.5rem;
}

Я предлагаю делать так

.heading_size-l {
  --heading-font-size: 5rem;
}

.heading {
  font-size: var(--heading-font-size, 2.5rem);
}

Черт, я 2 часа искал, почему свойство переопределено! Проект с большим количеством компонентов и с разными модификаторами. Хорошо, что теперь можно избежать проблему порядка правил с одинаковой специфичностью. Пользовательские свойства меня выручат 😉 #верстка #frontend #css

position освобождает нас от определения display: block для псевдо-элементов Кто-то сделал так

.hero::before {
  content: "";
  display: block;
  position: absolute; /* или fixed */
}

Я предлагаю делать так

.hero::before {
  content: "";
  position: absolute; /* или fixed */
}

absolute и fixed изменяют строчные типы значения display на блочную альтернативу. Проще говоря, display: block браузеры установят сами 💡 #верстка #frontend #css

Давайте сведем комбинацию свойств width и max-width к одному Кто-то сделал так

.container {
  width: 100%;
  max-width: 70rem;
}

Я предлагаю делать так

.container {
  width: min(100%, 70rem);
}

Функция min() позволяет нам определять значения, а браузеры выберут наименьшее из них. Как это можно использовать? Определить свойства width и max-width в одну строку ☝️ #верстка #frontend #css

Сократите top: 0; right: 0; bottom: 0; left: 0 в одну строку Кто-то сделал так

.cover-screen {
  position: absolute; /* или fixed */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Я предлагаю делать так

.cover-screen {
  position: absolute; /* или fixed */
  inset: 0;
}

Растягивали ли вы элемент на всю ширину и высоту родительского элемента или окна с помощью top, right, bottom и left? 🤔 Сократите это в одну строчку с помощью inset 🥳 #верстка #frontend #css