All thoughts and opinions in my blog are my own and do not represent the position of my employer.

Using Modernizr with Flexbox

Last week, Modernizr was updated to version 3, and with that upgrade gained some useful new tests for flexbox support. You now get four separate flexbox tests, producing eight different classes on your <html> tag that you can use to target browsers with different levels of flexbox support.

Test Supporting class Non-supporting class Useful for
Flexbox flexbox no-flexbox Targeting browsers that support the current syntax
Flexbox (legacy) flexboxlegacy no-flexboxlegacy Targeting/excluding browsers that support the old 2009 syntax, such as Safari 6 or Android 4.3
Flexbox (tweener) flexboxtweener no-flexboxtweener Targeting/excluding IE 10
Flex line wrapping flexwrap no-flexwrap Targeting browsers that support flex-wrap, or excluding browsers that support flexbox but don’t support flex-wrap
The four flexbox tests you can include in your Modernizr 3 build.

The four flexbox tests you can include in your Modernizr 3 build.

The most notable change is that you can now test whether the browser supports the flex-wrap property specifically. This is useful because some browsers supported the up-to-date flexbox spec without any browser prefix, but didn’t support the flex-wrap property within that spec. This was problematic because it meant that you couldn’t exclude these browsers by simply not including their browser-prefixed properties. They would get the same flexbox code you provided to full-featured browsers, but if you used flex-wrap in that code, the layout had the potential to break horribly.

The Modernizr site states that it’s Firefox that suffers from this limitation, but this is inaccurate. It’s only old versions of Firefox, specifically 22 through 27. Firefox is currently (as of September 2015) at version 40, so it’s unlikely that you still have a significant number of users on your site using version 27. However, the flex-wrap test is still useful as a safeguard for the small number of users that might be affected by a catastrophic layout failure that might occur if you write a layout that depends on the flex-wrap property.

For instance, let’s say you want to use flexbox to lay out some sort of list so that you can use justify-content to equally distribute the items across the full width of their container. But you also want to use flex-wrap to allow them to wrap onto multiple lines on narrow screens.

Full-width and equally spaced in the wide view.

Full-width and equally spaced in the wide view.

Items wrap to 2 rows or more in the narrow view.

Items wrap to 2 rows or more in the narrow view.

To accomplish this while still supporting older, non-flexbox browsers, you might use display:inline-block as your starter CSS, then layer flexbox on top using the Modernizr .flexbox class.

.list {
    text-align: center;
.list-item {
    display: inline-block;
.flexbox .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

The problem here is that Firefox 22-27 will use the last rule, since it does support the current version of flexbox, but it won’t understand the flex-wrap part of the rule. This means it will always keep all of the links on the same line, and they’ll overflow out of their container on narrow screens.

In Firefox 22-27, the items won't wrap but instead will overflow from their container.

In Firefox 22-27, the items won’t wrap but instead will overflow from their container.

Even though this might affect only a tiny number of users, it’s a major display problem that’s now entirely preventable thanks to Modernizr. A better approach would be to let old Firefox use the starter styles using display:inline-block, by hiding the last rule from these non-flex-wrap browsers. We can do this by appending the .flexwrap class onto the selector, ensuring that only browsers that support the current flexbox spec and the flex-wrap property will use the rule.

.flexbox.flexwrap .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
Using inline-block instead of flexbox, old Firefox will get the items wrapped, but simply not stretched across the full width as flexbox can provide.

Using inline-block instead of flexbox, old Firefox will get the items wrapped, but simply not stretched across the full width as flexbox can provide.

Nearly all browsers support the current flexbox spec, but writing your CSS in a way like this using the new Modernizr classes provides a much safer experience for that small percentage of users with non-flexbox browsers.

Don’t get me wrong—there are still plenty of cases where non-flexbox CSS and flexbox CSS can co-exist without causing any problems. Most of the time, flexbox CSS just overrides other layout CSS by browsers that understand it, and you don’t need to hide any styles using Modernizr. But in those cases where the CSS does come into conflict, Modernizr is now better than ever at helping you isolate flexbox styles in an intelligent way.

If you do use Modernizr to append flexbox classes, I recommend you install the Too Flexy bookmarklet in your browser to easily test your code. It toggles the flexbox class on your page to no-flexbox so you can get a peek at how the page looks in both cases without having to fire up your old browsers every single time.

We need more moms in web design and development

Last year in one of my conference talks, I mentioned that I have kids. After my talk, a woman came up to me and asked me how I do it. How I have a full-time job and do conferences and write and be a mom. She was interested in this because she was planning to start a family soon and wanted to know how other working moms in our industry manage it.

This got me thinking about moms in web design and development. And I realized that out of the 40-ish conferences I have spoken at over the last 8 years, there has been only one other speaker at a conference with me who was a mom. Maybe two. In both cases, their kids were grown or nearly grown, not babies or little kids that can’t fend for themselves for a couple days while mom is away.

It’s not that I haven’t spoken with lots of great women. I’ve been fortunate that most of the conferences I’ve spoken at have had women well represented in the speaker line-up. But all of these women, bar one or two, are not mothers. I’m sure there are other mom speakers out there like me, but the point is that they’re very rare.

Dad speakers are not rare. There are tons of dad speakers at web design and development conferences. I’d say at least half of the men I speak with are fathers of young children. Lots have babies at home.

Every family is different, of course, but speaking of the larger culture, it’s usually easier for dads in our society to leave the kids for several days to go speak at a conference than it is for mom to leave. It’s also usually easier for dads to just attend the conference. I’m willing to bet that there’s a far higher percentage of dads out of the male attendees than there is of moms out of the female attendees.

Now, I have nothing against all of the lovely kid-free women at conferences that I have had the pleasure to meet. But I think making conferences more mom-friendly—and more diverse in general, in every sense of the word—benefits all women. If we want more women in web design, we have to make it easier for them to stay in web design after they have kids. Much of this comes down to employment practices, of course, but I think we can do our little part by making conferences more accommodating to the needs of moms, and by having mom speakers so that other women can see that it is possible to have kids and still be successful in your field.

So here’s what I’ve decided to do. First, I’m going to mention that I’m a mom in every single conference presentation I do from now on. I don’t usually mention my kids, because I figure most of the attendees don’t care, but I’ve decided that’s OK. They don’t have to care. If it helps that one woman in the audience who was thinking about starting a family and wondering if she could stay in web design afterwards to feel a little more confident that she can do it too, then I’d say the 10 seconds devoted to mentioning my kids in my conference presentation are worth it.

It may also help dispel the stereotype of moms as not being tech-savvy. We’re sometimes told in conferences and blog posts to keep our products so simple that our moms could use them. Moms are a lazy stand-in for non-tech-savvy, novice users. We need to stop framing moms this way. It’s just plain wrong (moms today generally are very tech-savvy) and it hurts the perception of women in our industry.

Me mentioning my kids in a recent conference talk.

Me mentioning my kids in a recent conference talk.

The next thing that I’d like to do is help organize a parent-friendly conference. Not a conference just for parents, of course, but a conference that includes things that will make it easier for parents to attend. I’m thinking of small things like having a room dedicated for breast pumping and breastfeeding. I’m thinking of big things like having childcare available for the little kids and coding classes available for the big kids so they can learn more about what Mom or Dad does all day at work and have their own fun little mini conference to benefit from.

I know that things like this have been done before. I spoke at a conference when my son was a newborn (I flew in and out the same day), and I asked the organizers to provide me a private space to pump during the event. They were happy to do so, and I’m sure would have been happy to let other women pump there too, but this wasn’t an advertised facility of the event and thus no other women took part. I wonder if another mom or two might have bought a ticket and attended the event had she known she wouldn’t have to worry about finding a place to pump during the day? I’ve pumped while sitting on a bathroom floor in an airport. No woman wants to resort to crap like this. Give us a comfy, clean place to pump and tell us about it upfront, and you might just find a couple extra moms at your conference.

I’ve heard of a couple events that have planned for kids to attend with their parents. Last year at OSCON, they held an entire day of workshops for school-aged children to learn about computer programming. It cost just $20 and sold out. Also last year, OpenITP ran a hackathon and provided child care. You can read about how they went about setting it up and some other tech events that also have incorporated child care in the past.

My parent-friendly conference is just an idea right now. I have no idea how to organize a conference. I have no idea if this is even realistic and doable. So what I’d like to do is get your help. Tell me if this will never work, tell me it’s awesome and you want to help, tell me your great idea for what we can do to get more moms in web design and development. And then we’ll go from there.

Enhancing Responsiveness with Flexbox presentation at RWD Summit

My latest talk is called “Enhancing Responsiveness With Flexbox.” I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience. I’ve just given this talk at CSS DaySmashing Conference, and the RWD Summit.

You can view my presentation on Slideshare or download the slides directly here:

Enhancing Responsiveness with Flexbox (PDF, 2.6 mb)

The demos

To demonstrate the flexbox features, I’m still using my S’mores Builder page. Check it out (in a browser with good flexbox support, of course) to see what flexbox can do.

I also created a few additional, standalone demos, of which I have these two ready to share:

I hope to have time to prepare and post the other demos here soon.

Related resources

Here are several links to related resources, a few of which are in the slides plus many more that were not but which I recommend and think you’ll find useful.

General info

Articles and tutorials


View more posts:

Archives by Category

  • Announcements (32)

    Learn what's happening in my career or industry, including information about my speaking engagements and books.

  • Articles (40)

    Informational or theoretical articles about a variety of web design topics, including CSS, HTML, accessibility, usability, and visual design.

  • Inspiration (8)

    Collections of images or links to others' design work that I find inspiring and think you will too.

  • Tutorials (5)

    Step-by-step articles that you can follow along with to learn a particular web design technique, including CSS layout and CSS3 effects.

Archives by Month