CSS (Advanced) Skills Certification Test

- The assessment has a time limit.
- Do not use search engines or seek assistance from others.
- Once you've submitted an answer, you can go back.
- You may exit the test, but the timer will continue running.
- You have 1 attempts per assessment every 30 days.

Skills Being Assessed:

This advanced certification will rigorously evaluate your expertise in areas including:

• CSS Houdini & Extensibility:
  • Understanding the purpose and application of Houdini APIs (e.g., CSS Painting API, Typed Object Model, Properties & Values API - @property, Animation Worklet).
• Advanced Performance Optimization:
  • In-depth knowledge of CSS Containment (contain, content-visibility, contain-intrinsic-size).
  • Strategies for preventing Cumulative Layout Shift (CLS) and optimizing rendering paths.
  • Understanding properties like will-change and inert.
• Cascade, Specificity & Layers:
  • Mastery of CSS cascade layers (@layer) for sophisticated style organization and precedence control.
  • Advanced specificity management using pseudo-classes like :is(), :where(), and :has().
  • Understanding properties like all with values like revert-layer.
• Modern & Future Layout Paradigms:
  • Container Queries: Building components that respond to their own size, not just the viewport.
  • CSS Grid & Subgrid: Advanced Grid layouts, including subgrid for aligning nested grids.
  • Logical Properties & Writing Modes: Creating truly internationalized and adaptable layouts.
  • Intrinsic sizing, aspect-ratio, and display: contents.
• Scroll-Driven Interactions & View Transitions:
  • Implementing scroll-linked animations (scroll-timeline, view-timeline, animation-timeline).
  • Utilizing the View Transitions API for seamless page state changes.
  • Advanced control over scroll behavior (overscroll-behavior, scroll-snap-stop).
• Advanced Animation & Transitions:
  • Complex cubic-bezier() timing functions and spring() animations (conceptual/future).
  • Using animation-fill-mode, paint-order, and CSS Motion Path.
  • Leveraging @starting-style for entry/exit animations.
• Advanced Typography & Text Control:
  • Variable fonts (font-variation-settings), color fonts (font-palette).
  • Fine-grained control over text decoration (text-underline-offset, text-decoration-skip-ink).
  • Advanced line breaking, justification (text-justify), and text-wrap: balance.
  • CSS Counter Styles for custom numbering.
• Compositing, Blending & Visual Effects:
  • Advanced use of mix-blend-mode and filter properties.
  • Understanding stacking contexts (isolation: isolate).
• Emerging & Experimental Features:
  • CSS Anchor Positioning (@position-try) for popovers and tooltips.
  • CSS Scoping (@scope) for component-level style encapsulation.
  • Container Style Queries.
• CSS Architecture & Best Practices:
  • Methodologies like ITCSS (Inverted Triangle CSS).
  • Writing Defensive CSS to handle unexpected content and browser quirks.
  • Strategic use of CSS Custom Properties for theming and dynamic styling.
• Accessibility & User Preferences:
  • Implementing user preference media queries (prefers-reduced-motion, prefers-contrast, prefers-reduced-data).
  • Using properties like accent-color and :focus-visible for accessible UI.

What to Review Before You Start:

To excel in this advanced assessment, ensure you have a strong command of:

• The CSS Cascade, Specificity, and Inheritance in depth: Especially how @layer, :is(), and :where() influence these.
• CSS Houdini APIs: Focus on the concepts behind the Painting API, Typed OM, and the @property rule.
• Performance-critical CSS: Deep dive into the CSS Containment module, content-visibility, and techniques to minimize layout shifts.
• Container Queries & Subgrid: Practice building components that leverage these advanced layout features.
• Scroll-Driven Animations & View Transitions: Understand the APIs and their use cases for modern dynamic experiences.
• Logical Properties: Be comfortable thinking in terms of block and inline directions.
• Advanced Selectors: Particularly :has(), and the nuances of :is() vs. :where().
• Variable Fonts and modern typographic controls.
• The latest interaction-related properties (e.g., popover, Anchor Positioning concepts).

This test demands a forward-looking perspective on CSS and its evolving capabilities. We wish you the best of luck!