Узнайте лишь о некоторых функциях Baseline.
Опубликовано: 10 мая 2023 г.
Интернет постоянно развивается, и браузеры постоянно обновляются, предоставляя разработчикам новые инструменты для инноваций на платформе. Вещи, для которых раньше требовались вспомогательные библиотеки, становятся частью веб-платформы и поддерживаются во всех браузерах, наряду с более короткими и простыми способами кодирования элементов дизайна.
Хотя эта постоянная эволюция и адаптация полезны, она также может привести к путанице. Может быть сложно ориентироваться во всех этих обновлениях. У нас, как у разработчиков, возникают такие вопросы: «Когда все браузерные движки будут поддерживать эту новую функцию?» «Когда я смогу начать использовать эти функции в своем рабочем коде?» «Как долго нам следует поддерживать старые браузеры?»
Правильный ответ: «Это зависит». То, что необходимо и что можно использовать, действительно зависит от вашей пользовательской базы, технологического стека, структуры вашей команды и поддерживаемых устройств. Но мы все согласны с тем, что нынешний ландшафт Интернета может затруднить принятие таких решений.
Команда 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 с использованием отдельных свойств преобразования .
Новые единицы видового экрана
На мобильных устройствах размер области просмотра зависит от наличия или отсутствия динамических панелей инструментов. Иногда у вас видна адресная строка и панель инструментов навигации, но иногда эти панели инструментов полностью убраны. Фактический размер области просмотра будет отличаться в зависимости от того, видны панели инструментов или нет. Новые единицы просмотра, такие как 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, чтобы внести больше ясности в эти базовые наборы функций. См . страницу «Базовый уровень» для получения информации о новых разработках.
Если вы хотите быть в курсе событий, наша команда публикует статьи , когда какая-либо функция становится совместимой , и ежемесячно публикует обновления о том, что происходит на веб-платформе, от экспериментальных функций до новых совместимых функций.
Нам всегда интересно, помогает ли вам то, что мы делаем, или вам нужна различная поддержка, поэтому свяжитесь с нами в группе сообщества WebDX .