Flex values in IE11

Today I Learned:

IE11 doesn't handle flex values in the same way that newer browsers do. Normally the value flex: 1 is a shorthand for flex-grow: 1. But in IE11, that affects the flex-basis, and it was throwing my sizing off.

I thought using the flex shorthand would be safe, and I normally consider shorthand an anti-pattern, since it makes refactors or overrides harder. But you never know what you'll find in Internet Explorer!

Fancy list numbering with CSS

It's not every day that I'm styling a list like:

Screen Shot 2017-11-09 at 11.57.25 AM.png

But today was. So I came across a wonderful piece on CSS Tricks that pointed me in the right direction.

On the list container (an <ol>), I added the CSS rule:

// let's pretend my <ol> has a class 'ol'
.ol {
  counter-reset: my-list-counter;

Which acts as a counter set/reset.

And on each item (<li>), I needed to increment the counter and set the content from the current counter result. I chose to format it as decimal-leading-zero (the second argument to counter; any valid list-style-style will do). All together it looks like:

.li:before {
  content: counter(my-list-counter, decimal-leading-zero);
  counter-increment: my-list-counter;

CSS grid auto placement in IE11

I found out the hard way that IE11's implementation of CSS Grid (the old spec) doesn't support auto placement. It was the one feature my project needed to maintain the same layouts in IE11 as the evergreen browsers.

So I came up with a "polyfill" script that finds grid containers, and on each of its rows, it derives their column spans and positioning, and sets their IE-specific css properties.

There are a few places to tweak if you want to drop this in your project – the logic for figuring out column spans checks for css classes, with each span having their own class, which is specific to my use case. And your project might not also care about manually adding gutters. My hope is that this will at least get you going in the right direction.

Code here.