CSS flash cards: Master level
51 CSS terms at the Master level, as flash cards.
Updated
Terms in this deck
- @property
- Registers a custom property with a type and default.
- Actual value
- The used value adjusted for the screen, like pixel rounding.
- Additive animation
- An animation that adds to existing values instead of replacing them.
- Anonymous box
- A box the browser creates itself, with no element behind it.
- Baseline alignment
- Lining things up on the line letters sit on.
- Block formatting context
- An area where blocks stack; a new one contains floats.
- Compositing
- Combining painted layers into the final picture.
- Computed value
- The value after easy math like em to px; what children inherit.
- Computed-value time
- The step when specified values become computed values.
- Containing block
- The box an element's percentages and positions are measured from.
- contain-intrinsic-size
- A placeholder size for skipped content, so scrolling doesn't jump.
- content-visibility
- Lets the browser skip rendering off-screen sections.
- Critical CSS
- The styles needed for the first screen, inlined so it shows fast.
- CSS architecture
- How a team organizes CSS so it stays easy to change.
- CSS Object Model
- The browser's in-memory model of the page's CSS, readable from JavaScript.
- Custom property cycle
- Custom properties that depend on each other in a loop.
- Definite size
- A size known without laying out the contents.
- Discrete animation
- An animation that jumps between values with no in-between.
- Formatting context
- An area with its own layout rules, like block, inline, flex or grid.
- Fragmentainer
- One page or column that split content flows into.
- Fragmentation
- Splitting content across pages or columns.
- Indefinite size
- A size that depends on the content, like auto height.
- Independent formatting context
- An area laid out on its own, isolated from its surroundings.
- Initial containing block
- The top-level box, the size of the viewport.
- Inline formatting context
- Where text and inline elements flow along lines and wrap.
- Interpolation
- Working out the in-between values of an animation.
- Intrinsic contribution
- How much space an item asks for when its container sizes to content.
- Invalid at computed-value time
- A var() result that doesn't make sense falls back to inherit/initial.
- Layout
- The step where the browser works out every box's size and position.
- Layout containment
- contain: layout: nothing inside affects layout outside.
- Line box
- The box holding one line of text; as tall as its tallest item.
- Paint containment
- contain: paint: nothing inside is drawn outside the box.
- Painting order
- The sequence the browser paints things: backgrounds, borders, text, outlines.
- Principal box
- The main box an element generates.
- Reflow
- The browser redoing layout after a size or position change.
- Repaint
- Redrawing pixels after a look changes, without a size change.
- Scroll timeline
- Ties animation progress to how far an area has scrolled.
- Scroll-driven animation
- An animation that moves with scrolling instead of time.
- Selector matching
- Browsers read selectors right to left: the last part first.
- Shrink-to-fit sizing
- As wide as the content needs, up to the space available.
- Size containment
- contain: size: the element's size ignores its contents.
- Specificity strategy
- A team rule to keep selectors simple so overrides stay predictable.
- Specified value
- The value the cascade picked, before any math.
- Stacking context
- A group whose layers stack together; z-index only compares within it.
- Stacking order
- The order layers are drawn: backgrounds, content, then positioned elements.
- Style containment
- contain: style: counters and quotes inside stay inside.
- Style invalidation
- Working out which elements need styles recalculated after a change.
- Typed custom property
- A custom property registered with a type, so it can be animated.
- Used value
- The final value after layout, like 50% turned into pixels.
- View timeline
- Ties an animation to an element moving through the screen.
- will-change
- Warns the browser a property is about to animate.