CSS CSS Custom Properties & Variables 2

Question 1

Which CSS function allows you to perform arithmetic using custom property values?

Accepted Answer

calc()

Answer

The `calc()` function lets you perform arithmetic (add, subtract, multiply, divide) with custom property values, e.g., `width: calc(var(--base) * 2)`.

Question 2

What happens when you use `var()` to reference a custom property that hasn't been declared?

Accepted Answer

The property uses the fallback value if provided, otherwise it becomes invalid and the declaration is ignored

Answer

If a referenced custom property is undefined and no fallback is given, the `var()` call is invalid at computed time and the CSS property is treated as if it has its initial value.

Question 3

Can CSS custom properties be read and modified with JavaScript?

Accepted Answer

Yes, using getPropertyValue() and setProperty() on the element's style

Answer

JavaScript can read a custom property with `getComputedStyle(el).getPropertyValue('--name')` and set it with `el.style.setProperty('--name', value)`.

Question 4

Which CSS feature introduced native custom properties (variables) to the language?

Accepted Answer

CSS Custom Properties Level 1 specification (CSS Variables)

Answer

CSS Custom Properties for Cascading Variables (Level 1) is the W3C specification that introduced native `--variable` syntax to CSS.

Question 5

Do CSS custom properties inherit by default?

Accepted Answer

Yes, they inherit just like color or font-size

Answer

CSS custom properties inherit by default, so a variable set on a parent element is automatically available to all its descendants.

CSS Language Practice Test

CSS Language Practice Test

CSS CSS Custom Properties & Variables 2