Every designer falls into one of two broad categories:

• Designers that create the design first, then try to fit content inside a static frame.
• Good designers who consider all aspects of the content, together with the contexts in which it will be used, and create a design that fits the content.

HTML is natively responsive: content flows inside the viewport. Until very recently, CSS, as it was popularly used, was pitted against this natural feature, with designers creating fixed layout “boxes” into which they tried to force content.

The last three years has seen a soft revolution that has many names – adaptive design, responsive design, mobile-first design. At their best, all consider content first. CSS has enabled this revolution through many different properties and values, an important (although relatively unknown) aspect of which is intrinsic and extrinsic width values.

Let’s take a look at a common web page design issue that is directly addressed by this new value system: an image inside an HTML figure element.

<figure>
	<img src="holly.jpg" alt>
	<figcaption>Holly</figcaption>
	<p>A photo taken by Thomas Hawk on April 18, 2010 using a 
		Canon EOS 5D Mark II
</figure>

The CSS:

figure {
	background: #aebc23;
}

Because figure is a block tag, it stretches all the way across its container. When designing content-first, we often want the container – the <figure> element, in this case - to be as small as possible. Until now, there were a few ways of doing so:

figure {
	float: left;
}

Collapses the figure, but if the paragraph is wider than the image, the figure element will collapse to the widest piece of content, not the width of the photograph. Using display: inline-block or display: table-cell will produce the same result.

figure {
	width: 500px;
}

Sets the <figure< to the correct width, but makes it fixed and non-responsive. If the image changes in any way, the container will no longer relate to it correctly.

CSS min-content To The Rescue

What we want, ultimately, is a way of saying, “reduce the width of the container automatically so that the image fits inside it perfectly. If text content needs to wrap inside the container to make that happen, that’s okay”.

We can achieve that with the min-content value. Despite being around since mid-2006, the value is still considered experimental, and requires a vendor prefix. (You’ve probably used prefixes in front of properties, but they can equally be applied to values).

The CSS for the figure is now:

figure {
	border: 2px solid black;
	background: #cae9b8;
	margin: 0;
	width: -moz-min-content;
	width: -webkit-min-content;
	width: min-content;
}

The figure immediately collapses around the widest piece of content that cannot be broken with spaces. Margins and padding still work inside the container, so we’ll use the former to add space around the paragraph and <figcaption>:

figcaption, p {
	text-align: center;
	margin: 1rem;
}
figcaption {
	font-weight: bolder;
	font-size: 1.2rem;
}

min-content is one of a suite of possible values for intrinsic and extrinsic width and height values, which, together with flexbox, grid and other layout systems, allow for greater flexibility in web page designs. Support is excellent: all modern browsers support min-content, with the significant exception of lack of Internet Explorer and Opera Mini.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.