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 自定義函式