CSS CSS Custom Properties & Variables 2 — Questions and Answers
Question 1: Which CSS function allows you to perform arithmetic using custom property values?
- calc() (Correct answer)
- math()
- compute()
- eval()
Correct answer: calc()
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?
- The property uses the fallback value if provided, otherwise it becomes invalid and the declaration is ignored (Correct answer)
- The browser uses the initial value of the CSS property
- An error is thrown in the browser console
- The property inherits from the body element
Correct answer: The property uses the fallback value if provided, otherwise it becomes invalid and the declaration is ignored
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?
- Yes, using getPropertyValue() and setProperty() on the element's style (Correct answer)
- No, they are only accessible inside CSS files
- Yes, but only through a CSS preprocessor
- No, JavaScript cannot interact with CSS variables
Correct answer: Yes, using getPropertyValue() and setProperty() on the element's style
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?
- CSS Custom Properties Level 1 specification (CSS Variables) (Correct answer)
- CSS Preprocessors (Sass/Less)
- CSS Grid Level 2
- CSS Houdini Paint API
Correct answer: CSS Custom Properties Level 1 specification (CSS Variables)
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?
- Yes, they inherit just like color or font-size (Correct answer)
- No, they do not inherit
- Only if declared with inherit keyword
- Only in Chromium-based browsers
Correct answer: Yes, they inherit just like color or font-size
CSS custom properties inherit by default, so a variable set on a parent element is automatically available to all its descendants.
Question 6: What is the correct syntax to use a custom property inside a `calc()` expression?
- calc(var(--size) + 10px) (Correct answer)
- calc(--size + 10px)
- calc($size + 10px)
- calc(@size + 10px)
Correct answer: calc(var(--size) + 10px)
Inside `calc()`, you must wrap the custom property with `var()` — you cannot reference `--size` directly without the function.
CSS CSS Custom Properties & Variables 2
Which CSS function allows you to perform arithmetic using custom property values?