Базовые функции, которые вы можете использовать уже сегодня

Узнайте лишь о некоторых функциях Baseline.

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

Хотя эта постоянная эволюция и адаптация полезны, она также может привести к путанице. Может быть сложно ориентироваться во всех этих обновлениях. У нас, как у разработчиков, возникают такие вопросы: «Когда все браузерные движки будут поддерживать эту новую функцию?» «Когда я смогу начать использовать эти функции в своем рабочем коде?» «Как долго нам следует поддерживать старые браузеры?»

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

Команда Chrome сотрудничает с другими браузерными движками и веб-сообществом, чтобы внести больше ясности. Сюда входит наша работа над такими проектами, как Interop 2023 , который помогает улучшить совместимость ряда ключевых функций. Но как насчет функций, появившихся за последние несколько лет? Готовы ли к использованию экспериментальные функции, о которых мы узнали два года назад?

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

Элемент диалога

Элемент <dialog> — это новый элемент HTML для создания диалоговых подсказок, таких как всплывающие окна и модальные окна.

Чтобы использовать его, определите модальный элемент, затем откройте диалог, вызвав метод showModal() для элемента диалога.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

В встроенный элемент HTML встроены такие функции, как управление фокусом, отслеживание вкладок и сохранение контекста стекирования. Дополнительные сведения см. в статье Создание диалогового компонента .

Отдельные свойства преобразования CSS

Использование CSS-преобразований — эффективный способ добавить движение на ваш сайт.
Возможно, вы знакомы с написанием CSS-преобразований с тремя свойствами в одной строке.
Благодаря отдельным свойствам преобразования теперь вы можете указывать свойства преобразования индивидуально. Это пригодится, когда вы пишете сложную анимацию по ключевым кадрам.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Подробное объяснение этого изменения можно найти в статье Более детальное управление преобразованиями CSS с использованием отдельных свойств преобразования .

Новые единицы видового экрана

На мобильных устройствах размер области просмотра зависит от наличия или отсутствия динамических панелей инструментов.
Иногда у вас видна строка URL-адреса и панель инструментов навигации, но иногда эти панели инструментов полностью убраны.
Фактический размер области просмотра будет отличаться в зависимости от того, видны панели инструментов или нет.
Новые единицы просмотра, такие как svh и lvh дают веб-разработчикам более точный контроль при разработке дизайна для мобильных устройств. Подробнее вы можете узнать в статье Большие, маленькие и динамические единицы видового экрана .

Глубокое копирование в JavaScript

Раньше для создания глубокой копии объекта без ссылки на исходный объект популярным способом было использование JSON.stringify в сочетании с JSON.parse . Это был настолько распространенный взлом, что V8 (движок JavaScript Chrome) значительно улучшил производительность этого трюка. Но вам больше не понадобится этот хак с structuredClone .

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

Для получения более подробной информации обратитесь к разделу «Глубокое копирование в JavaScript с использованием структурированного клона» .

Псевдокласс :focus-visible

Как веб-разработчики, мы все знакомы с этим «кольцом фокусировки», которое появляется, когда вы перемещаетесь по странице с помощью клавиатуры или нажимаете на элементы ввода. Это необходимая функция для доступности, но иногда она мешает визуальному дизайну для разных пользователей. Псевдокласс CSS :focus-visible проверяет, считает ли браузер, что фокус должен быть видимым. Теперь вы можете указывать стили только тогда, когда фокус должен быть виден.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

Дополнительную информацию можно найти в разделе «Изучение CSS» .

Интерфейс TransformStream

Интерфейс TransformStream API Streams позволяет связывать потоки друг в друга.

Например, вы можете передавать данные из одного места, а затем сжимать поток данных в другое место по мере передачи данных. В статье « Потоковая передача запросов с помощью API-интерфейса выборки» рассматривается этот пример варианта использования.

Заворачивать

Есть еще много функций, которые недавно стали совместимыми и стабильными для использования на веб-платформе. В дальнейшем мы будем работать с группой сообщества WebDX, чтобы внести больше ясности в эти базовые наборы функций. Пожалуйста, проверьте web.dev/baseline для получения подробной информации.

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

Нам всегда интересно, помогает ли вам то, что мы делаем, или вам нужна различная поддержка, поэтому свяжитесь с нами в группе сообщества WebDX .