type()

语法

/* 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> 值，以及任何有效的组合了 <length> 和 <percentage> 值的 calc() 表达式。

<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)

以下示例展示了如何使用 @function at-rule 来定义一个自定义函数，该函数接受两个颜色参数，并返回第一个颜色，除非视口宽度小于 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> 值列表。

正式语法

<type()> = 
  type( <string> )  

示例

你可以在 attr() 和 @function 的文档中找到其他几个示例。

基本的 @function 数据类型定义

此示例定义了一个用于组合多个字符串的 CSS 自定义函数。

HTML

HTML 包含一个带有文本内容的 <section> 元素。

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

CSS

在 CSS 中，我们首先指定一个名为 --combine-strings 的 @function。它有一个名为 --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");
}

结果

规范

浏览器兼容性

另见

• @function at-rule
• attr() 函数
• 使用 CSS 自定义函数