type()

Syntax

/* 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(*)

Parameter

Die Syntax der type() Funktion ist wie folgt:

type(<syntax>)

Der <syntax> Parameter ist ein Ausdruck, der den Datentyp definiert. Dieser kann folgende Formen annehmen:

<ident>

Ein CSS-Schlüsselwortwert, ohne spitze Klammern geschrieben.

<syntax-type>

Ein Typname, in spitzen Klammern geschrieben, der einen CSS-Datentyp darstellt. Die folgenden Datentypen werden unterstützt:

<angle>

Akzeptiert jeden gültigen <angle> Wert.

<color>

Akzeptiert jeden gültigen <color> Wert.

<custom-ident>

Akzeptiert jeden gültigen <custom-ident> Wert.

<image>

Akzeptiert jeden gültigen <image> Wert.

<integer>

Akzeptiert jeden gültigen <integer> Wert.

<length>

Akzeptiert jeden gültigen <length> Wert.

<length-percentage>

Akzeptiert jeden gültigen <length> oder <percentage> Wert und jeden gültigen calc() Ausdruck, der <length> und <percentage> Werte kombiniert.

<number>

Akzeptiert jeden gültigen <number> Wert.

<percentage>

Akzeptiert jeden gültigen <percentage> Wert.

<resolution>

Akzeptiert jeden gültigen <resolution> Wert.

<string>

Akzeptiert jeden gültigen <string> Wert.

<time>

Akzeptiert jeden gültigen <time> Wert.

<transform-function>

Akzeptiert jeden gültigen <transform-function> Wert.

<transform-list>

Akzeptiert eine Liste gültiger <transform-function> Werte. Dies entspricht dem "<transform-function>+" und darf nicht von einem + oder # Token gefolgt werden.

<url>

Akzeptiert jeden gültigen <url> Wert.

*

Die universelle Syntax.

Sie können <syntax-type> Werte mit den folgenden Token kombinieren:

+

Eine durch Leerzeichen getrennte Liste von Werten wird erwartet.

#

Eine durch Kommas getrennte Liste von Werten wird erwartet.

Zusätzlich kann das | Token als Separator verwendet werden, wenn mehrere Werte oder Kombinationen von <ident> und <syntax-type> Werten für die erwartete Syntax angegeben werden.

Rückgabewert

Eine Datendefinitionsdefinition.

Beschreibung

Die type() Funktion wird verwendet, wenn Sie einen Datentyp definieren müssen. Sie kann als Untermenge der gesamten Wertedefinitionssyntax betrachtet werden, die zum Definieren der Menge gültiger Werte für jede CSS-Eigenschaft und Funktion verwendet wird.

Am häufigsten sehen Sie type() verwendet, um einen einzelnen Datentyp anzugeben. Das nächste Beispiel verwendet die attr() Funktion, um die background-color Eigenschaft gleich dem Wert einer benutzerdefinierten data-background Funktion zu setzen. Der erforderliche Datentyp für den Wert wurde als <color> angegeben.

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

Sie könnten auch eine genaue Schlüsselwortanforderung angeben (z. B. type(blue)), aber das würde zu einschränkend sein.

Die Angabe von type(*) erlaubt jeden gültigen CSS-Wert. Dies ist die universelle Syntax, die nicht vervielfacht oder mit anderen Syntaxkomponenten kombiniert werden kann.

Mehrere zugelassene Typen angeben

Sie können das | Token als Trennzeichen verwenden, wenn Sie eine Reihe von zulässigen Datentypen, Schlüsselwörtern oder eine Kombination aus beiden angeben. Zum Beispiel:

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

Das folgende Beispiel zeigt, wie eine @function At-Regel verwendet werden kann, um eine benutzerdefinierte Funktion zu definieren, die zwei Farbparameter nimmt und den ersten zurückgibt, es sei denn, die Ansichtsbreite ist kleiner als 700px, in welchem Fall sie den zweiten zurückgibt. Der erste darf red oder green sein, während der zweite blue sein muss.

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

Listen von Typen angeben

Die + und # Token können an einen <syntax-type> angehängt werden, um anzugeben, dass Sie eine durch Leerzeichen getrennte Liste oder eine durch Kommas getrennte Liste erwarten. Zum Beispiel:

• Ein <color>+ Parameter erwartet eine durch Leerzeichen getrennte Liste von <color> Werten, z. B. red blue #a60000 rgb(234 45 100).
• Ein <length># Parameter erwartet eine durch Kommas getrennte Liste von <length> Werten, z. B. 30px, 1em, 15vw.

Sie können mehrere Token unter Verwendung von | als Separator kombinieren. Zum Beispiel, <color># | <integer># würde eine durch Kommas getrennte Liste von <color> Werten oder eine durch Kommas getrennte Liste von <integer> Werten erwarten.

Formale Syntax

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

Beispiele

Sie finden mehrere weitere Beispiele in der attr() und @function Dokumentation.

Grundlegende @function Datentypdefinition

Dieses Beispiel definiert eine CSS-benutzerdefinierte Funktion, die mehrere Strings kombiniert.

HTML

Das HTML enthält ein einzelnes <section> Element mit etwas Textinhalt.

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

CSS

Im CSS beginnen wir mit der Spezifizierung einer @function namens --combine-strings. Diese hat einen Parameter namens --strings, dessen Datentyp als einer oder mehrere durch Leerzeichen getrennte <string> Werte angegeben wird. Sie gibt die Stringwerte mit einem angehängten Leerzeichen und einem Herz-Emoji zurück.

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

Wir geben dann einige grundlegende Styles für das <section> Element an und verwenden die --combine-strings() Funktion, um den Wert seiner content Eigenschaft zu spezifizieren, einschließlich zwei durch Leerzeichen getrennter Strings als Argument.

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

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @function At-Regel
• attr() Funktion
• Verwendung von CSS-Benutzerfunktionen