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

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

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

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

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

Элемент search

У нас появился новый элемент search. Когда я увидел его первый раз, подумал: «О, это для разметки поиска». В принципе, да, область поиска можно им разметить, но и не только её.

Для демонстрации пользы элемента мы разберём несколько примеров. Начнём с классического — форма поиска.

<body>
  <form action="/search">
    <!-- здесь внутренняя разметка формы поиска -->
  </form>
</body>

Я специально не использую в этом примере элемент search. Мы рассмотрим, как скринридер NVDA распознает нашу разметку. Для этого воспользуемся специальным режимом «Список элементов», нажав комбинацию клавиш inset + F7.

Скринридер не нашёл поиск. На самом деле он понял только то, что у нас есть форма.

Никакой дополнительной информации о цели формы нет. Пользователь услышит подсказку «Форма». Дальше пойдёт дополнительно разбираться, что же делает эта форма.

Упростить ему жизнь как раз поможет элемент search. Давайте обернём им нашу разметку с формой.

<body>
  <search>
    <form action="/search">
      <!-- здесь внутренная разметка формы поиска-->
	  </form>
  </search>
</body>

Теперь скринридер нашёл поиск, и, соответственно, пользователь услышит подсказку «Поиск».

Как я говорил, элемент search можно использовать не только для разметки области поиска. Он отлично подходит для области фильтрации.

<body>
  <search aria-label="По товарам">
    <form action="/categories">
      <!-- здесь внутренная разметка формы с фильтрами -->
	  </form>
  </search>
</body>

Обращу ваше внимание на то, что я использую дополнительную подсказку «По товарам» в атрибуте aria-label. Так пользователю будет проще понять, почему у него на странице два поиска.

Атрибут inert

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

В общем, код выглядел так себе. Сегодня всё проще. Для таких штук у нас появился атрибут inert. Он делает элемент и все его дочерние элементы «инертными». По ним нельзя кликнуть, сфокусироваться или выделить текст.

Я нашёл хорошую демонстрацию на сайте Дока. Посмотрите, пожалуйста, её.

<body>
  <div class="container">
    <div class="row">
      <h2>Область с <code>inert</code> без стилей</h2>
      <div inert>
        <p>Текст, который видят, но не слышат и не могут скопировать.</p>
        <button class="button button-orange">Неактивная кнопка</button>
      </div>
    </div>
    <div class="row">
      <h2>Кнопка с <code>disabled</code> без стилей</h2>
      <button class="button button-orange" disabled="">Неактивная кнопка</button>
    </div>
  </div>
</body>

Попробуйте выделить текст. Как бы вы ни старались, у вас получится это сделать только в блоке, где нет атрибута inert. Хотя у самой кнопки есть атрибут disabled. А вроде бы текст не должен быть выделен. И это важное отличие между атрибутами.

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

Это важно понимать в контексте адаптации интерфейса под скринридеры. Давайте посмотрим, как они поймут демонстрацию.

Мы видим только одну кнопку, у которой установлен атрибут disabled. Скринридер озвучит её так: «Кнопка. Недоступно. Неактивная кнопка». А вот кнопка, находящаяся внутри элемента div с атрибутом inert, не найдена.

Так будет вообще со всеми элементами. Для демонстрации я перенёс атрибут inert на родительский элемент div, чтобы скрыть заголовок и кнопку.

Теперь для скринридера на странице только один заголовок «Кнопка с disabled без стилей».

Получается, что атрибут inert полностью скрывает элементы от скринридера. Также он не позволяет пользователю выделить текст и сфокусироваться на интерактивных элементах с помощью клавиатуры. Отличный способ спрятать элементы!

Единицы измерения svw, svh, lvw, lvh, dvw и dvh

В адаптивной вёрстке часто приходится устанавливать размеры относительно вьюпорта. У большинства фронтендеров для решения этой задачи приходит на ум использование единиц vw или vh.

Только у них есть особенность. Как ни странно, они опираются на размеры вьюпорта, т.е. области, где нет интерфейсных элементов самого браузера. Лично я сильно обломался, когда хотел сделать высоту элемента на весь первый экран смартфонов. Тогда я использовал 100vh.

.awesome-first-screen {
  min-height: 100vh;
}

Сегодня в CSS есть целых шесть улучшенных единиц измерения от вьюпорта, а именно: svw, svh, lvw, lvh, dvw и dvh. Все они уже учитывают интерфейсные элементы браузера, только делают это по-разному.

С помощью единиц измерения svw и svh мы можем установить размер элемента от вьюпорта с учётом всех открытых элементов браузера. Единицы lvw, lvh делают то же самое, только учитывают закрытые элементы браузера.

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

Соответственно, когда происходит скрытие или открытие панели, меняется высота вьюпорта. Новые единицы могут учитывать это событие, а могут и нет. Единицы svw, svh, lvw, lvh не пересчитываются при изменении высоты вьюпорта, а вот единицы dvw и dvh так делают.

В результате мы получаем возможность реализовать блок на всю высоту первого экрана. Для этого нужно использовать значение 100dvh.

.awesome-first-screen {
  min-height: 100dvh;
}

Элемент dialog

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

Сделаем мы это на примере разметки модального окна с формой авторизации.

<body>
  <dialog open>
    <form action="" class="awesome-form">
      <div class="awesome-form__group">
        <label for="login">Логин</label>
        <input id="login" type="text" >
  	  </div>
  	  <div class="awesome-form__group">
        <label for="password">Пароль</label>
        <input id="password" type="text">
  	  </div>
  	  <div class="awesome-form__group">
        <button type="button">Отправить</button>
  	  </div>
    </form>
  </dialog>
</body>

У элемента dialog есть специальная роль, показывающая скринридерам, что перед ним модальное окно. Например, когда скринридер NVDA находит его, то произносит подсказку «Диалог».

Вторым преимуществом элемента dialog является возможность дать ему имя, просто прописав значение в атрибуте aria-label.

<body>
  <dialog open aria-label="Форма авторизации">
    <form action="" class="awesome-form">
      <div class="awesome-form__group">
        <label for="login">Логин</label>
        <input id="login" type="text">
  	  </div>
  	  <div class="awesome-form__group">
        <label for="password">Пароль</label>
        <input id="password" type="text">
  	  </div>
  	  <div class="awesome-form__group">
        <button type="button">Отправить</button>
  	  </div>
    </form>
  </dialog>
</body>

Теперь скринридер NVDA скажет «Форма авторизации. Диалог». Для обычного элемента div так сделать нельзя.

Третий плюс элемента dialog — это его стилизация. По умолчанию браузеры устанавливают для него свойство display со значением none.

А когда диалог открыт с помощью атрибута open, то значение меняется на block.

Так что вам самим ничего менять не надо. Мелочь, а приятно!

Четвёртый плюс не совсем честный. Но недавно для него стали поддерживаться атрибуты commandfor и command. Теперь у нас есть возможность реализовать модальное окно без JavaScript!

Это вам затравочка. В новой статье обязательно расскажу! А пока ChatGPT вам все расскажет.

Свойство inset

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

.awesome-block {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
}

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

Казалось бы, логично устанавливать размеры с помощью свойств width и height. Только поскольку в решении используется свойство position со значением absolute, разработчики всегда добавляют свойства top и left. Так они надёжно располагают элемент в начале родителя.

Раз уже используются свойства для позиционирования, то давайте растянем элемент ими. Это сделает одно свойство inset.

.awesome-block {
  position: absolute;
  inset: 0;
}

Заключение

Давайте подведём итог. В этой статье мы рассмотрели:

элемент search для разметки областей поиска и фильтрации;
вёрстку диалоговых и модальных окон с помощью элемента dialog;
атрибут inert для отключения группы интерактивных элементов;
единицы измерения svw, svh, lvw, lvh, dvw и dvh;
трюк по растягиванию элемента на всю ширину и высоту родителя с помощью свойства inset.

Надеюсь, я помог вам сделать шажок к современному HTML и CSS, и вы обновите код своих проектов. Если я что-то упустил, то, пожалуйста, напишите мне об этом в комментариях.

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

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