Evan Minto

Responsive Floats Using the “Switcher Expression”

Mon, 14 Oct 2019 07:00:00 GMT

Back in the day (...five or ten years ago), if you wanted to put two things next to each other in CSS, you needed to use floats. It was a hack, taking a feature meant for wrapping text around images and abusing it to create multi-column layouts. These days Flexbox and Grid have replaced the handy ol’ float for this purpose, so we can finally float only the things that should be floated.

Still, now that we’ve got these new tools, floats are starting to show their age. Flexbox and Grid have mechanisms for dynamically allocating space based on the container size (Flexbox is all about exactly this, and Grid has auto-fill/auto-fit), but floats just... float.

What if I want an element to float in some circumstances but not float in others? For example, when the container gets too small and the text is getting pushed out by the floated element, I’d like it to stop floating and just behave like a regular, un-floated block. Previously I would have used a media query to solve this, but doing so couples my float’s state to the viewport size, meaning that I can’t use it in a reusable component. Another option is to set the float’s width to a percentage (say, 50% of the container width), but then we end up with a teensy tiny floated element when the container gets really small.

What we really need is something like the “Switcher” from Every Layout: a component that can switch between floated and un-floated versions based on the container size. It turns out we can achieve just that by stealing a bit of code from that very same Switcher layout! Without further ado:

<codepen-embed username="vamptvo" pen="MWWKKJz" name="Switcher Float">

.float {
  --breakpoint: 40rem;
  --min-size: 40%;
  --gap: 1.5rem;

  float: left;
  width: calc((var(--breakpoint) - 100%) * 9999);
  min-width: var(--min-size);
  max-width: 100%;
  margin-bottom: var(--gap);
  margin-right: var(--gap);
}

</codepen-embed>

The element now floats to the left and takes up 40% of the container width. When the container width drops below 40rem, the floated element takes up 100% of the container width and pushes the surrounding text underneath it.

So how does it work? Let’s break it down line by line.

float: left;

Obviously we need to float the element, though notice that there’s no code here to “un-float” it. That’s because it’s going to stay floated regardless of the available space; we’re just going to make it look like it’s set to float: none;.

width: calc((var(--breakpoint) - 100%) * 9999);

This is the key right here. It’s what I’ll henceforth refer to as the “switcher expression,” the calc() expression that enables the Switcher layout. The var(--breakpoint) is a custom property, CSS’s new-ish built-in variable feature. The rest of it is a fancy way of comparing that breakpoint value with the current width of the element, returning a huge positive number (if the width is smaller than the breakpoint), a huge negative number (if the width is larger than the breakpoint), or zero (if the widths are the same). For a more in-depth explanation of how it works, I recommend you purchase the full version of Every Layout

This line gets us most of the way there, but obviously we don’t want to actually use these huge numbers as-is. In the original Switcher layout, this value is used as the flex-basis, and standard Flexbox behavior ensures that very large or small values get clamped. We don’t have that luxury here, so instead we need to use...

min-width: var(--min-size);

When the value of the switcher expression results in a non-positive number, we want to clamp the value to some sensible minimum, in this case 40% of the container size. min-width is perfect for the job. This value must be a percentage, at least in most browsers (more on that in a bit), since a fixed length value would mean that the floated element would overflow its container when the container width is smaller than the minimum.

max-width: 100%;

Now we handle the other side. When the switcher expression results in a huge positive number, we clamp it down to 100% of the container size. When the element fills its width, there’s no more space for text to wrap around it, so the text starts directly below it, as if it weren’t floated at all.

margin-bottom: var(--gap);
margin-right: var(--gap);

Finally, we add margins on the bottom and right side of the element, ensuring a readable gutter for text to flow around. You might be worried about putting a gutter on the right side when the element gets set to 100% width, but because it’s floated and sits outside of regular flow, this margin has no effect. Perfect!

Caveat: `min-width` Must Be a Percentage

The biggest caveat is that min-width has to be a percentage length. This can be slightly alleviated by using the calc() expression I showcased in my post about intrinsically responsive CSS Grids: calc(10% + 5rem). This expression changes its value based on the container, but the container size has less influence than it would have on a pure percentage value. It does still have a fixed minimum size (meaning there’s a risk of overflow), but it’s much smaller than it would be if we just set a fixed minimum. Still, this approach is pretty finnicky. It can be hard to pick the right values to get a size you want.

Thankfully, as I mentioned in the Grid post, Safari supports some new functions that can help us here.

<codepen-embed username="vamptvo" pen="ZEEQQJP" name="Switcher Float with min()">

--min-size: 20rem;
--switcher-width: calc((var(--breakpoint) - 100%) * 9999);

width: max(min(var(--min-size), 100%), min(var(--switcher-width), 100%));

</codepen-embed>

Using the min() and max() functions, we can clamp the switcher value and prevent overflow in small containers. The min() functions prevent either the --min-size or the --switcher-width from exceeding the width of the container, ensuring that they are safe to use without any overflow. Then the max() function selects the larger of the two values to use as the final computed width.

Safari is the only browser that supports min() and max() right now (no support for clamp() just yet), but Chrome is working on adding support.

Warning: I was tempted to use min() inside the min-width declaration, but doing so coupled with a custom property reference causes a crash in Safari when opening the Web Inspector. Careful!

</div>

Caveat: Ignores Intrinsic Width of Floated Element

If the element is an image, it will always take up 40% or 100% of the container width, regardless of its intrinsic dimensions. This can pose some problems for small images in large containers, but as long as you’re using sensible image dimensions this shouldn’t cause any big issues. And if you’re floating container elements like <div>s, there’s nothing at all to worry about.

Caveat: CSS Shapes Can Cause Unexpected Floating

Certain CSS Shapes will cause text to wrap even in the small-container case, since carving out the custom shape makes enough space for the words to start filling in the gaps. This may actually be desirable in specific cases, but it’s definitely something to keep in mind.

Use Cases

I recommend this for almost any situation that calls for a regular float: images, figures, sidebars, you name it. Floating the element using the switcher expression makes your component much more portable, and makes it possible to build complex nested floats, such as this floated sidebar with a floated image inside it (resize your window to see it in action):

<codepen-embed username="vamptvo" pen="JjjGYJe" name="Nested Floats">

<article>
  <h1>Float On</h1>

  <p>
    I backed my car into a cop car the other day<br />
    Well, he just drove off, sometimes life's okay<br />
    I ran my mouth off a bit too much, oh, what did I say?<br />
    Well, you just laughed it off, it was all okay<br />
  </p>

  <p>
    And we'll all float on, okay<br />
    And we'll all float on, okay<br />
    And we'll all float on, okay<br />
    And we'll all float on anyway, well<br />
  </p>

  <aside class="sidebar float">
    <img src="//placehold.it/1200x1200" class="float" />

    <h2>Modest Mouse</h2>
    <p>
      Modest Mouse is an American rock band formed in 1992 in Issaquah,
      Washington and currently based in Portland, Oregon. The founding members
      are lead singer/guitarist Isaac Brock, drummer Jeremiah Green, and bassist
      Eric Judy. Strongly influenced by Pavement, Pixies, XTC, and Talking
      Heads, the band rehearsed, rearranged, and recorded demos for almost two
      years before finally signing with small-town indie label K Records and
      releasing numerous singles.
    </p>
  </aside>

  <p>
    A fake Jamaican took every last dime with that scam<br />
    It was worth it just to learn from sleight-of-hand<br />
    Bad news comes, don't you worry even when it lands<br />
    Good news will work it's way to all them plans<br />
    We both got fired on exactly the same day<br />
    Well, we'll float on, good news is on the way<br />
  </p>

  <p>
    And we'll all float on, okay<br />
    And we'll all float on, okay<br />
    And we'll all float on, okay<br />
    And we'll all float on, alright<br />
  </p>

  <p>
    Already we'll all float on<br />
    Now don't you worry, we'll all float on<br />
    Alright, already we'll all float on<br />
    Alright, don't worry, we'll all float on<br />
  </p>

  <p>
    Alright, already and we'll all float on<br />
    Alright, already we'll all float on<br />
    Alright, don't worry even if things end up a bit too heavy<br />
    We'll all float on, alright<br />
  </p>

  <p>
    Already we'll all float on<br />
    Alright, already we'll all float on<br />
    Okay, don't worry, we'll all float on<br />
    Even if things get heavy, we'll all float on<br />
    Alright, already we'll all float on<br />
    Alright, no don't you worry, we'll all float on<br />
    Alright, all float on<br />
  </p>
</article>

* {
  box-sizing: border-box;
  margin-bottom: 0;
  margin-top: 0;
}

/* Default vertical rhythm */
* + * {
  margin-top: 1.5rem;
}

br {
  margin: 0;
}

.float {
  --direction: left;
  --breakpoint: 40rem;
  --min-size: 33.333%;
  --gap: 1.5rem;

  /* 1 for right margin, 0 for left margin */
  --use-right-margin: 1;

  float: var(--direction);
  width: calc((var(--breakpoint) - 100%) * 9999);
  min-width: var(--min-size);
  max-width: 100%;
  margin-right: calc(var(--use-right-margin) * var(--gap));
  margin-left: calc((1 - var(--use-right-margin)) * var(--gap));
  margin-bottom: var(--gap);
}

/* Remove default top margin since the floated element is removed from flow. */
.float + * {
  margin-top: 0;
}

.sidebar {
  --direction: right;
  --use-right-margin: 0;

  background: tan;
  padding: 1.5rem;
}

.sidebar .float {
  --breakpoint: 25rem;
}

</codepen-embed>

Or we can build an even more expressive collection of custom properties to allow consumers of this component to fine-tune the sizing of both the float and the text next to it. In this version, the --breakpoint isn’t a fixed value; it’s computed by adding together the minimum size of the float, the gap, and the --min-measure, a length using ch units (each is equal to the width of the 0 character in the current font). Now we don’t have to express the breakpoint as a fixed number. We can express it based on the minimum number of characters we want to see in the right-hand column before breaking to the stacked version of the layout.

<codepen-embed username="vamptvo" pen="eYYJRVV" name="Switcher Float with min() and --min-measure">

.float {
  /* Add up the components that make up the total width: target float size, gap, and target measure. */
  --breakpoint: calc(var(--min-size) + var(--gap) + var(--min-measure));

  /* Minimum number of characters to show in a line of text next to the float before making the float fill the container. */
  --min-measure: 30ch;

  /* Minimum size of the float when it's actually floating. Set the fallback version to customize percentage behavior and set the advanced one to customize fixed width behavior. */
  --min-size: var(--min-size-fallback);
  --min-size-fallback: 33.333%;
  --min-size-advanced: 20rem;

  /* Gap between the float and its surrounding elements. */
  --gap: 1.5rem;

  /* Width of the float will change based on container size. */
  --switcher-width: calc((var(--breakpoint) - 100%) * 9999);

  float: left;
  width: var(--switcher-width);
  min-width: var(--min-size);
  max-width: 100%;
  margin-right: var(--gap);
  margin-bottom: var(--gap);
}

@supports (width: max(1rem, min(calc(2rem + 3rem), 4rem))) {
  .float {
    /* Set the minimum size to the advanced version, since it's supported. */
    --min-size: var(--min-size-advanced);

    width: max(min(var(--min-size), 100%), min(var(--switcher-width), 100%));

    /* Remove these constraints, since the max() and min() expression above handles them already. */
    min-width: 0;
    max-width: none;
  }
}

</codepen-embed>

And there you have it! Floats that respond to the container size. Another old-school CSS layout that we can transform into a modern, intrinsically responsive version.

Intrinsically Responsive CSS Grid with minmax() and min()

Thu, 11 Jul 2019 07:00:00 GMT

CSS Grid is now widely supported across modern browsers, and there are lots of folks doing great work with it! But unfortunately, one of the most useful features of the specification doesn’t quite work as advertised. Specifically, it’s not possible to create an “intrinsically responsive grid” — that is, a grid that is responsive based on the size of its container, without the use of media queries. But thanks to some standards that are now available in some browsers and on their way to others, we can fix that!

Before I explain the solution, let’s review the problem. With CSS Grid, we can create a grid of items arranged in equally sized columns and tell those column sizes to adjust based on the amount of available space:

<codepen-embed username="vamptvo" pen="dBawwg" name="Responsive Grid with Minimum Container Size">

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  list-style: none;
  padding: 0;
}

ul > * {
  background: black;
  height: 10rem;
}

</codepen-embed>

This technique uses a number of features in the Grid specification:

repeat() tells Grid to create multiple tracks with the same size parameters (not necessarily the same size, though in this case they all end up being the same).
auto-fill tells it to create as many tracks as necessary to fill the space.
minmax(10rem, 1fr) tells it to determine each track’s size by finding a value between a minium of 10rem and a maximum of 1fr. The fr unit is what makes sure that the tracks are allowed to grow to fill any remaining space.

Thanks to all this, the container adds new columns as it grows. A key feature of this solution is that the columns change based on the container size, not the viewport size. That means we can apply this to a reusable component and be confident that it will always look right, without the need for media queries overriding the default behavior on specific pages. So what’s the problem?

Responsive... Sorta

Since each grid track has a minimum size of 10rem, they can’t shrink below that size. That means when the container is smaller than 10rem, the grid items overflow the container! To fix this, we’d have to wrap the grid-template-columns delcaration in a media query, like so:

<codepen-embed username="vamptvo" pen="qzvLar" name="Responsive Grid with Media Query">

ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr;

  list-style: none;
  padding: 0;
}

@media (min-width: 35.5em) {
  ul {
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  }
}

</codepen-embed>

But now that we’re in media query-land, our grid only switches when the viewport is small. We can’t put it inside a small container, or we run into the overflow problem all over again. This is why Heydon Pickering and Andy Bell’s Every Layout site generally avoids media queries and CSS Grid, instead achieving intrinsic responsiveness through Flexbox.

Thankfully, with some new additions to the CSS spec that have started landing in browsers, we can fix this issue, allowing CSS Grid to live up to its full potential as a tool for intrinsic web design.

The Intrinsically Responsive Grid

The previous example ran into problems because we were setting a fixed value as the minimum track size. When the container size shrunk, the items didn’t shrink with it, and thus: overflow. But what if we could set a minimum size that would shrink based on the container size, ensuring that our tracks were never too big for their container?

As luck would have it, we can do just that, with the help of the min() function:

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

min() accepts one or more values and returns the smallest value. The magic of the function is that, just like calc(), the arguments can use different units, which allows us to return values that change dynamically based on context. In this case, we’re returning the current width of the container, capped at a maximum value of 10rem.

min() is one of three new comparison functions introduced as part of the CSS Values and Units Module Level 4. There’s also max(), which naturally does the inverse of min(). Finally clamp() is a convenience function that applies both a minimum and a maximum to a single value.

In this example, there are two cases we have to worry about, and min() solves for both of them. When the container is smaller than 10rem, the minimum value in our minmax() expression is set to the full width of the container, giving us a nice single-column view with no overflow. When the container is larger than 10rem, the minimum value is set to 10rem, so we get a responsive grid with equal tracks of at least 10rem each.

In the Real World

I know what you’re thinking. “This sounds cool and all, but I can’t actually use it yet.” You’re only half right.

min() isn’t very well supported, but it is available in at least one browser: Safari quietly implemented both min() and max() a few versions back! Unfortunately there’s no clamp() yet, but you can simulate it using the other two. Plus, Tab Atkins recently announced that Chrome support is on its way. If you want to keep track of browser support, CanIUse has a page for all three functions.

With that good news out of the way, here’s a working version of the code above (open in Safari to see it in action):

<codepen-embed username="vamptvo" pen="VJggRL" name="Fully Responsive Grid (Safari-Only)">

ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

  list-style: none;
  padding: 0;
}

</codepen-embed>

One browser isn’t great, but it doesn’t mean you have to give up on this solution. For now, you can layer it onto your existing code as a progressive enhancement. Here’s my preferred solution:

<codepen-embed username="vamptvo" pen="bPzzZr" name="Fully Responsive Grid (with Fallback)">

ul {
  display: grid;
  grid-gap: 1rem;

  /* Partially responsive fallback */
  grid-template-columns: repeat(auto-fill, minmax(calc(10% + 7.5rem), 1fr));

  /* Fully responsive version */
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

  list-style: none;
  padding: 0;
}

</codepen-embed>

This one uses a calc() expression as a fallback. The key part is the calc(10% + 7.5rem), which combines a fixed minimum with a percentage width. By computing the minimum based on both of these, we lower the threshold for triggering overflow. Now it will trigger when the container is slightly larger than 7.5rem, whereas in our earlier solution it would trigger at 10rem. This solution is a bit finnicky though, so you’ll want to adjust both the percentage and fixed values to fit your grid’s design.

With this as our fallback, we can take advantage of CSS’s ability to override duplicate property declarations by re-declaring grid-template-columns. Browsers that support min(), namely Safari, will get the fully responsive solution, while Chrome, Firefox, Edge, and others will get the fallback. As more browsers add support for min(), they will automatically switch over to the new layout.

Wrapping Up

The min(), max(), and clamp() functions are really powerful tools, allowing us to toggle between values in real time based on changing conditions. Being able to test them out in a real browser opens up lots of opportunities for exploration, and I’m confident that this little fix for CSS Grid is just scratching the surface of the many ways that developers will use these features going forward.

Cutting the Ribbon on My Personal Blog

Tue, 09 Jul 2019 07:00:00 GMT

Hello and welcome to the very first blog post on my personal site!

Most of my writing covers Japanese animation, comics, video games, and related pop culture, and appears in pop culture outlets like Ani-Gamers, Otaku USA Magazine, and Anime News Network. On very rare occasions, however, I actually write about the other half of my job: web design and development.

My first post on the subject was published on Medium, but considering Medium‘s accessibility and usability problems, I’d like to host my future web dev writing somewhere I can guarantee will be a little more responsible. And for that, there’s nothing quite like a personal website.

So this blog will be my repository for any web dev writing that I produce during the course of my freelance work. I’ll still keep most — if not all — of my anime writing in other outlets, but who knows, I may occasionally drop in here with some pop culture thoughts that don’t fit in anywhere else.

Evan Minto

Responsive Floats Using the “Switcher Expression”

Caveat: min-width Must Be a Percentage

Caveat: Ignores Intrinsic Width of Floated Element

Caveat: CSS Shapes Can Cause Unexpected Floating

Use Cases

Intrinsically Responsive CSS Grid with minmax() and min()

Responsive... Sorta

The Intrinsically Responsive Grid

In the Real World

Wrapping Up

Cutting the Ribbon on My Personal Blog

Caveat: `min-width` Must Be a Percentage