Базовый уровень 2023 г.

Рэйчел Эндрю

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

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

• Сафари (macOS и iOS)
• Firefox (компьютерный компьютер и Android)
• Chrome (компьютерный компьютер и Android)
• Край (рабочий стол)

Базовый уровень касается «Могу ли я использовать»

В качестве следующего шага в выяснении доступности функций с сегодняшнего дня Baseline начинает переходить на «Могу ли я использовать». При посещении некоторых страниц «Могу ли я использовать» вы увидите значок, сообщающий, широко ли доступна эта функция в Baseline.

Функции, недавно доступные в базовой версии, также будут отмечены значком вместе с годом, когда они стали доступны. Таким образом, все, что стало совместимым с базовым набором браузеров в этом году, является частью Baseline 2023 .

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

Размер запросов контейнера и единиц запроса контейнера

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

Дизайн следующей карты меняется в зависимости от ширины компонента. Узнайте больше в разделе Контейнерные запросы в стабильных браузерах .

Новые цветовые пространства и функции

CSS теперь поддерживает цветовые пространства, которые позволяют получить доступ к цветам за пределами гаммы sRGB. Это означает, что вы можете поддерживать дисплеи HD (высокая четкость), используя цвета из гаммы HD.

Новые цветовые модели

Теперь в Baseline функции цвета lch() , lab() , oklch() и oklab() предоставляют доступ к цветовым моделям LCH, Lab, OKLCH и OKLab.

Функция color-mix()

Кроме того, частью Baseline стали новые функции цвета. Функция color-mix() позволяет смешивать один цвет с другим в любом цветовом пространстве. В следующем CSS 25% синего смешивается с белым в цветовом пространстве srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Узнайте больше о color-mix() .

Функция color()

Функцию color() можно использовать для любого цветового пространства, которое определяет цвета с каналами R, G и B. color() сначала принимает параметр цветового пространства, затем ряд значений каналов для RGB и, возможно, немного альфа. Вы можете использовать любой из: srgb , srgb-linear , display-p3 , a98-rgb , prophoto-rgb , rec2020 , xyz , xyz-d50 и xyz-d65 . Например:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Руководство по цветам высокой четкости CSS дает вам еще много примеров новых цветовых пространств и функций, а также информацию о том, какие и когда использовать.

Сжатие потоков

API Compression Streams — это API JavaScript для сжатия и распаковки потоков данных. Благодаря использованию этого встроенного сжатия приложениям больше не нужно включать библиотеку сжатия.

Узнайте больше в разделе Потоки сжатия теперь поддерживаются во всех браузерах .

Закадровый холст

До появления OffscreenCanvas возможности рисования на холсте были привязаны к элементу <canvas> , а это означало, что он напрямую зависел от DOM. OffscreenCanvas, как следует из названия, отделяет DOM и Canvas API, перемещая его за пределы экрана.

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

Узнайте больше в OffscreenCanvas — ускорьте операции с холстом с помощью веб-воркера

Предварительная загрузка модуля

Предварительная загрузка модулей может сократить время загрузки и обработки. Добавьте rel="modulepreload" к элементу link, ссылающемуся на модуль JavaScript, и браузер получит модуль, анализирует и компилирует его, а затем помещает результаты в карту модуля, готовую к выполнению.

Подробнее читайте в статье Предварительная загрузка модулей .

Тригонометрические функции в CSS

В 2023 году тригонометрические функции из спецификации CSS Values ​​and Units Level 4 стали совместимыми. Это означает, что функции sin() , cos() , tan() , asin() , acos() , atan() и atan2() являются частью Baseline 2023.

Узнайте, как использовать эти функции, и узнайте о некоторых вариантах использования тригонометрических функций в CSS .

Инертный атрибут

Инертность означает отсутствие возможности двигаться, поэтому, когда вы отмечаете что-то инертное, вы удаляете движение или взаимодействие из этих элементов DOM. Атрибут inert заставляет браузер игнорировать элемент.

• Событие click не срабатывает, если пользователь нажимает на элемент.
• Элемент не получит фокус.
• Элемент и его содержимое исключаются из дерева доступности.

Этот атрибут следует добавлять к элементам, которые находятся за кадром или скрыты иным образом. Вы можете узнать больше в разделе «Инертный атрибут» .

Подсетка в макете сетки CSS

Значение subgrid для grid-template-columns и grid-template-rows позволяет использовать треки, определенные в родительской сетке, во вложенных сетках. Это означает, что вы можете выравнивать элементы внутри этих вложенных сеток друг с другом.

В статье «Подсетка CSS» вы найдете несколько примеров и ссылки на многие другие публикации и примеры, освещающие варианты использования подсетки.

Формат числа V3

Intl.NumberFormat V3 — это набор новых функций для Intl.NumberFormat, которые стали частью Baseline в 2023 году. Дополнительные функции:

• Три новые функции для форматирования диапазонов чисел: formatRange, formatRangeToParts и selectRange.
• Группирование перечисления
• Новые параметры округления и точности
• Приоритет округления
• Интерпретировать строки как десятичные дроби
• Режимы округления
• Знак отображения негатива

В предложении NumberFormat V3 подробно описана каждая новая функция.

Полноэкранный API

API полноэкранного режима позволяет перевести элемент, например <video> в полноэкранный режим, вызвав метод requestFullscreen() . Он также предоставляет методы для определения того, находится ли элемент в полноэкранном режиме и находится ли документ в состоянии, позволяющем запрашивать полноэкранный режим.

Узнайте больше в этом руководстве по полноэкранному API на MDN .

Селектор CSS :has()

Просто создание Baseline 2023 — это селектор :has() , который появится в Firefox 121 19 декабря. Помимо прочего, этот селектор действует как родительский селектор , позволяя вам выбирать элемент на основе того, что находится внутри него. Например, вы можете применять разные CSS в зависимости от того, есть ли изображение внутри элемента или нет.

Узнайте больше в :has(): селекторе семейства .

Дополнительные функции, добавленные в Baseline в этом году

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

• Конструируемые таблицы стилей
• Сложные селекторы n-го дочернего элемента в CSS
• Синтаксис диапазона для медиа-запросов
• Импортировать карты
• Несколько значений для отображения CSS
• @counter-style
• Свойство CSS counter-set
• Функция смягчения linear()
• Частная файловая система Origin (OPFS)
• CSS Nesting , включая изменение, которое добавляет упрощенный синтаксический анализ .
• CSS :dir() селектор псевдокласса
• Единица длины cap CSS
• CSS-маскировка
• Поддержка медиа-запросов для HTML-элементов video <source>
• HTML-элемент <search>
• Ленивая загрузка элементов <iframe> (в Firefox 121 19 декабря)
• CSS-единицы высоты строки lh и rlh

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