Advanced HTML & CSS test (Advanced)

Sample questions

5 sample questions from the Advanced HTML & CSS test, with the answers. Samples are taken out of the live test, so you will not meet these when you sit it.

1. Which CSS property value correctly isolates a subtree from layout and paint operations outside of it, improving performance by limiting the scope of reflows and repaints?

   1. contain: layout paint
   2. contain: layout
   3. contain: layout repaint
   4. contain: paint layout

   Answer: A. contain: layout paint

   The CSS property 'contain: layout paint' isolates a subtree from layout and paint operations outside of it, improving performance by limiting the scope of reflows and repaints. This is a valid and effective use of the 'contain' property for performance optimization. Other options are either incorrect or not valid CSS properties in this context.

2. Which of the following statements accurately describes the behavior of container queries in CSS?

   1. Container queries are based on the font size of the container's content.
   2. Container queries are only supported in Safari and not in Chrome or Firefox.
   3. Container queries allow styles to be applied based on the size of a specific container, rather than the viewport.
   4. Container queries are used to control the flow of animations within a container.

   Answer: C. Container queries allow styles to be applied based on the size of a specific container, rather than the viewport.

   Container queries are a CSS feature that allows developers to apply styles based on the size of a specific container, rather than the viewport size. This is different from media queries, which are based on the viewport. The other options describe incorrect or unrelated behaviors of container queries.

3. Which technique best ensures normalization of design tokens across a large-scale design system?

   1. Storing design tokens in a JSON file without validation
   2. Using a centralized design token registry with strict validation rules
   3. Using CSS variables for every design token
   4. Manually reviewing and updating design tokens in each component

   Answer: B. Using a centralized design token registry with strict validation rules

   Design token normalization ensures consistency across design systems by centralizing token definitions and enforcing validation rules. This prevents inconsistencies and errors that may occur when tokens are manually managed across different files or teams. Other options may improve performance or maintainability but do not directly address normalization of design tokens.

4. Which of the following is NOT a valid strategy for repaint optimization?

   1. Using transform and opacity for animations instead of properties that trigger reflow
   2. Using will-change: transform on elements that are not being animated
   3. Avoiding the use of CSS transitions on properties that trigger layout
   4. Minimizing the use of complex selectors and nested styles

   Answer: B. Using will-change: transform on elements that are not being animated

   Repaint optimization involves minimizing the number of repaints and reflows that occur during rendering. Using will-change: transform on elements that are not being animated is not a valid strategy for repaint optimization because it can cause unnecessary layer creation and memory usage, which may impact performance. The correct approach is to use will-change only on elements that are actively being animated, as it informs the browser to prepare a separate layer for that element, which can improve animation performance.

5. Which of the following statements accurately describes container queries?

   1. Container queries are a deprecated feature and should not be used in modern web development.
   2. Container queries allow styles to be applied based on the size of a specific container, rather than the viewport size.
   3. Container queries are only supported in Safari and not in Chrome or Firefox.
   4. Container queries are used to define the visual hierarchy of elements on a webpage.

   Answer: B. Container queries allow styles to be applied based on the size of a specific container, rather than the viewport size.

   Container queries provide a way to apply styles based on the size of a specific container element, enabling more flexible and responsive design. This is different from media queries, which are based on the viewport size. The other options either describe media queries, are incorrect statements about container queries, or are unrelated to the concept.