type() CSS-Funktion

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 lautet 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 repräsentiert. 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 sowie jede gültige calc() Ausdruckskombination aus <length> und <percentage> Werten.

<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 von gültigen <transform-function> Werten. Es entspricht "<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 Kommata getrennte Liste von Werten wird erwartet.

Darüber hinaus kann das | Token als Trennzeichen verwendet werden, wenn mehrere Werte angegeben oder <ident> und <syntax-type> Werte für die erwartete Syntax kombiniert werden.

Rückgabewert

Eine Datentypdefinition.

Beschreibung

Die type() Funktion wird verwendet, wenn Sie einen Datentyp definieren müssen. Sie kann als Untermenge der allgemeinen Wertedefinitionssyntax betrachtet werden, die verwendet wird, um das Set von gültigen Werten für jede CSS-Eigenschaft und -Funktion zu definieren.

Am häufigsten wird type() verwendet, um einen einzelnen Datentyp zu spezifizieren. Im nächsten Beispiel wird die attr() Funktion verwendet, 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 (zum Beispiel type(blue)), aber das wäre zu einschränkend.

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.

Angabe mehrerer zulässiger Typen

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

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

Das folgende Beispiel zeigt, wie eine @function Regel verwendet werden kann, um eine benutzerdefinierte Funktion zu definieren, die zwei Farbparameter annimmt und den ersten zurückgibt, es sei denn, die Ansichtsbreite ist kleiner als 700px, in diesem Fall wird der zweite zurückgegeben. 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);
  }
}

Angabe von Listen von Typen

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

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

Sie können mehrere Token kombinieren, indem Sie | als Trennzeichen verwenden. Zum Beispiel, <color># | <integer># erwartet eine durch Kommata getrennte Liste von <color> Werten oder eine durch Kommata getrennte Liste von <integer> Werten.

Formale Syntax

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

Beispiele

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

Grundlegende @function Datentypdefinition

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

HTML

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

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

CSS

Im CSS beginnen wir mit der Spezifikation einer @function namens --combine-strings. Diese hat einen Parameter namens --strings, dessen Datentyp als eine oder mehrere durch Leerzeichen getrennte <string> Werte angegeben ist. Es gibt die String-Werte mit einem Leerzeichen und einem Herz-Emoji am Ende zurück.

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

Dann spezifizieren wir einige grundlegende Stile für das <section> Element und verwenden die Funktion --combine-strings(), um den Wert seiner content Eigenschaft anzugeben, 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");
}

Resultat

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @function at-rule
• attr() function
• Verwendung von CSS-Benutzerfunktionen