CSS CSS Advanced Practice 3 — Questions and Answers
Question 1: What does the CSS custom property fallback syntax var(--x, blue) mean?
- Use blue and ignore --x
- Use --x, or blue if --x is invalid or undefined (Correct answer)
- Blend --x with blue
- Set --x to blue
Correct answer: Use --x, or blue if --x is invalid or undefined
The second argument is the fallback used when the custom property is not set or invalid.
Question 2: Which property defines how a flex item grows relative to siblings?
- flex-shrink
- flex-basis
- flex-grow (Correct answer)
- order
Correct answer: flex-grow
flex-grow sets the proportion of available space an item takes when growing.
Question 3: What does 'object-fit: cover' do to a replaced element like an image?
- Stretches to fill ignoring ratio
- Scales to fill the box preserving ratio, cropping overflow (Correct answer)
- Shrinks to fit entirely inside
- Repeats the image
Correct answer: Scales to fill the box preserving ratio, cropping overflow
object-fit: cover fills the content box while preserving aspect ratio, cropping the excess.
Question 4: Which at-rule lets you apply styles based on a container's size rather than the viewport?
- @media
- @container (Correct answer)
- @supports
- @scope
Correct answer: @container
@container queries style elements based on the size of their nearest container with containment.
Question 5: What does the ':is()' pseudo-class function provide?
- Higher specificity always
- A way to match a list of selectors compactly, taking the highest specificity in the list (Correct answer)
- Negation of a selector
- Pseudo-element targeting
Correct answer: A way to match a list of selectors compactly, taking the highest specificity in the list
:is() matches any selector in its list and takes the specificity of its most specific argument.
Question 6: Which transform function moves an element along the Z-axis in 3D space?
- translateX()
- translateZ() (Correct answer)
- scaleZ()
- skewZ()
Correct answer: translateZ()
translateZ() shifts an element along the depth axis, useful with perspective.
Question 7: What is the effect of 'will-change: transform'?
- Disables transforms
- Hints the browser to optimize for upcoming transform changes (Correct answer)
- Applies a default transform
- Locks the element position
Correct answer: Hints the browser to optimize for upcoming transform changes
will-change advises the browser to prepare optimizations for the named property before it changes.
CSS CSS Advanced Practice 3
What does the CSS custom property fallback syntax var(--x, blue) mean?