Tags: display



`font-display` for the Masses | CSS-Tricks

The font-display property is landing in browsers, and this is a great introduction to using it:

If you don’t know which option to use, then go with swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going with fallback or optional when using font-display.

Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:

if ("fontDisplay" in document.body.style === false) {
  /* JavaScript font loading logic goes here. */

Vanishing boxes with display contents

I’ve seen the exact problem that Rachel describes here—flexbox only applied to direct children, meaning the markup would have to be adjusted. display: contents looks like a nifty solution.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.


Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.

In Flux | Trent Walton

Trent offers some excellent advice for dealing with the effects of the iPad’s retina display on your websites. That advice is: don’t panic.

Resizable Displays | Fluid Interfaces

See now, this is why liquid layouts are the way to go.

What’s the Deal With Display: Inline-Block? | Design Shack

When I linked to the Toast framework the other day, I mentioned that I was intrigued by its use of inline-block for layout. Here’s a more detailed analysis of how display: inline-block works, along with some caveats.