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 как новые доступные, что запускает таймер для их широкой доступности. Это создает более четкий путь для принятия решений о том, когда использовать функции в ваших собственных проектах.