Instructions and covered skills
This online test consists of multiple-choice questions. Read each question carefully before selecting your answer. For best results, ensure you are in a quiet environment without distractions. Turn off notifications and focus solely on the test. There is no time limit, but try to answer each question based on your knowledge. Once you submit, you cannot change your answers.
Key Areas
- Defining CSS custom properties using the -- prefix within rule sets, typically on :root for global scope.
- Using the var() function to retrieve custom property values and provide fallbacks (e.g., var(--main-color, #000)).
- Understanding the cascade, inheritance, and scope of custom properties (they inherit like normal properties, but are affected by specificity and cascade).
- Practical theming: creating light/dark themes by toggling custom property values on a parent element, often via HTML attribute or class change.
- Dynamic updates with JavaScript to change custom properties in real-time, enabling interactive theming.
- Using custom properties in calc(), media queries, and other dynamic contexts, and knowing their limitations (e.g., cannot be used in media queries directly but can be used via var() inside the query).
- Fallsbacks and error handling: when custom property is undefined, fallback value is used; if no fallback, the property value becomes invalid (initial or inherited).
- Custom properties with shorthand properties: careful with fallbacks—use var() for each sub-property or use a separate fallback.
Recommended Preparation
- Review the CSS Custom Properties specification (CSS Variables Module Level 1).
- Practice creating a theme toggle (e.g., light/dark mode) using custom properties.
- Experiment with the var() function and fallbacks in different property contexts.
- Understand the difference between custom properties and preprocessor variables (Sass, Less).