Thanks for a fantastic essay tut!

One thing I found with your RegEx was that the whitespace (`s`) wasn’t escaped. I was trying with this for ages in Safari and Chrome (latest versions) and the RegEx would just never find a match in the `className` string.

I found double escaping the `s` special character worked a treat though ;-) as per: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp

So the RegEx I’ve ended up with (just for completeness) is:

var regEx = new RegExp(‘(\s|^)’ + activeClassName + ‘(\s|$)’);

Was this just a publishing error or should have your solution worked?

Thanks again,

Jon

FYI – here is the bug report I filed on css columns not working on elements set to table-caption:

https://bugzilla.mozilla.org/show_bug.cgi?id=1109571

Further on this, here is a solution that works in Firefox:

http://jsbin.com/tociva/edit?html,css,output

The idea is, you have to nest the list in its own element, on which you apply the columns. That way, the bug that prevents columns on table captions is not present. So you get the same effect, but with one extra element.

This is probably the simplest explanation I’ve read regarding cutting the mustard. Thank you, Jeremy, for a very clear, easy-to-follow proof of concept.

I’m very curious as to how the popular single page application pattern can be progressively enhanced, particularly with a client-side MVC framework. <noscript> + a backend solution handles JS-disabled browsers, but that leaves a huge hole for anemic mobile browsers that have JavaScript enabled.

Very nice, Jeremy. I’m surprised this is the first time I’ve seen someone combine the jump-to-footer pattern with an off-canvas enhancement. Kudos, and I’m kicking myself for not thinking of it first. :)

Couple of trifles:

Correct me if I’m wrong, but the multi-column layout for the nav doesn’t seem to work in Firefox (tested on Win7 and Mac), even though you do have what seems to be the correct CSS. After poking around a bit, it seems that Firefox doesn’t want to apply columns to an element with <code>display: table-caption</code>. (I wonder if that’s a bug? Or are the other browsers doing it wrong? I’ll file a bug report with everyone and see what happens!) Because of this, it would be nice if it degraded to show the nav in the footer when it’s in its non-column state. But it doesn’t, so I think (ironically) it’s not quite degrading as best it could.

Also, for your JS, I would favor using classList over the old className method. Although the problem there is that classList is IE10+. So depending on the project, you could just assume IE9 is out of the picture (<3% usage worldwide as of this month) but otherwise it would probably be good to test for that too, just in case. After all, IE8 usage is actually higher than IE9, so you might as well. And of course, there is the option to polyfill both of those, but I’m not really a fan of adding more JavaScript for old clunky browsers. And granted, your solution works in IE9+ so I suppose it’s fine. I just hate that old method of adding and removing classes; if anyone can avoid it, they definitely should.

I love this approach, and it’s what I try to follow—albeit in a less sophisticated way.

It’s worth pointing out here that progressive enhancement is not just about people with older devices, or people who have JavaScript turned off, or even JS not being fault-tolerant. I use the most modern browsers, and even in them I find that JS often doesn’t load properly. I don’t know why, but even big sites like Facebook and the various Google services regularly fail to load properly in my slick, modern browsers; and because they are heavily reliant on JS, they basically don’t work at all.

So progressive enhancement is not just a chore we must endure because of weirdos with old devices, old browsers or with JS turned off. It’s important because JS can—and does—fail anywhere, anytime … and for some of us, often.

Great read! This is really a good and simple example to explain and show to a client about the benefits of developing with progressive enhancement.

+1 too for the table/caption method that brings the nav to the top. I resort to quick to position absolute in circumstances like this>

Thanks Jeremy – a couple of nice new ideas for navigation handling that I’d not considered before. I especially like the table/caption method for bringing the navigation to the top of the page!

Great Post. I read this article again and again.

One question, though:

var reg = new RegExp(‘(s|^)’ + toggleClass + ‘(s|$)’);

Shouldn’t this be with (s|^)…?