Popular HTML5/CSS3 feature-detection JavaScript library Modernizr has just hit version 2.6. The library works by detecting features, building a JavaScript object with the results, and adding classes to HTML elements for you to key your CSS on. In an era of rapidly updated browsers, Modernizr is considered by many cutting-edge designers an essential toolkit item, in order to ensure better web experiences with fuller compatibility.
Lead developer Paul Irish (PI) spoke to .net about the latest version of Modernizr, along with how the project has caught the eye of the web’s major players, who are increasingly becoming involved themselves.
.net: What drove this update? What are the standout new features?
PI: Modernizr as a project launched with 40 or so detects of core HTML5/CSS3-type stuff. But we quickly recognised it makes a lot of sense to be the focal point of detection of everything, and so in this release we added in a lot of new detects, in a collaboration between the core dev team and the community around it. 2.6 adds more detects that work more reliably across browsers, including mobile ones—things like CSS filters, CSS regions, scope styles… fresh, new, CSS stuff. If you’re developing against very new features, we have reliable detects in place.
We also made changes to existing detects, such as geolocation. You were able to use ‘!!navigator.geolocation’, but it turns out that leaks memory in IE and prevents page caching in WebKit. Those issues have been reported upstream and been fixed, but we still have old browsers to deal with, and so how we look for geolocation has had to change slightly.
.net: Do you think Modernizr is becoming more essential, now browsers are rapidly adding new features?
PI: The problem essentially is that specs don’t lie out in a way to detect the features, and while all the browsers agree that feature detection is the best way, they don’t agree how to detect. It’s not something that’s tested, so it’s pretty easy for them to slip up. And feature detection can be bad if everyone writes their own detects, so Modernizr is a good focal point for the community to identify the best way for all of these things.
.net: The new release notes show support from Adobe, so are major players now heavily involved?
PI: I worked with two Adobe engineers for detecting regions reliably. We just had one of Firefox’s lead developers contribute some code to Modernizr this week. Recently, on the WebKit tracker there was something about a feature called supports, which is like feature-detection but also a media query in CSS. It’s not been implemented yet, but WebKit engineers confirmed the way Modernizr does its detects for CSS is reliable, and that technique will be a convention that will just have to continue to work.
So, we have a good amount of conversations with engineers, who are good at making this work for everyone. And it’s in their interest to enable developers to cope with edge cases and older browsers.
.net: Where do you see Modernizr and also cutting-edge standards going in the future? How can the community help?
PI: There’s still a lot more to add, especially in CSS: CSS variables, CSS hierarchy, and a lot of authoring-side features are gonna be the next revolution. And being able to detect and fork what we serve out is gonna be a little tricky, but we’ll find a nice way to do it.
The browser vendors are all very committed to going at it at a quicker pace, to make the web platform competitive, but also shooting for compatibility across all browsers. While the features and implementations come fast, so too do the efforts to standardise them and get consistent implementations. If anything helps this, at getting compatibility for edge-case features, it’s better test suites for the W3C.
The Test the Web Forward hackathon that Adobe organised in San Francisco had folks from all the browser vendors and loads of developers writing tests that go into the W3C test suites. When the tests are there and there’s a failure because there’s not compatibility in how a feature’s used, the browsers fix that. So if there’s anything the web dev community can do, it’s to have involvement with that.
