What is CSS constant() used for?

Question

Besides var() (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and env() (https://developer.mozilla.org/en-US/docs/Web/CSS/env) it seems that CSS also supports constant(). I could not find anything on MDN about it and I'm interested to know what it's used for.

Answer 1

I believe constant() was a precursor to env() in the draft spec for environmental variables. You should just use env moving forward and disregard constant.

https://caniuse.com/css-env-function

---

I found these notes from the initial spec:

User Agent Properties

This specification defines an open-ended set of properties called User Agent properties, which, among other things, are used to define the substitution value of constant() functions.

Name: (various) Value: Initial: (nothing, see prose) Applies to: all elements Inherited: yes Percentages: n/a Media: all Computed value: specified value with variables substituted (but see prose for "invalid variables") Canonical order: per grammar Animatable: no

A User Agent property is not specified in a style sheet. User Agent properties instead define variables, referenced with the constant() notation.

For example, a page that wants to use the user's requested font sizing, and page

background:

:root {
  font-size: constant(user-font-size);
}

body {
  background-color: constant(user-background-color);
}

Unlike other CSS properties, User Agent property names are case-sensitive.

User Agent properties are not reset by the all property. If a style rule attempts to define a value for a User Agent property, it is ignored. Using Cascading User Agent Variables: the 'constant()' notation

The value of a User Agent property can be substituted into the value of another property with the constant() function. The syntax of constant() is:

constant() = constant( <user-agent-property-name> [, <declaration-value> ]? )

The constant() function is used in the same manner, and follows the same rules, as the var() function.

Source: https://github.com/w3c/csswg-drafts/issues/1693