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.

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.


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.


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