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

Рэйчел Эндрю

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

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

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

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

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

Снимок экрана: «Можно ли использовать с широко доступным значком в CSS Grid Layout».

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

Снимок экрана: «Можно ли использовать» с новым доступным значком в запросах контейнеров.

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

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

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

Поддержка браузера

  • Хром: 105.
  • Край: 105.
  • Фаерфокс: 110.
  • Сафари: 16.

Источник

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

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

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

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

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

Поддержка браузера

  • Хром: 111.
  • Край: 111.
  • Фаерфокс: 113.
  • Сафари: 15.

Источник

Скриншот редактора градиента.style с ярким градиентом от розового до синего.
Попробуйте новые цветовые пространства, используя градиент.стиль .

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

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

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

Поддержка браузера

  • Хром: 111.
  • Край: 111.
  • Фаерфокс: 113.
  • Сафари: 15.

Источник

Узнайте больше о 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 для сжатия и распаковки потоков данных. Приложениям, использующим это встроенное сжатие, больше не требуется включать библиотеку сжатия.

Поддержка браузера

  • Хром: 80.
  • Край: 80.
  • Фаерфокс: 113.
  • Сафари: 16.4.

Источник

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

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

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

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

Поддержка браузера

  • Хром: 69.
  • Край: 79.
  • Фаерфокс: 105.
  • Сафари: 16.4.

Источник

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

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

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

Поддержка браузера

  • Хром: 66.
  • Край: ≤79.
  • Фаерфокс: 115.
  • Сафари: 17.

Источник

Узнайте больше в разделе «Предварительная загрузка модулей» .

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

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

Поддержка браузера

  • Хром: 111.
  • Край: 111.
  • Фаерфокс: 108.
  • Сафари: 15.4.

Источник

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

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

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

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

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

Поддержка браузера

  • Хром: 102.
  • Край: 102.
  • Фаерфокс: 112.
  • Сафари: 15.5.

Источник

Добавьте этот атрибут к элементам, которые находятся за кадром или скрыты иным образом. Дополнительные сведения см. в разделе Атрибут inert .

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

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

Поддержка браузера

  • Хром: 117.
  • Край: 117.
  • Фаерфокс: 71.
  • Сафари: 16.

Источник

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

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

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

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

Поддержка браузера

  • Хром: 106.
  • Край: 106.
  • Фаерфокс: 116.
  • Сафари: 15.4.

Источник

В предложении NumberFormat V3 подробно описана каждая из этих новых функций.

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

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

Поддержка браузера

  • Хром: 71.
  • Край: 79.
  • Фаерфокс: 64.
  • Сафари: 16.4.

Источник

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

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

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

Поддержка браузера

  • Хром: 105.
  • Край: 105.
  • Фаерфокс: 121.
  • Сафари: 15.4.

Источник

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

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

Другие функции, которые стали частью Baseline в этом году, включают следующее:

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