Layout helpers

The first two helpers, new in 3.1, solve problems CSS still can't. The rest have shipped since the library's first versions, before CSS had aspect-ratio, clamp() or flexbox everywhere. They still work and are handy when a value has to come from another element, but for new code the native alternative listed for each is usually better.

Fit text to its box: font-size: fit()#

.hero h1 { font-size: fit(24px, 120px); }

The text is sized to fill the element's width on one line, between the two limits. css-pp adds white-space: nowrap for you. Native alternative: none that works in every browser.

Equal heights: height: same#

.card h3 { height: same; }
.card p  { min-height: same; }

Every element the selector matches gets the height of the tallest one. Unlike flexbox and grid alignment, it works across rows and separate containers. Native alternative: grid-template-rows: subgrid, when the elements share one grid.

Both helpers are recalculated after the page loads, when web fonts finish loading and when the window resizes. If a script changes a container's width, call css.update_vars() afterwards.

Sizes from other elements: width() and height()#

Use width(...) or height(...) as a property value to read an element's current size in pixels. &self means the element being styled, and you can add arithmetic:

/* 16:9 box whose height follows its own width */
.video { width: 100%; height: width(&self*0.5625)px; }

/* match the height of another element */
.sidebar { height: height('#content')px; }

/* center a fixed-size popup */
.popup { position: fixed; left: 50%; margin-left: width(&self/-2)px; }

width() with nothing inside returns the viewport width. The values update when the window is resized.

Native alternative: aspect-ratio: 16 / 9 for proportional boxes; translate: -50% -50% for centering.

Vertical centering: vertical-align: middle!#

On a block element, vertical-align: middle! positions the children in the vertical middle of the box. vertical-align: bottom! aligns them to the bottom. The ! keeps them aligned when the element changes size.

.hero { height: 100vh; vertical-align: middle!; }

Native alternative: display: grid; place-items: center; or display: flex; align-items: center;.

Clamped margins and padding#

min- and max- prefixes on margin and padding properties keep the computed value at or above, or at or below, a number of pixels. Every side is supported: min-margin-left, max-padding-top and the rest.

.content { margin-left: 5%; min-margin-left: 20px; max-margin-left: 120px; }

Native alternative: margin-left: clamp(20px, 5%, 120px);

Inline styles from an attribute: attr()#

A standalone attr(name) declaration copies the CSS text in that attribute into the element's inline style. It is useful when a CMS stores a per-item background in markup:

<div class="person" data-style="background-image:url(/img/team/anna.jpg)"></div>

.person { width: 340px; height: 440px; background-size: cover; attr(data-style); }

$attr(name) is accepted too. Native attr() used inside a value, such as content: attr(data-label), is left alone for the browser to handle.