turner-modernizr-webp
Turner Skunkworks simple wrapper package for importing modernizr's webp support.
Introduction
All of the code for Modernizr is written by the Modernizr team and is licensed MIT. This is simply a wrapper package for that code that I made.
I figured maybe it could help someone out.
I took a custom export from Modernizr's site and chose not to minify it, so that the code is complete and will be bundled/minified along with the rest of the team's code.
Modernizr Version and Description
modernizr v3.6.0 Build https://modernizr.com/download?-webp-setclasses-dontmin
Copyright (c) Faruk Ates Paul Irish Alex Sexton Ryan Seddon Patrick Kettner Stu Cox Richard Herrera
MIT License
Modernizr tests which native CSS3 and HTML5 features are available in the
current UA and makes the results available to you in two ways: as properties on
a global Modernizr object, and as classes on the <html> element. This
information allows you to progressively enhance your pages with a granular level
of control over the experience.
Installation
Simple installation.
Go to root of project, install as follows:
npm i @turnerskunkworks/turner-modernizr-webp --save
Usage
The major benefit of using this is for WebP support within CSS. You can use tags in HTML5, but there isn't any real support for webp in CSS.
Recommended use is to import into the Main.ts file like this:
// add turner's webp modernizr wrapper
import '@turnerskunkworks/turner-modernizr-webp/webp';
When the script is run, it will append a variety of webp classes to the document in the DOM. You can see the Modernizr documentation for a full list.
You can then modify your styles.scss file as something along the lines of:
/* Modernizr webp special overrides for toolbar */
html.no-webp .toolbar-bg {
background: url('/assets/images/chuttersnap-NMrUtSA7094-unsplashc.jpg') no-repeat center;
background-size: cover;
}
html.webp .toolbar-bg {
background: url('/assets/images/chuttersnap-nmrutsa7094-unsplashc.webp') no-repeat center;
background-size: cover;
}
If the browser supports webp, only the webp file will be loaded. You can confirm this in Chrome Dev Tools.
Code Refactoring / Revisions
Revise/notify as necessary, merge with best practices. Reach out for PRs. This is a work in progress.
Cheers and here's to hoping it helps someone else.
Enjoy! - Kevin