CSS type() Function

CSS type() Function

The CSS type() function defines the permitted data type or value syntax for certain CSS features.

It is used with the attr() function to parse HTML attribute values and with the @function at-rule to define parameter and result types. It can specify colors, lengths, numbers, percentages, keywords, and combinations of supported value types.

Syntax

type(<syntax>)

The type() function accepts a syntax definition describing the permitted CSS value or values.

Examples:

type(<color>)
type(<length>)
type(<number>)
type(<integer>)
type(<percentage>)
type(<length-percentage>)
type(<angle>)
type(<time>)
type(auto)
type(<length> | <percentage>)
type(auto | <length>)
type(*)

CSS data type names are enclosed in angle brackets. Specific keyword values, such as auto, are written without angle brackets.

The function is used inside another CSS feature rather than as a standalone property value.

For example:

.box {
  background-color: attr(data-color type(<color>), #3498db);
}

This tells attr() to interpret the data-color attribute as a CSS color.

The type() function does not itself retrieve an attribute or apply a style. It defines the syntax used by the surrounding feature.

Parameters

The type() function accepts one syntax expression.

The syntax expression can contain:

• A single data type, such as <color>.
• A specific keyword, such as auto.
• Alternative values separated by |.
• Space-separated lists using +.
• Comma-separated lists using #.
• The universal syntax *.

For example:

type(<color>)
type(red | blue | green)
type(<length> | auto)
type(<color>+)
type(<length>#)

The syntax definition determines which values are accepted by the feature using type().

How It Works

The type() function describes how a CSS value should be interpreted and validated.

When used inside attr(), the browser reads an attribute from an element and attempts to parse its value according to the specified syntax.

For example:

<div class="box" data-color="teal">Example</div>

.box {
  background-color: attr(data-color type(<color>), gray);
}

The browser reads the value teal from the data-color attribute.

Because teal is a valid CSS color, it can be used as the background color.

If the attribute contains an invalid color, the fallback value gray is used.

The same principle applies to other data types:

width: attr(data-width type(<length>), 100px);
opacity: attr(data-opacity type(<number>), 1);
transform: rotate(attr(data-angle type(<angle>), 0deg));

Each declaration specifies the type expected from the corresponding attribute.

With the @function at-rule, type() defines which values custom function parameters can accept or return.

Supported Data Types

The type() function supports several CSS data types.

Not every data type is permitted in every context. In particular, <url> cannot be used as an attr() data type because of security restrictions.

Browser support for individual types and their use in experimental features can vary.

Multiple Data Types

The vertical bar | allows a syntax definition to accept alternatives.

For example:

type(<length> | <percentage>)

This accepts a length or a percentage.

A syntax can also combine data types with keywords:

type(<length> | auto)

This accepts a length or the keyword auto.

Multiple keywords can be specified:

type(red | green | blue)

This accepts only the listed keyword values.

For example:

.box {
  width: attr(data-width type(<length> | auto), auto);
}

The attribute can contain a CSS length such as 200px or the keyword auto.

When both lengths and percentages are required, <length-percentage> is often more useful because it also permits compatible calculations combining those types.

List Values

The type() function can describe lists containing multiple values.

Space-Separated Lists

The plus sign + indicates one or more values separated by spaces.

type(<color>+)

Example accepted value:

red blue green

Comma-Separated Lists

The hash sign # indicates one or more comma-separated values.

type(<length>#)

Example accepted value:

10px, 20px, 30px

Alternative List Types

Alternatives can be combined with list syntax:

type(<color># | <integer>#)

This permits a comma-separated list of colors or a comma-separated list of integers.

The syntax describes which values are permitted. The CSS property or feature using those values must also support the resulting value structure.

Universal Syntax

The universal syntax * permits any valid CSS value sequence within the restrictions of the surrounding feature.

type(*)

For example:

.box {
  --value: attr(data-value type(*), 10px);
}

This allows the attribute value to be parsed as CSS tokens without requiring a specific data type.

Unlike type(<length>) or type(<color>), the universal syntax does not restrict the result to one particular type.

However, the property that eventually uses the value must still accept it.

The universal syntax cannot be combined with other syntax components or list multipliers.

For example, type(* | <color>) is not valid.

Using type() with attr()

The attr() function retrieves an attribute value from an HTML element.

Adding type() specifies how that value must be parsed.

HTML:

<div class="box" data-color="teal">Example</div>

CSS:

.box {
  background-color: attr(data-color type(<color>), gray);
}

The browser reads the data-color attribute and checks whether its value is a valid CSS color.

If the value is valid, it becomes the background color. Otherwise, the fallback gray is used.

Numeric Attributes

<div class="box" data-opacity="0.6">Example</div>

.box {
  opacity: attr(data-opacity type(<number>), 1);
}

The attribute is parsed as a number and used for opacity.

Length Attributes

<div class="box" data-width="180px">Example</div>

.box {
  width: attr(data-width type(<length>), 100px);
}

The attribute must contain a valid CSS length, including its unit when required.

Typed attr() values are experimental, so provide suitable fallbacks when using them in production.

Using type() with @function

The @function at-rule defines custom CSS functions. The type() function can specify permitted parameter types and result types.

For example:

@function --double-size(--size type(<length>)) returns type(<length>) {
  result: calc(var(--size) * 2);
}
.box {
  width: --double-size(50px);
}

The custom function accepts a length and returns a length calculated from that input.

The type(<length>) declarations describe the accepted input and expected result.

Custom functions can also use alternative types:

@function --choose-color(--value type(red | blue)) returns type(<color>) {
  result: var(--value);
}

This function accepts only the keywords red or blue and returns a CSS color.

Both @function and its typed syntax are experimental. These examples are intended to demonstrate the syntax and may not work in every browser.

Fallback Values

When type() is used inside attr(), a fallback value can be supplied for missing or invalid attribute values.

For example:

.box {
  background-color: attr(data-color type(<color>), #3498db);
}

If data-color is missing or cannot be parsed as a color, the fallback is used.

The fallback is specified in attr(), not inside type().

For browsers that do not support typed attr(), a separate CSS declaration can provide a basic fallback:

.box {
  background-color: #3498db;
}
@supports (background-color: attr(data-color type(<color>), red)) {
  .box {
    background-color: attr(data-color type(<color>), #3498db);
  }
}

The initial declaration supplies a default color. Browsers supporting the tested typed attribute syntax can use the attribute-based declaration.

For more reliable feature detection, test support for modern attr() syntax using @supports rather than assuming support based on basic attr() behavior.

Example

The following example uses type(<color>) to read a background color from an HTML attribute.

HTML:

<div class="type-color-demo">
  <div class="type-color-box" data-color="#16a085">Teal</div>
  <div class="type-color-box" data-color="#8e44ad">Purple</div>
  <div class="type-color-box" data-color="invalid">Fallback</div>
</div>

CSS:

.type-color-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.type-color-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 75px;
  color: #fff;
  background-color: #3498db;
}
@supports (background-color: attr(data-color type(<color>), red)) {
  .type-color-box {
    background-color: attr(data-color type(<color>), #3498db);
  }
}

In browsers supporting typed attr(), the first two boxes use their attribute values as background colors.

The third box uses the blue fallback because invalid is not a valid CSS color.

Browsers without the required support display the default blue background on all three boxes.

Length Example

The following example uses type(<length>) to read element widths from HTML attributes.

HTML:

<div class="type-length-demo">
  <div class="type-length-box" data-width="100px">100px</div>
  <div class="type-length-box" data-width="180px">180px</div>
  <div class="type-length-box" data-width="240px">240px</div>
</div>

CSS:

.type-length-demo {
  display: grid;
  gap: 12px;
  padding: 15px;
  background-color: #f1f3f5;
}
.type-length-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  max-width: 100%;
  height: 45px;
  color: #fff;
  background-color: #3498db;
}
@supports (width: attr(data-width type(<length>), 100px)) {
  .type-length-box {
    width: attr(data-width type(<length>), 100px);
  }
}

In supporting browsers, each box receives the width specified in its data-width attribute.

Browsers without typed attribute support use the default width of 100px.

The max-width declaration prevents the boxes from exceeding the available container width.

Number Example

The following example uses type(<number>) to control opacity with an HTML attribute.

HTML:

<div class="type-number-demo">
  <div class="type-number-box" data-opacity="1">1</div>
  <div class="type-number-box" data-opacity="0.6">0.6</div>
  <div class="type-number-box" data-opacity="0.3">0.3</div>
</div>

CSS:

.type-number-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px;
  background-color: #f1f3f5;
}
.type-number-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 70px;
  color: #fff;
  background-color: #8e44ad;
  opacity: 1;
}
@supports (opacity: attr(data-opacity type(<number>), 1)) {
  .type-number-box {
    opacity: attr(data-opacity type(<number>), 1);
  }
}

In supporting browsers, the boxes display different opacity levels based on their attributes.

In browsers without support, all three boxes remain fully opaque.

The <number> syntax validates that the attribute contains a number. The opacity property then interprets that number according to its own accepted range.

Common Uses

The type() function is useful when CSS needs to describe or validate expected value types.

• Typed HTML attributes: Parse attribute values as colors, lengths, numbers, or other supported CSS types.
• Custom CSS functions: Specify permitted parameter and result types with @function.
• Value validation: Restrict values to a particular CSS syntax.
• Fallback handling: Use attr() fallbacks when an attribute is missing or invalid.
• Multiple permitted types: Accept alternative keywords or data types.
• Lists: Describe space-separated or comma-separated values.
• Reusable styling: Read element-specific values from HTML attributes without defining a separate CSS class for each value.

For example:

.badge {
  background-color: #3498db;
}
@supports (background-color: attr(data-color type(<color>), red)) {
  .badge {
    background-color: attr(data-color type(<color>), #3498db);
  }
}

In supporting browsers, each badge can receive its background color from a data-color attribute.

Because browser support is limited, use progressive enhancement rather than depending on this feature for essential styling.

Limitations

The type() function has several requirements and restrictions.

• It is an experimental CSS feature with limited browser support.
• It requires a valid syntax definition.
• It is used inside supported CSS features rather than as an independent property value.
• Data type names use angle brackets, while keyword values do not.
• Some syntax combinations and list expressions may not be implemented in all browsers.
• The universal syntax * cannot be combined with other syntax components.
• The <url> type is not permitted for typed attr() values because of security restrictions.
• Validating an attribute's type does not guarantee that the resulting value is valid for the CSS property using it.
• Missing or invalid attribute values may cause a declaration to become invalid at computed-value time if no suitable fallback is supplied.
• Support for the @function at-rule is also experimental.

Valid Syntax Examples

type(<color>)
type(<length>)
type(<number>)
type(<length> | auto)
type(red | green | blue)
type(<color>+)
type(<length>#)
type(*)

Invalid Syntax Examples

type()
type(<unknown-type>)
type(* | <color>)
type(<length> <color>)

These examples omit the syntax, use an unsupported data type name, combine the universal syntax with another type, or place two types together without a permitted combinator.

Security Restrictions

The attr() function cannot use attribute values to construct URLs.

For example, the following declaration is not supported:

.box {
  background-image: attr(data-image type(<url>));
}

This restriction prevents attribute values from being used in URL contexts that could expose sensitive information.

Browser Compatibility

Basic attr() usage with the content property is widely supported, but this does not mean the newer typed syntax is supported.

Test the specific feature and provide a conventional CSS fallback when practical.

Browser Support

The CSS type() function has Limited availability and is not Baseline Widely available. It is experimental and is not supported consistently across major browsers.

Support also depends on the feature using type(), such as typed attr() values or custom CSS functions defined with @function.

For current compatibility information, visit Can I Use? and search for type() or modern attr() syntax.

Use feature detection and fallbacks when introducing typed attribute values into production stylesheets.

Specifications

The type() function is defined in the CSS Values and Units Module Level 5 specification.

Its use with custom CSS functions is also described in the CSS Functions and Mixins Module Level 1 specification.

Related features include attr(), @function, @property, and CSS value definition syntax.