On Github rupl / meet-modernizr
Chris Ruppel @rupl
frontend developer
Strive to deliver the best experience everywhere
NOT the same experience. The best experience.
Further reading:Progressive Enhancement 2.0 Tiered Adaptive Frontend Experiences (TAFEE) Modernizr 3 workflow
Customize the experience to the unique capabilities of each browser.Prioritize reliable, fast UX over consistency.
Old browsers are black/white TVs, new browsers are HD
user-agent sniffing is error-prone; unable to scale as more devices are created
Detect individual features on each browser using Javascript
Code: http://www.modernizr.com
Can I use stays current on browser support
HTML5 Please has polyfills and some loose recommendations.
If you need geolocation, test for it.
If you need CSS transitions, test for them.
If you need HTML5 audio or video, test for them.
If you need inline SVG, test for it.
If you need web sockets, test for it.
If you need data URIs, test for them.
If you need something cool and the UI breaks without it, test for it.
Load things based on tests
Making these decisions in the browser is the core mechanism for tiered experiences.
Modernizr.load({ test: Modernizr.geolocation, nope: '/sites/all/libraries/geolocation/geo.js', callback: function(){ geo.init(); } });
Modernizr can be used the other way around too. Use it to load stuff only when needed.
Modernizr.load({ test: Modernizr.mq('(min-width: 42em)'), yep: '/sites/all/themes/example/xl.css' });
How does it help me build tiered experiences?
Test API: allows modules/themes to declare tests
Load API: allows modules/themes to use Modernizr.load()
Modules use a hook:
function MYMODULE_modernizr_info() { $tests[] = 'geolocation'; return $tests; }
Themes use the .info file:
modernizr[tests][] = geolocation
Modules use another hook:
function MYMODULE_modernizr_load() { $load[] = array( 'test' => 'Modernizr.geolocation', 'nope' => array('/' . drupal_get_path('module','geolocation') . '/js/geo.js'), 'callback' => 'function(){ geo.init(); }', ); return $load; }
...which turns into:
Modernizr.load({ test: Modernizr.geolocation, nope: '/sites/all/modules/geolocation/js/geo.js', callback: function(){ geo.init(); } });
mytheme.info file:
modernizr[Modernizr.cssfilters][yep][] = css/super-fancy.css
...turns into:
Modernizr.load({ test: Modernizr.cssfilters, yep: '/sites/all/themes/mytheme/css/super-fancy.css' });
mytheme_modernizr_load_alter() works the same as module hooks too.
Why limit a site based on a stale browser version?
Instead, we should be askingwhat features are needed to make this site?
Take the high-level requirements (both yours and the client's) and plug it into caniuse, and get a rough compatibility percentage
Tell your client: "Yes, IE8 will support 83% of the features."
A tool has been built that lets you visualize caniuse data and see how many browsers fully support it
iwanttouse.com (and don't forget onmobile.iwanttouse.com)
This type of project estimation is on the roadmap.
Tests now include dependencies and links to caniuse.
Systems like Drupal are poised to take advantage of this data in an automated fashion.
/*! { "name": "CSS Animations", "property": "cssanimations", "caniuse": "css-animation", "polyfills": ["transformie", "csssandpaper"], "tags": ["css"], "warnings": ["Android < 4 will pass this test, but can only animate a single property at a time"], "notes": [{ "name" : "Article: 'Dispelling the Android CSS animation myths'", "href": "http://goo.gl/CHVJm" }] } !*/ define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) { Modernizr.addTest('cssanimations', testAllProps('animationName')); });
Nudging clients toward this outlook helps everyone.
Especially you!
Contact me:
chris ❀ fourkitchens.com
Visit the session pageto leave feedback.It means a lot to me ❤ Thanks! Short link: http://j.mp/meet-modernizr Select "Evaluate This Session"