Позиционирование якорей в веб-разработке

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

Для решения этой задачи в браузере появился AbortController. Он доступен в статусе «Widely Available» с 25 сентября 2021 года, что означает — поддерживается всеми современными браузерами и безопасен для использования в продакшене.

Когда вы задаёте анимацию или переход в CSS, свойства изменяются неравномерно: сначала медленно, потом быстрее, в конце снова замедляются. Это поведение называется интерполяцией и определяется так называемой функцией ускорения (или «easing function»). По умолчанию браузеры используют значения вроде ease, ease-in, ease-out и linear. Но если вам нужно больше контроля над тем, как именно свойство изменяется во времени, пригодится функция cubic-bezier().

Эта функция позволяет задать собственную кривую ускорения с помощью четырёх чисел — координат двух управляющих точек Безье. Эти значения описывают, как «разгоняется» и «тормозит» анимация. cubic-bezier() поддерживается всеми современными браузерами с 29 января 2018 года (Baseline: Widely Available), так что её можно спокойно использовать в продакшене.

Доступно в Baseline в статусе «Widely Available» с 2021-09-25

AbortController и его сигнал AbortSignal позволяют отменить активную операцию, например, fetch-запрос. Вы создаёте экземпляр AbortController, получаете связанный с ним сигнал и передаёте его в fetch. Когда нужно прервать запрос, вызываете метод abort() у контроллера. Это удобно, чтобы управлять временем отклика или избегать утечек памяти.

Пример:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Запрос отменён');
    } else {
      console.error('Ошибка', error);
    }
  });

// чтобы отменить запрос
controller.abort();

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

Доступно в Baseline в статусе «Newly Available» c 2024-03-19.

AbortSignal.any () — это статический метод, который объединяет несколько сигналов отмены <AbortSignal>. Он возвращает один новый сигнал, который срабатывает, когда любой из исходных сигналов активируется, причём причина отмены берётся из первого активировавшегося сигнала. Это удобно, когда нужно реагировать сразу на любой из нескольких условий отмены.

const controller1 = new AbortController();
const controller2 = new AbortController();

const combinedSignal = AbortSignal.any([controller1.signal, controller2.signal]);

combinedSignal.addEventListener('abort', () => {
  console.log('Отмена вызвана одним из сигналов');
});

// Пример вызова отмены любого из них
controller1.abort('Причина от первого');

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Position: absolute убирает элемент из нормального потока документа и позволяет размещать его точно по координатам относительно ближайшего родителя с установленным position или, если такового нет — относительно окна браузера. Это удобно для создания всплывающих окон, меню и элементов, требующих точного позиционирования.

Пример:

<div style="position: relative; width: 300px; height: 200px; background: #eee;">
  <div style="position: absolute; top: 20px; left: 30px; background: #f00; width: 100px; height: 50px;">
    Вложенный блок
  </div>
</div>

Здесь внутренний <div> с position: absolute позиционируется относительно своего ближайшего родителя с position: relative.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Эти методы позволяют показывать пользователю всплывающие окна: alert — для уведомлений, confirm — для согласия, prompt — для ввода текста. Они блокируют работу скрипта до закрытия окна, потому что требуют взаимодействия. В некоторых ситуациях такие окна полезны, потому что легко реализовать, но их использование в интерфейсе не всегда удобно для пользователя.

Примеры:

// Просто уведомление
window.alert('Это сообщение для пользователя');

// Спрашиваем подтверждение
if (window.confirm('Вы хотите продолжить?')) {
  // Пользователь нажал ОК
} else {
  // Пользователь отменил
}

// Запрос ввода
const name = window.prompt('Введите ваше имя');

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

Доступно в Baseline в статусе «Newly Available» c 2024-04-16.

align-content — свойство CSS, которое управляет вертикальным расположением содержимого внутри контейнера с многострочным макетом, например, в flex или grid. Оно задаёт как распределить свободное пространство между строками или колонками, если их несколько. Это полезно, когда нужно точно настроить визуальную составляющую блока, чтобы он выглядел аккуратно и гармонично.

Пример использования:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* Распределяет строки по вертикали */
  height: 300px; /* Высота контейнера */
}

В этом случае, внутри .container строки будут расположены так, что между ними появится равное пространство, а верхняя и нижняя — по краю контейнера. Важно: свойство работает, когда внутри есть несколько строк (например, у flex или grid), иначе оно не даст видимого эффекта.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

Атрибут accesskey позволяет назначить клавишу быстрого доступа к элементу на странице. Это может быть ссылка, кнопка или форма — всё, что может быть активировано с клавиатуры.

С 29 января 2018 года accesskey считается широко поддерживаемым (Baseline: «Widely Available»), то есть работает во всех современных браузерах.

Свойство all — это шорткат (сокращение), позволяющий одним выражением установить или сбросить значения почти всех CSS-свойств элемента.

Оно доступно в браузерах с 15 июля 2022 года (Baseline: «Widely Available»), так что его можно использовать без оглядки на поддержку.

Доступно в Baseline в статусе «Newly Available» c 2024-07-09.

Свойство content в CSS управляет вставкой содержимого в элементы, особенно часто его используют для добавления иконок или текста перед/после элементов. Также через content можно задавать альтернативный текст для генерируемого контента, что полезно для доступности. Когда в content используется url с символом /, этот синтаксис позволяет добавить альтернативный текст к изображению или контенту, делая его более понятным для экранных читалок.

Например, чтобы сделать SVG-иконку доступной, можно использовать следующий подход:

.icon::after {
  content: url('upvote-icon.svg') / 'Upvote';
}

Здесь content с url вставляет SVG, а / 'Upvote' добавляет читаемый текст, который увидят пользователи с ограниченными возможностями. Такой приём повышает доступность элементов с графикой.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.