CSS Features

First Public Working Draft · css-mixins

CSS Functions and Mixins Module

5 at-rules, 1 function, 1 type defined by this specification, 3 of them known to at least one browser (the others are badged Not in any browser yet).

Modern CSS features in this module: @function.

Read the Editor's Draft ↗ W3C First Public Working Draft ↗

Each feature in detail

@apply

At-rule Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

@apply [ <dashed-ident> | <dashed-function> ] [ { <declaration-list> } ]?;

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

@contents

At-rule Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

@contents [ { <declaration-list> } ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

@function

At-rule Limited availability Experimental Modern CSS: @function

MDN The @function CSS at-rule enables defining CSS custom functions. Once defined, a custom function can be called using the <dashed-function> syntax (for example, --my-function(30px, 3)) within any property value.

Live preview Example from MDN 
@function --double(--value) {
  result: calc(var(--value) * 2);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
}

p {
  --base-spacing: 10px;
  border-radius: var(--base-spacing);
  padding: --double(var(--base-spacing));
  width: 50%;
  background-color: wheat;
}

Syntax

@function <function-token> <function-parameter>#? ) [ returns <css-type> ]? { <declaration-rule-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 139
Edge 139
Firefox No
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Descriptors

result
<declaration-value>? Initial: n/a (see prose)

Specification ↗ MDN reference ↗

@mixin

At-rule Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

@mixin [<function-token> <function-parameter>#? ) | <ident-token> ] { <block-contents> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

@private

At-rule Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

@private { <declaration-rule-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

type()

Function Limited availability Experimental Modern CSS: @function

MDN The type() CSS function allows you to specify a particular data type, and is used by the following CSS features:

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

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

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

Syntax

/* for @function */
type( <syntax> )

/* for attr() */
type( <syntax> )

/* for image-set() */
type( <string> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 139
Edge 139
Firefox No
Safari No
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Defined for

@function, attr(), image-set()

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

<dashed-function>

Type Limited availability Experimental Modern CSS: @function

Spec A <dashed-function> is a functional notation whose function name starts with two dashes (U+002D HYPHEN-MINUS). Its argument grammar is:

MDN The <dashed-function> CSS data type represents the syntax used to call CSS custom functions, which are defined using the @function at-rule.

Live preview Example from MDN 
@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

:root {
  --base-color: #faa6ff;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 20px;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}

Browser support

Chrome 139
Edge 139
Firefox No
Safari No
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗