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.
CSS Quiz (Advanced) - All Questions
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.
Question 2: Which CSS property is most GPU-optimized for animations?
- margin
- top
- left
- transform
Explanation: transform animations are GPU-accelerated and performant.
Question 3: Which scenario triggers layout reflow?
- Changing color
- Changing opacity
- Changing transform
- Changing width
Explanation: Changing width affects layout and triggers reflow.
Question 4: Which property prevents layout shifts during font loading?
- font-style
- font-display
- text-rendering
- font-weight
Explanation: font-display controls font loading behavior.
Question 5: Which CSS function clamps a value within a range?
- minmax()
- range()
- clamp()
- fit()
Explanation: clamp() restricts values between min and max.
Question 6: Which CSS Grid function creates flexible tracks?
- repeat()
- minmax()
- auto-fit()
- fr()
Explanation: minmax() defines flexible grid track sizes.
Question 7: What does contain: layout do?
- Hides overflow
- Creates new stacking context
- Limits layout recalculation scope
- Fixes layout position
Explanation: contain: layout improves performance by isolating layout.
Question 8: Which pseudo-class targets elements with no children?
- :empty
- :blank
- :only-child
- :root
Explanation: :empty selects elements with no child nodes.
Question 9: Which selector has the highest specificity?
- Class selector
- Type selector
- ID selector
- Attribute selector
Explanation: ID selectors have higher specificity.
Question 10: Which CSS feature isolates styles to a subtree?
- isolation
- contain
- scoped styles
- :root
Explanation: contain isolates rendering and layout effects.
Question 11: Which value of will-change should be used cautiously?
- auto
- transform
- opacity
- all
Explanation: will-change: all can hurt performance if overused.
Question 12: Which property defines logical margin inline start?
- margin-left
- margin-inline-start
- margin-start
- padding-inline
Explanation: margin-inline-start supports logical layouts.
Question 13: Which unit adapts to container size instead of viewport?
- vw
- vh
- cqw
- rem
Explanation: Container query units adapt to container size.
Question 14: Which CSS feature enables container-based responsiveness?
- Media queries
- Viewport units
- Container queries
- Flexbox
Explanation: Container queries respond to container size.
Question 15: Which property improves scroll performance?
- scroll-behavior
- will-change
- contain
- overscroll-behavior
Explanation: overscroll-behavior controls scroll chaining.
Question 16: Which selector matches elements based on their children?
- :has()
- :where()
- :is()
- :not()
Explanation: :has() selects parent elements conditionally.
Question 17: Which selector adds zero specificity?
- :is()
- :not()
- :where()
- :has()
Explanation: :where() adds no specificity.
Question 18: Which CSS property controls scroll snapping?
- scroll-align
- scroll-snap-type
- snap-behavior
- scroll-lock
Explanation: scroll-snap-type enables snap behavior.
Question 19: Which value forces immediate snap alignment?
- mandatory
- proximity
- auto
- force
Explanation: mandatory forces snap alignment.
Question 20: Which property defines snap position?
- scroll-position
- scroll-snap-align
- snap-align
- scroll-align
Explanation: scroll-snap-align defines snap alignment.
Question 21: Which CSS feature avoids cumulative layout shift?
- aspect-ratio
- object-fit
- contain
- overflow
Explanation: aspect-ratio reserves layout space.
Question 22: Which property preserves 3D transformations?
- transform-style
- perspective
- backface-visibility
- translateZ
Explanation: transform-style: preserve-3d keeps 3D children.
Question 23: Which property controls 3D depth?
- z-index
- perspective
- translateZ
- depth
Explanation: perspective defines 3D depth.
Question 24: Which value hides the backside of a 3D element?
- visibility: hidden
- display: none
- backface-visibility: hidden
- opacity: 0
Explanation: backface-visibility hides reversed faces.
Question 25: Which property enables subpixel font rendering hints?
- font-smooth
- text-rendering
- font-display
- font-feature-settings
Explanation: text-rendering influences glyph rendering.
Question 26: Which CSS rule loads fonts conditionally?
- @font-face
- @media
- @supports
- @import
Explanation: @supports applies styles conditionally.
Question 27: Which CSS function blends colors dynamically?
- rgba()
- hsl()
- color-mix()
- mix()
Explanation: color-mix() blends multiple colors.
Question 28: Which property isolates blend modes?
- mix-blend-mode
- background-blend-mode
- isolation
- contain
Explanation: isolation prevents blending outside the element.
Question 29: Which value allows blending with background?
- multiply
- overlay
- screen
- all
Explanation: multiply blends colors by multiplication.
Question 30: Which property creates a clipping path?
- mask
- clip-path
- overflow
- shape-outside
Explanation: clip-path defines a clipping region.
Question 31: Which CSS feature wraps text around shapes?
- clip-path
- mask
- shape-outside
- float
Explanation: shape-outside defines text flow shapes.
Question 32: Which property optimizes offscreen rendering?
- content-visibility
- contain
- display
- visibility
Explanation: content-visibility skips offscreen rendering.
Question 33: Which value auto-skips rendering offscreen content?
- hidden
- auto
- contain
- skip
Explanation: auto enables browser-driven optimization.
Question 34: Which selector matches focus via keyboard only?
- :focus
- :focus-visible
- :active
- :hover
Explanation: :focus-visible targets keyboard focus.
Question 35: Which property disables scroll chaining?
- scroll-behavior
- overscroll-behavior
- scroll-snap-type
- contain
Explanation: overscroll-behavior controls scroll propagation.
Question 36: Which feature allows CSS-based calculations?
- var()
- calc()
- clamp()
- minmax()
Explanation: calc() performs runtime calculations.
Question 37: Which property defines logical block size?
- height
- block-size
- inline-size
- min-height
Explanation: block-size adapts to writing modes.
Question 38: Which property adapts layout to writing mode?
- direction
- writing-mode
- text-orientation
- unicode-bidi
Explanation: writing-mode changes layout flow direction.
Question 39: Which selector reduces specificity conflicts?
- !important
- :where()
- :not()
- :has()
Explanation: :where() keeps specificity at zero.
Question 40: Which property controls text justification algorithm?
- text-align
- text-justify
- word-spacing
- letter-spacing
Explanation: text-justify controls justification behavior.
Question 41: Which CSS feature improves accessibility for reduced motion?
- @media prefers-color-scheme
- @media prefers-reduced-motion
- @supports motion
- @media motion
Explanation: prefers-reduced-motion respects user preferences.
Question 42: Which property enables smooth scrolling?
- scroll-smooth
- scroll-behavior
- scroll-type
- smooth-scroll
Explanation: scroll-behavior controls scroll animation.
Question 43: Which feature supports dark mode styling?
- @supports
- @media prefers-color-scheme
- @theme
- @color-scheme
Explanation: prefers-color-scheme detects theme preference.
Question 44: Which CSS property hints resource loading priority?
- importance
- fetchpriority
- priority
- preload
Explanation: fetchpriority hints browser loading priority.
CSS Quiz (Advanced)
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.
15
Questions
~10
Minutes
10
Min Limit