Test your knowledge: CSS Custom Properties and var()

Review

1. What is a custom property in CSS?

   Custom properties use author-defined names beginning with two hyphens and participate in CSS property processing.
2. Which mechanism decides between competing declarations of the same custom property?

   Custom properties participate in the ordinary cascade.
3. How are custom property names compared?

   Custom property names are case-sensitive.
4. Where does var() substitute a custom property?

   var() substitutes the referenced custom property within a CSS value.
5. What does the fallback in var(--x, red) provide?

   The second argument supplies a fallback substitution value.
6. What is the default inheritance behavior of an unregistered custom property?

   Custom properties inherit by default.
7. Why does `var(--n)px` not turn --n: 20 into 20px?

   Substitution is token-based. Use a typed CSS operation such as calc() when appropriate.
8. What happens when custom properties form a dependency cycle on an element?

   A dependency cycle makes the custom properties in the cycle invalid at computed-value time.
9. Which owner determines which competing custom-property declaration wins?

   Custom Properties defines the substitution model; the Cascade determines the winning declaration.
10. What is the key distinction between unregistered custom properties and @property registration?

    Properties and Values API registration can type and otherwise define behavior for a custom property; the unregistered model is deliberately permissive.