Question 1: What creates a new stacking context in CSS?
- position: relative
- z-index: auto
- opacity less than 1
- float: left
Explanation: An element with opacity less than 1 creates a new stacking context.
This CSS Advanced Quiz is designed for experienced frontend developers who want to validate deep CSS knowledge. It focuses on advanced layouts, performance, browser behavior, accessibility, and real-world interview-level CSS challenges.
Explanation: An element with opacity less than 1 creates a new stacking context.
Explanation: transform animations are GPU-accelerated and performant.
Explanation: Changing width affects layout and triggers reflow.
Explanation: font-display controls font loading behavior.
Explanation: clamp() restricts values between min and max.
Explanation: minmax() defines flexible grid track sizes.
Explanation: contain: layout improves performance by isolating layout.
Explanation: :empty selects elements with no child nodes.
Explanation: ID selectors have higher specificity.
Explanation: contain isolates rendering and layout effects.
Explanation: will-change: all can hurt performance if overused.
Explanation: margin-inline-start supports logical layouts.
Explanation: Container query units adapt to container size.
Explanation: Container queries respond to container size.
Explanation: overscroll-behavior controls scroll chaining.
Explanation: :has() selects parent elements conditionally.
Explanation: :where() adds no specificity.
Explanation: scroll-snap-type enables snap behavior.
Explanation: mandatory forces snap alignment.
Explanation: scroll-snap-align defines snap alignment.
Explanation: aspect-ratio reserves layout space.
Explanation: transform-style: preserve-3d keeps 3D children.
Explanation: perspective defines 3D depth.
Explanation: backface-visibility hides reversed faces.
Explanation: text-rendering influences glyph rendering.
Explanation: @supports applies styles conditionally.
Explanation: color-mix() blends multiple colors.
Explanation: isolation prevents blending outside the element.
Explanation: multiply blends colors by multiplication.
Explanation: clip-path defines a clipping region.
Explanation: shape-outside defines text flow shapes.
Explanation: content-visibility skips offscreen rendering.
Explanation: auto enables browser-driven optimization.
Explanation: :focus-visible targets keyboard focus.
Explanation: overscroll-behavior controls scroll propagation.
Explanation: calc() performs runtime calculations.
Explanation: block-size adapts to writing modes.
Explanation: writing-mode changes layout flow direction.
Explanation: :where() keeps specificity at zero.
Explanation: text-justify controls justification behavior.
Explanation: prefers-reduced-motion respects user preferences.
Explanation: scroll-behavior controls scroll animation.
Explanation: prefers-color-scheme detects theme preference.
Explanation: fetchpriority hints browser loading priority.
This CSS Advanced Quiz is designed for experienced frontend developers who want to validate deep CSS knowledge. It focuses on advanced layouts, performance, browser behavior, accessibility, and real-world interview-level CSS challenges.