How to Use CSS Custom Properties in Values for the Content Property

CSS Variables (custom properties) in Pseudo-element content Property

Edit for clarity: CSS custom properties with integer values can be displayed in a pseudo-element's content property via a CSS counter.

div {
    --variable: 123;
}
span:after {
    counter-reset: variable var(--variable);
    content: counter(variable);
}

<div>The variable is <span></span>.</div>

When using CSS Variables (CSS Custom Properties) why is the setting syntax and the getting syntax different?

Having been using CSS Custom Properties since late 2017, I've finally understood properly what they really are and why the var() function is necessary...

They are not (as they so often appear to be) variables intended to directly represent CSS values.

CSS Custom Properties are exactly what they say they are - they are new CSS properties which have not (yet) been assigned values.

---

In CSS, an example of something which really does approximate a variable representing a value is currentColor.

We see currentColor representing a value, here:

.my-div {
  border: 1px dashed currentColor;
}

---

But CSS Custom Properties are not CSS variables which stand in for values like currentColor, .

Instead, CSS Custom Properties are newly invented, named, null-value-properties...

... and those newly-invented, named, null-value-properties are completely re-usable. Just like width, height, color etc. they may have values set and reset in different contexts.

E.g.

/* My custom property is --my-custom-width but I want this
   property to hold different values in different contexts */

.left-two-thirds-of-page {
  --my-custom-width: 120px;
}

.right-third-of-page {
  --my-custom-width: 60px;
}

.my-div {
  width: var(--my-custom-width);
}

That's why the var() function is necessary - it's not delivering "the custom property" - it's extracting the value that custom property is currently holding and then delivering that value.

---

Further Thoughts:

In hindsight, I wonder if the whole name-value relationship wouldn't have been a little clearer if CSS Custom Properties had been called:

CSS Custom Property Names

and the corresponding function had been called:

value()

so the syntax would have been written and read out as:

value(--my-custom-property-name)

---

By extension we could use the value() function (or var() function) not just on custom properties but on any property.

For instance:

width: value(height);

CSS custom properties as fallback value of another one instead of fixed (predefined) value

Custom properties or CSS variables are only accessed using the var() function.

Use var(--my-var, var(--my-background, pink)).

For more information, checkout out Custom property fallback values.

Is there a way to type check CSS custom properties (aka CSS variables)?

Using the new @property rule you can almost have what you want since it will allow to define the type for your variables.

Example:

@property --primary-color {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

.box {
  --primary-color: red; /* this one is valid */
  background:var(--primary-color);
  height:100px;
}

.box-alt {
  --primary-color:10px; /* this one is invalid and will fall to the intial-value */
  background:var(--primary-color);
  border:var(--primary-color) solid green; /* it won't be used here even if contain pixel */
  height:100px;
}

<div class="box"></div>

<div class="box-alt"></div>

---

Related Topics