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.

Tagged with

Related links

Optimizing PWAs For Different Display Modes — Smashing Magazine

There’s really good browser support for display-mode media queries and this article does a really good job of running through some of the use cases for your progressive web app.

Tagged with

MomBoard: E-ink display for a parent with amnesia

Technology doesn’t have to be terrible. Here’s an absolutely wonderful use of an e-ink display:

I made as much use of vanilla HTML and CSS as possible. I used a small amount of JavaScript but no framework or other libraries.

Tagged with

The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed

Instead of thinking about responsive design in terms of media queries, I like to think of responsive design in these categories.

  • Responsive to the content
  • Responsive to the viewport
  • Responsive to the container
  • Responsive to the user preferences

Tagged with

An Interactive Guide to Flexbox in CSS

This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!

Tagged with

Complex conditional width using flex-basis with clamp: Every Layout

Okay, combining flex-basis and clamp() is pretty cool!

Tagged with

Related posts

Media queries with display-mode

I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.

Designing Intrinsic Layouts by Jen Simmons

A presentation at An Event Apart Seattle 2019.

Making Things Better: Redefining the Technical Possibilities of CSS by Rachel Andrew

A presentation at An Event Apart Seattle 2019.

Fit For Purpose: Making Sense of the New CSS by Eric Meyer

A presentation at An Event Apart Seattle 2018.

Displaying HTML web components

You might want to use `display: contents` …maybe.