CSS Advanced Practice Flashcards

What does the CSS custom property fallback syntax var(--x, blue) mean?

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.

Which property defines how a flex item grows relative to siblings?

Answer: flex-grow

flex-grow sets the proportion of available space an item takes when growing.

What does 'object-fit: cover' do to a replaced element like an image?

Answer: Scales to fill the box preserving ratio, cropping overflow

object-fit: cover fills the content box while preserving aspect ratio, cropping the excess.

Which at-rule lets you apply styles based on a container's size rather than the viewport?

Answer: @container

@container queries style elements based on the size of their nearest container with containment.

What does the ':is()' pseudo-class function provide?

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.

Which transform function moves an element along the Z-axis in 3D space?

Answer: translateZ()

translateZ() shifts an element along the depth axis, useful with perspective.

What is the effect of 'will-change: transform'?

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.