Glossary

🍋

Anchor Positioning

CSS Anchor Positioning

A layout feature that positions elements relative to a named anchor element, useful for tooltips and popovers.

CSS 🍋

Aspect Ratio (CSS)

CSS aspect-ratio Property

A property that sets a preferred width-to-height ratio for an element, preventing layout shift during loading.

CSS 🍋

BEM

Block Element Modifier

A CSS naming convention using block__element--modifier format to create reusable, maintainable class names.

CSS 🍋

Box Model

CSS Box Model

The layout model where every element is a box with content, padding, border, and margin areas.

CSS 🍋

Calc

CSS calc() Function

A function for performing arithmetic calculations with mixed units in CSS property values (e.g. calc(100% - 2rem)).

CSS 🍋

Cascade

CSS Cascade

The mechanism by which browsers resolve conflicting CSS declarations based on origin, specificity, and order.

CSS 🍋

Clamp

CSS clamp() Function

A function constraining a value between a minimum and maximum, enabling fluid responsive typography and spacing.

CSS 🍋

Color Function

CSS Color Function

Modern CSS functions for defining colors: oklch(), oklab(), color(), hsl(), hwb(), with improved perceptual uniformity.

CSS 🍋

Color Mix

CSS color-mix() Function

A function that blends two colors in a specified color space by a given percentage, replacing manual hex math.

CSS 🍋

Container Query

CSS Container Query

A conditional rule applying styles based on the size of a parent container rather than the viewport.

CSS 🍋

Content Visibility

CSS content-visibility Property

A property enabling the browser to skip rendering of off-screen elements, dramatically improving initial page load.

CSS 🍋

CSS max()

CSS max() Function

A comparison function returning the largest value from a list, useful for responsive sizing with lower bounds.

CSS 🍋

CSS min()

CSS min() Function

A comparison function returning the smallest value from a list, useful for responsive sizing with upper bounds.

CSS 🍋

CSS Nesting Selector

CSS & Nesting Selector

The & character in native CSS nesting representing the parent selector, mirroring Sass nesting behavior.

CSS 🍋

CSS Paint API

CSS Houdini Paint API

A low-level API allowing JavaScript to draw directly into an element's background using a paint worklet.

CSS 🍋

CSS Scope

CSS @scope Rule

A rule that limits style application to a specific DOM subtree, preventing styles from leaking in or out.

CSS 🍋

Custom Properties Inheritance

CSS Custom Properties Inheritance

The mechanism by which CSS custom properties cascade down the DOM tree, inheritable by default unlike regular properties.

CSS 🍋

Custom Property

CSS Custom Property (Variable)

A user-defined property (--name) that stores reusable values, accessible via the var() function.

CSS 🍋

Flexbox

CSS Flexible Box Layout

A one-dimensional layout model for distributing space and aligning items in a row or column.

CSS 🍋

Grid

CSS Grid Layout

A two-dimensional layout system for creating complex web layouts with rows and columns simultaneously.

CSS 🍋

:has() Selector

CSS :has() Relational Pseudo-class

A parent selector that matches elements containing descendants matching a given selector, enabling upward DOM selection.

CSS 🍋

Keyframe Animation

CSS @keyframes Animation

A set of style rules defining intermediate steps in a CSS animation sequence using percentage waypoints.

CSS 🍋

lab()

CSS lab() Color Function

A CSS color function based on the CIE Lab color space, providing device-independent color specification.

CSS 🍋

Layer

CSS @layer Cascade Layer

A mechanism for organizing CSS into explicit layers that control the order of precedence in the cascade.

CSS 🍋

Logical Property

CSS Logical Property

Properties using flow-relative directions (inline-start, block-end) instead of physical ones (left, top) for i18n support.

CSS 🍋

Media Query

CSS Media Query

A conditional rule applying styles only when the device matches specified criteria (width, orientation, etc.).

CSS 🍋

Nesting

CSS Nesting

Native CSS feature allowing selectors to be nested inside parent rules using the & symbol, reducing repetition.

CSS 🍋

oklch()

CSS oklch() Color Function

A perceptually uniform color function using Lightness, Chroma, and Hue, producing consistent visual results across the gamut.

CSS 🍋

Popover

HTML Popover API

A native HTML attribute for creating dismissible overlay content without JavaScript, styled with CSS ::backdrop.

CSS 🍋

Pseudo-class

CSS Pseudo-class

A keyword added to selectors targeting elements in a specific state (e.g. :hover, :focus, :nth-child).

CSS 🍋

Pseudo-element

CSS Pseudo-element

A keyword targeting a specific part of an element (e.g. ::before, ::after, ::first-line, ::selection).

CSS 🍋

Relative Color Syntax

CSS Relative Color Syntax

A syntax for deriving new colors from existing ones by modifying individual channels (e.g. lighten, desaturate).

CSS 🍋

Scroll-Driven Animation

CSS Scroll-Driven Animation

Animations linked to scroll progress rather than time, enabling effects that respond to the user's scroll position.

CSS 🍋

Scroll Snap

CSS Scroll Snap

Properties that control scroll position snapping, ensuring elements align to defined snap points after scrolling.

CSS 🍋

Selector Combinator

CSS Selector Combinator

Characters that define relationships between selectors: descendant (space), child (>), sibling (+, ~).

CSS 🍋

Specificity

CSS Specificity

The algorithm browsers use to determine which CSS rule takes precedence when multiple rules target the same element.

CSS 🍋

Stacking Context

CSS Stacking Context

A three-dimensional conceptualization of HTML elements along the z-axis, created by specific CSS properties.

CSS 🍋

Starting Style

CSS @starting-style Rule

A rule defining initial styles for elements transitioning from display:none, enabling entry animations.

CSS 🍋

Subgrid

CSS Subgrid

A Grid feature allowing child grids to inherit and align with the parent grid's track sizing for consistent layouts.

CSS 🍋

Text Wrap Balance

CSS text-wrap: balance

A text layout mode that distributes text evenly across lines to avoid orphaned short final lines in headings.

CSS 🍋

Transition

CSS Transition

A smooth animation between two property values triggered by a state change (e.g. hover).

CSS 🍋

Viewport Unit

CSS Viewport Unit

Length units relative to the browser viewport dimensions: vw, vh, vmin, vmax, dvh, svh.

CSS 🍋

View Transition

CSS View Transitions API

A browser API enabling animated transitions between DOM states or page navigations with cross-fade and morph effects.

CSS 🍋

Z-Index

CSS Z-Index

A property controlling the stacking order of overlapping positioned elements on the z-axis.

CSS