CSS Values and Units Module Level 4

https://www.w3.org/TR/css-values-4/
Admin
CSS Values and Units Module Level 4 describes the common values and units accepted by CSS properties...
Tokens:40,009
Snippets:234
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Relative URL in background

Source: https://www.w3.org/TR/css-values-4

Example rule using a relative URL. The base URL is the style sheet's URL, not the source document's.

```css
body { background: url("tile.png") }
```

--------------------------------

### border-collapse usage example

Source: https://www.w3.org/TR/css-values-4

Example of using the border-collapse property with the keyword separate in a CSS rule.

```css
table { border-collapse: separate }
```

--------------------------------

### Custom property with <dashed-ident>

Source: https://www.w3.org/TR/css-values-4

Example of a custom property name using the <dashed-ident> type, which must start with two dashes.

```css
.foo {
  --fg-color: blue;
}
```

--------------------------------

### Equivalent @import url() and string

Source: https://www.w3.org/TR/css-values-4

Shows that in contexts like @import, a bare string is equivalent to a url() function containing that string.

```css
@import url("base-theme.css");
@import "base-theme.css";
```

--------------------------------

### Define and use a custom color profile with @color-profile

Source: https://www.w3.org/TR/css-values-4

Shows how to define an author-defined color profile using a <dashed-ident> and then use it in the color() function. The <dashed-ident> prefix avoids clashes with pre-defined profiles.

```css
@color-profile --foo { src: url(https://example.com/foo.icc); }
.foo {
  color: color(--foo 1 0 .5 / .2);
}

```

--------------------------------

### Style sheet URL

Source: https://www.w3.org/TR/css-values-4

The URL of the style sheet that contains the relative URL example. It serves as the base URL for resolving relative URLs.

```text
http://www.example.org/style/basic.css
```

--------------------------------

### CSS width clamping with calc()

Source: https://www.w3.org/TR/css-values-4

Shows three equivalent declarations for a width that clamps to 0px because widths smaller than 0px are not allowed. The first two use calc() and the third is the clamped result.

```css
width: calc(5px - 10px);
width: calc(-5px);
width: 0px;
```

--------------------------------

### asin(A)

Source: https://www.w3.org/TR/css-values-4

Documentation for the CSS asin() inverse trigonometric function.

```APIDOC
## asin(A)

### Description
Computes the arcsine of a number, returning an angle in radians. The argument must resolve to a <number>. The returned angle is normalized to the range [-90deg, 90deg].

### Parameters
- **A** (calculation) - Required - The value whose arcsine is to be computed.

### Return Value
An <angle> in radians, normalized to [-90deg, 90deg].
```

--------------------------------

### sin(A)

Source: https://www.w3.org/TR/css-values-4

Documentation for the CSS sin() trigonometric function.

```APIDOC
## sin(A)

### Description
Computes the sine of an angle. The argument must resolve to a <number> or an <angle>, interpreted as radians. Returns a <number> between -1 and 1.

### Parameters
- **A** (calculation) - Required - The angle in radians or an angle value.

### Return Value
A <number> between -1 and 1.
```

--------------------------------

### Equivalent quoted and unquoted url()

Source: https://www.w3.org/TR/css-values-4

Demonstrates that quoted and unquoted url() forms are equivalent. The unquoted form is parsed as a <url-token>.

```css
background: url("http://www.example.com/pinkish.gif");
background: url(http://www.example.com/pinkish.gif);
```

--------------------------------

### src() with var()

Source: https://www.w3.org/TR/css-values-4

Shows that src() can accept a URL from a variable because it lacks the special parsing of url(). The three declarations have the same meaning.

```css
background: src("http://www.example.com/pinkish.gif");
--foo: "http://www.example.com/pinkish.gif";
background: src(var(--foo));
```

--------------------------------

### CSS clamp() with none for minimum-only

Source: https://www.w3.org/TR/css-values-4

Uses clamp() with none as the maximum to impose only a minimum size, allowing the font-size to grow without an upper bound.

```css
.type {
  /* Force the font-size to be at least 12px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, none);
}

```

--------------------------------

### atan(A)

Source: https://www.w3.org/TR/css-values-4

Documentation for the CSS atan() inverse trigonometric function.

```APIDOC
## atan(A)

### Description
Computes the arctangent of a number, returning an angle in radians. The argument must resolve to a <number>. The returned angle is normalized to the range [-90deg, 90deg].

### Parameters
- **A** (calculation) - Required - The value whose arctangent is to be computed.

### Return Value
An <angle> in radians, normalized to [-90deg, 90deg].
```

--------------------------------

### tan(A)

Source: https://www.w3.org/TR/css-values-4

Documentation for the CSS tan() trigonometric function.

```APIDOC
## tan(A)

### Description
Computes the tangent of an angle. The argument must resolve to a <number> or an <angle>, interpreted as radians. Returns a <number> that can be any number between -∞ and +∞.

### Parameters
- **A** (calculation) - Required - The angle in radians or an angle value.

### Return Value
A <number> between -∞ and +∞.
```
Tokens:
Raw