Click here to watch Modernizr in Core. This is the start of something beautiful.

Drupal 8 sets the stage for years of “Front End Development Done Right” with the inclusion of Modernizr, feature detection library of choice among front end enthusiasts.

Break out your favored party hat and party favors. It’s at the confetti level of awesome.

Modernizr does not modernize elderly browsers. It allows you to specify what a browser should perform based on its supported (and unsupported) features.

What’s in a name? Modernizr offers YOU the power to Modernize alongside the latest available browser capabilities while conditionally choosing how you want the old fellers to deliver.

In Drupal 8 core, the build of Modernizr is tiny and basic. Let not its diminutive size dismiss your attention. This minimalist build allows themes and modules to add feature tests and act upon the results. Also, core Modernizr includes the ever-useful “touch” test so that your scripts and styles can adjust for touch screen devices where desired.

If you want the full power of Modernizr, you’ll want to install the module. The module offers various easy methods of accessing the vast library of feature tests that your site/app may require. Its basic presence in core is important because by nature of “being there” it will shape the future of front end development.

In this talk, I won’t talk about progressive enhancement vs. graceful degradation because you know which is superior. What I’ll do is cover the workings of Modernizr, the common questions surrounding it, present kickass usage examples, and do a deeper dig into the core library as well as the features of the module.

Covered++:

• Why use Modernizr?
• How does it work?
• Usage examples: Modernizr in action!
• How Modernizr made it into Drupal core
• What is included in Modernizr core and how to extend it
• Learn how to write your own feature tests
• Conditionally load CSS or JS depending on feature(s) detected (with module)
• A deeper dive into the included capabilities: addTest(), testStyles(), Touch events, Input Types, Add CSS Classes, and the Modernizr JS object
• Ultimately, why it’s going to make your life better and why you probably want to use it

This talk is aimed at front end developers looking for greater control over the ever-growing environments that web sites are living in. If you are familiar with Modernizr but haven’t explored its features in depth, you will gain benefit from this talk. Haven’t used Modernizr yet? Get your buns in here. Emerge toasty.