What is CSS constant() used for?


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.


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.

enter image description here

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)
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

: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

Answered By – DreamTeK

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.