CSS-функция `type()`

type() — это CSS-функция, позволяющая указать определённый тип данных. Она используется следующими возможностями CSS:

• Функцией attr() для указания типа данных, в который следует преобразовать значение атрибута.
• At-правилом @function для указания допустимых типов данных параметров и результатов пользовательской функции CSS.

Синтаксис

/* Single value */
type(<color>)
type(auto)

/* "|" combinator for multiple types */
type(<length> | <percentage>)

/* Space-separated list of values */
type(<color>+)

/* Comma-separated list of values */
type(<length>#)

/* Multiple keywords */
type(red | blue | green)

/* Combination of data type and keyword */
type(<percentage> | auto)

/* Universal syntax value */
type(*)

Параметры

Синтаксис функции type() выглядит следующим образом:

type(<syntax>)

Параметр <syntax> — это выражение, определяющее тип данных. Оно может иметь следующие формы:

<ident>

Ключевое слово CSS, записанное без угловых скобок.

<syntax-type>

Имя типа, записанное в угловых скобках и обозначающее тип данных CSS. Поддерживаются следующие типы данных:

<angle>

Принимает любое допустимое значение <angle>.

<color>

Принимает любое допустимое значение color.

<custom-ident>

Принимает любое допустимое значение <custom-ident>.

<image>

Принимает любое допустимое значение <image>.

<integer>

Принимает любое допустимое значение <integer>.

<length>

Принимает любое допустимое значение <length>.

<length-percentage>

Принимает любое допустимое значение <length> или <percentage>, а также любое допустимое выражение calc(), объединяющее значения <length> и <percentage>.

<number>

Принимает любое допустимое значение <number>.

<percentage>

Принимает любое допустимое значение <percentage>.

<resolution>

Принимает любое допустимое значение <resolution>.

<string>

Принимает любое допустимое значение <string>.

<time>

Принимает любое допустимое значение <time>.

<transform-function>

Принимает любое допустимое значение <transform-function>.

<transform-list>

Принимает список допустимых значений <transform-function>. Это эквивалентно "<transform-function>+"; после него не может следовать токен + или #.

<url>

Принимает любое допустимое значение <url>.

*

Универсальный синтаксис.

Можно объединять значения <syntax-type> с помощью следующих токенов:

+

Ожидается список значений, разделённых пробелами.

#

Ожидается список значений, разделённых запятыми.

Кроме того, токен | можно использовать в качестве разделителя при указании нескольких значений или объединении значений <ident> и <syntax-type> для определения ожидаемого синтаксиса.

Возвращаемое значение

Определение типа данных.

Описание

Функция type() используется, когда необходимо определить тип данных. Её можно рассматривать как подмножество общего синтаксиса определения значений, используемого для задания набора допустимых значений для каждого свойства и функции CSS.

Чаще всего type() используется для указания одного типа данных. В следующем примере функция attr() задаёт свойству background-color значение пользовательской функции data-background. Требуемый тип данных для этого значения указан как color.

background-color: attr(data-background type(<color>), red);

Также можно указать точное требование к ключевому слову (например, type(blue)), однако это было бы слишком ограничивающим условием.

Указание type(*) разрешает любое допустимое значение CSS. Это универсальный синтаксис, который нельзя умножать или объединять с другими компонентами синтаксиса.

Указание нескольких допустимых типов

Токен | можно использовать в качестве разделителя при указании диапазона допустимых типов данных, ключевых слов или их комбинации. Например:

• type(<length> | <percentage>)
• type(red | green)
• type(<length> | auto)

В следующем примере показано, как с помощью at-правила @function определить пользовательскую функцию, принимающую два цветовых параметра и возвращающую первый из них, если ширина области просмотра не меньше 700px, и второй в противном случае. Первый параметр может быть типа red или green, а второй должен быть типа blue.

@function --color-choice(--color1 type(red | green), --color2 blue) {
  result: var(--color1);
  @media (width < 700px) {
    result: var(--color2);
  }
}

Указание списков типов

Токены + и # можно добавлять к <syntax-type>, чтобы указать, что ожидается список значений, разделённых пробелами или запятыми соответственно. Например:

• Параметр <color>+ ожидает список значений <color>, разделённых пробелами, например red blue #a60000 rgb(234 45 100).
• Параметр <length># ожидает список значений <length>, разделённых запятыми, например 30px, 1em, 15vw.

Можно объединить несколько токенов, используя | в качестве разделителя. Например, <color># | <integer># будет ожидать список значений <color>, разделённых запятыми, или список значений <integer>, разделённых запятыми.

Формальный синтаксис

Примеры

Другие примеры можно найти в документации по attr() и @function.

Базовое определение типа данных @function

В этом примере определяется пользовательская функция CSS, объединяющая несколько строк.

HTML

HTML содержит один элемент <section> с текстовым содержимым.

<section>What you gonna say?</section>

CSS

В CSS сначала задаётся @function с именем --combine-strings. У него есть параметр --strings, тип данных которого задан как одно или несколько значений <string>, разделённых пробелами. Функция возвращает строковые значения, добавляя в конец пробел и эмодзи-сердце.

@function --combine-strings(--strings type(<string>+)) {
  result: var(--strings) " ❤️";
}

Затем задаются базовые стили для элемента <section>, а функция --combine-strings() используется для задания значения его свойства content с двумя строками, разделёнными пробелом, в качестве аргумента.

section {
  font-family: system-ui;
  background-color: lime;
  padding: 20px;
}

section::after {
  content: --combine-strings("hello" "goodbye");
}

Результат

Спецификации

Совместимость с браузерами

См. также

• At-правило @function
• Функция attr()
• Использование пользовательских функций CSS