demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Design From the Inside Out With CSS Min-Content

css / the box model

Estimated reading time: 2 minutes, 42 seconds

Holly
An example of a container with min-content applied.

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.

is natively responsive: content flows inside the viewport. Until very recently, , 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, , 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; }

Display of a typical block tag with smaller elementsBecause 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

Browser support for CSS min-content

Firefox
Firefox 3+
Chrome
Chrome 18

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.