and then setting the src attribute
height : 280,
module.exports = CatViewing;
over in HTML.
marginBottom : 5
var createThumbRow = (uri, i) =>
19
.
Get our list of cats
The �irst thing we want to do is get a reference for our list
key={i} uri={uri} />;
}
var Picture = React.createClass({
});
H T ML ML5 & CSS3 Genius Guide 45
Tips & Techniques
What’s new with
Modernizr? AFTER YEARS WITHOUT A MAJOR RELEASE, MODERNIZR 3 WAS PUBLISHED IN SEPTEMBER 2015, JAM�PACKED WITH NEW FEATURES AND IMPROVEMENTS
Why you need Modernizr THE SECOND MOST USED JAVASCRIPT JAVASCRIPT LIBRARY ON THE WEB, AND WITH GOOD REASON, REASON , MODERNIZR HELPS YOU CREATE GREAT WEBSITES FOR BROWSERS OLD AND NEW If you have worked on a website in th e last
every browser to make sure it hasn’t added or
actually applies it, or that Chrome throws an exception
�ive years, you have undoubtedly run into
removed something you inferred was there just
for WebSQL only inside of Incognito Mode. You just
Modernizr. Browsers add new features to the
because of its name, company, or version. Yuck. A
get to write a simple if/else, and focus on the code you
web all the time, but unless you are just making demos
much simpler method is to use Modernizr. It checks
actually want to be writing. On top of that, Modernizr is
you probably aren’t that comfortable using them for
for the actual HTML, CSS, or JavaScript feature you
100 per cent open source. You can view the code for
quite a while. It can feel di�icult to know when – if ever
care about, and gives you a simple true or false result.
every feature detection on GitHub, complete with
– you are actually able to deploy them into production
The code you wrote to use the new and shiny will start
comments and explanation for why each part was
and count on them to work. Modernizr takes the stress
working as soon as the feature is added to your user’s
added. Modernizr 3 builds on top of all of this, with
out of that decision by giving you an incredibly simple
browsers, with no changes needed on your part.
dozens of new feature detections, reduced �ile size,
API to hundreds of different battle-tested feature
So feature detections are the way to go, but why
custom builds, and much, much more.
detects. Can’t you just send a different site to basic
should you use Modernizr instead of just rolling your
browsers? In a few cases that makes perfect sense, but
own? Quite a few of the things Modernizr checks for
Modernizr 3, the website has been given a revamp.
it adds a ton of work and headaches. If you assume
seems very simple to test for yourself, but due to the
This makes it easier to �ind the detects users need to
that the client isn’t capable enough to render your
fact that humans create our web browsers, there is an
add to their builds.
latest and greatest simply because it happened to be
endless amount of quirks and oddities between them.
The new site also allows for real-time search for
made by Microsoft or Mozilla, prepare for a world of
Modernizr acts to clear house of these idiosyncrasies,
detects on the download page and each detect now
hurt. Those as sumptions will inevitably come back to
collecting and sharing the issues so that you get tons
has a special comment with useful information
bite you once the browser has been updated. You
o
including poly�ills and links. Total browser support just
need to actively check each and every new version of
Internet Explorer 11 parses preserve-3d but never
got a whole lot easier.
46 H T ML ML5 & CSS3 Genius Guide
f bug �ixes for free! You don’t have to �ind out that
As well as the large selection of new features in
H T ML5 & CSS3
Genius Guide
What’’s new? What THE LATEST VERSION VERSION IS BIGGER AND BETTER. B ETTER. HERE’S WHY
Lean and mean feature detection machine From its inception Modernizr has had a core monolithic
detect, allowing for 100 per cent custom builds tailored
suite of feature detects. It turns out this is a terrible idea!
to your speci�ic website. That means an even smaller �ile
Most websites never use a majority of the detects that
to include and faster loading site for all of your users. The
were included. Even though it is a relatively small �ile, all
downside of this is that there is no longer that single
those extra bytes add up, slowing down the load time for
monolithic �ile to use when you are building your site, but
your site and making for some sad users. Modernizr 3
keep reading to see how the Modernizr team has made
has done away with this by modularising every single
it making your own custom build of version 3 a doddle.
Hundreds of new detects Between the last incarnation of version 2 and the new
com/download, com/download , some of the
make your website work o�line would be,
Changes to detects
make your touch interactions work properly across all browsers by checking Touch and Pointer Events, or
A few detects have been
highlights include the industry’s most
renamed since version 2. Make
robust Flash (and Flash blocking)
sure to read the changelog on
detect, functional tests for video and
modernizr.com to see if your
audio autoplay (that means proper
“Modernizr 3 takes away of the guesswork of browser support, and lets me concentrate on writing code for the problems I actually want to be solving.”
you can check to see what the best way to
feature detects, complete with While a full list is available at modernizr.
Lead Lead Mode Modernizr rnizr develo developer per
By adding a Service Worker and AppCache detect,
3.0, Modernizr comes with over 100 new documentation and poly�ill information!
Patrick Kettner
code will actually require
results – even on mobile!) and nearly a
any updates.
dozen detects for new image, audio, and video formats and codecs.
Choosing the right build for your site
maybe reduce your @font-face download size by checking out unicode-range. There are many more
CUSTOM BUILDS SPEED THINGS UP AND MAKE USERS HAPPIER
great features that have been added, so make sure to checkout the Modernizr download page to read the documentation
on all of them.
It is super simple to create a custom build of Modernizr. Once you have a feature to detect (and not before – adding dependencies to your site before they’re needed is a sure-�ire way to bog the site down) – head on over to modernizr.com/
A perfect fit f it for the modern build toolchain toolchain MODERNIZR 3 INTRODUCES A NUMBER OF NEW WAYS TO INTEGRATE QUICKLY AND EASILY INTO YOUR EXISTING TOOLCHAIN
download . From there you can search for and
select any feature you want. You do not need to know the exact Modernizr term for what you are looking for, as the search box will scour documentation, caniuse, and many other sources in order to make it simple to �ind everything. Tapping on the detect will pop up its documentation, documentation, including a short description of the feature, any poly�ills that are available, as well as links to in-depth resources like dedicated blog
Visiting the o�icial website has always been the default
up the more you use it, and keeps it working even if you
posts and speci�ications. Once you have selected
way to get your copy of Modernizr, and with version 3.0
are o�line! The constant build also gives you the ability to
everything you want, tap on the BUILD button to
it is stronger and better looking than ever.
check on just how much bloat (or lack thereof) your build
get a list of various ways to get the code. As we
has, with the compressed and uncompressed �ile size
will explain later on, Modernizr 3 �its well into your
make generating your custom Modernizr faster and
listed on the left-hand side of the page at all times.
modern build toolchain, so there are a number of
easier. Powering the Download page, a new Universal
Remember that every byte you add, every single one of
options available. The Build option gives you the
Builder creates the exact same code as any of the other
your users has to download. Be kind to your network and
raw Modernizr �ile. Command Line Con�ig will
tools you can use to create your Modernizr. That means
theirs – keep it as small as possible. The site even has a
produce a JSON �ile thats used to power the
better consistency and fewer chances for bugs to creep
fully responsive design, allowing you to generate your
Modernizr CLI tool. A Grunt Con�ig can be
in. The new site automatically creates a build for you
build or check the documentation on your mobile.
downloaded as well to automate your Grunt-
The new site includes a number of improvements to
every single time you change an option. That means that
But having to go to the site to recreate the build every
modernizr setup. Finally, if you want to test
by the time you are ready to build, it has already been
single time you want to make a small change can quickly
Modernizr results in the various browsers you
built for you. This process is kept snappy by using a
become tedious and boring. Its 2015 – robots should be
support, try it out on CodePen. You may not even
Service Worker to cache all of the modules as you select
doing boring junk like this. That is why version 3 has
need to test for that feature any more!
them. That means that your build time actually speeds
added new ways to integrate Modernizr into your build.
H T ML ML5 & CSS3 Genius Guide 47
Tips & Techniques Whether you Grunt your site or Gulp it, Modernizr can help
Jam with the console cowboys in cyberspace
npm install https://modernizr.com/
Once upon a time, when dinosaurs roamed the earth,
Almost all of the tools that Modernizr 3 introduces are
bower install https://modernizr.com/
websites were written in notepad, uploaded to your FTP
built upon the its npm package. It even powers the
download?promises-unicoderange --save
server and you were done. But the web has grown up
Modernizr website! The straightforward command line
quite a bit since the Jurassic period, and with it so has
interface can take a JSON con�iguration �ile as input, and
Thats it! Every time you run Bower or npm update, it will
the way that sites are built.
uses it to create your custom build.
check to ensure you have the latest and greatest version
Ben Alman’s GruntJS was the �irst really popular JavaScript build system, and Eric “Contra” Schoffstall’s
download?promises-unicoderange --save
modernizr --config config.json --dest
of Modernizr, complete with all bug �ixes and
custom_modernizr.min.js
performance improvements. The only caveat to using
Gulp quickly became extremely popular as well. There
the download service is that if you ever want to add or
are a number of ideological differences between the two,
You don’t have to generate the con�iguration by hand
but the Modernizr team thinks both are great and has
– grabbing the build URL that is included by default
created tools to easily integrate it into either of them.
in the header of all builds of Modernizr (like
Created by Modernizr team member Richard Herrera,
modernizr.com/download?emoji ) will
both Grunt-modernizr and gulp-modernizr will search
take you to a version with all of your
your code base for references to Modernizr’s feature
detects, already checked. From there
detects and automatically generate a customised build
you can tap on the BUILD button
with only the features you actually use. Rather than
and grab the generated Command
build by adding too many new
Code it forward
manually creating a new build every time you want to
Line Con�ig. Using the above URL,
features – always remember to
So you have created your build of
add something new, you just have to write your code as
you get the following JSON �ile:
keep an eye on the overall �ile
though it was there already and your build system will
{
take care of the rest! You get all of the great bene�its of
"minify": true,
developing with the gigantic full version of Modernizr
"feature-detects": [
with none of the performance concerns.
"test/emoji"
remove detects from your build, you will need to either update or remove the existing entry in your package/ bower.json. Since the new dependencies would mean you are using a different
Keep an eye on �ile size
URL, you would end up with duplicate versions of Modernizr in your project.
It’s all too easy to bloat your
Modernizr, but now you have discovered that, horror of horrors, it
size to make sure your website stays fast.
doesn’t detect something you need! How can you remedy that situation? The Modernizr team has thought of this too, and
Full documentation is available on npm and GitHub
]
created generator-modernizr-detect. Yet another
for both modules, but they are both very simple to add
}
nodejs package, generator-modernizr-detect is a plugin
to an existing project. Here is an example of a Grunt con�iguration you can add to your existing Grunt�ile:
for the popular Yeoman tool. It will ask you a few The tool works in Windows, Linux, and OS X, and can be
questions to generate all of the scaffolding you need to
...
integrated into any system that has the ability to call
create a new feature detect. Once you have created and
“modernizr”: {
command line programs.
added it to your site, go ahead and create a Pull Request
But maybe your builds don’t ever change. Or maybe
"parseFiles": true,
on GitHub to share your discoveries with the rest of the
"customTests": [],
you just don’t want to have you entire team install (or
Modernizr community. Most of the detects that are
"outputFile": "/my/awesome/project/
know how to use) the CLI tool. Can’t there just be a way
maintained were contributed by folks outside of the
modernizr-output.js",
to download the prebuilt �ile? With Modernizr 3, there is!
project, many with little to no open source experience. It is a great way to show off your research and knowledge
"tests": [ "emoji"
Npm and Bower, at your service
to a kind and caring community that helps power a huge
],
The days of downloading a script from a random place
chunk of the web.
"uglify": true
on the web have long since passed. We have proper
} ...
dependency management in the JavaScript world
Looking forward
thanks to the likes of Bower and npm.
Version 3 is far from the end. Since its release in
Since Grunt/gulp-modernizr searches for
One of the most frequent requests the Modernizr
references to the Modernizr detects, you
team has received is the ability to treat it like
almost never need to actually include
any other JavaScript dependency, and be
the “tests” portion. If you ever want
installable via one of these package
Modernizr.on
to force the inclusion of certain
If you really like the idea of the Grunt and gulp versions, but use
react to feature detects that take some extra time.
you can get the same results by creating a wrapper around the customizr npm package. Also created by Herrera, customizr is the abstracted
support for new module syntaxes. Between npm, ES7’s
possible (let alone practical) to
Check out the Modernizr.on API to
such as Broccoli, Brunch or Mimosa,
things that is quickly becoming the most requested is
modular nature, it was simply not
asynchronous feature detects.
one of the other build systems,
improvements, with many more to come. One of the
managers. But, due to its highly
Modernizr 3 adds the idea of
detects, you can always add them to that array.
September 2015, there have already been dozens of
publish every possible combination. It would require nearly a centillion individual packages! That didn’t stop the
Modernizr team – instead of registering and maintaining that number of modules, it has created a Bower and npm download service. As a result, what this means is that, rather than
crawl-and-build mechanism that powers the Grunt and
install a hosted package from Bower or npm like you
gulp packages. If you prefer getting closer to the metal,
normally would do (eg bower install modernizr), you
and want to eschew the built-in automation of Grunt and
can go ahead and install directly from the same
gulp, Modernizr now includes a command line tool to
custom URL that is included by default in the header
The new modernizr.com has a brand new look,
help get stuff done.
of every Modernizr build.
and a ton of new features
48 H T ML ML5 & CSS3 Genius Guide
H T ML5 & CSS3
Genius Guide
JavaScript modules, and tools like Browserify and
when you can use them. But today is not that day, and
Webpack, modularity has become a huge part of the
tomorrow likely won’t be either. Adding the latest version
JavaScript landscape. Modernizr’s internal modules will
of Modernizr to your project can save hours trying to
soon be updated to be compatible with these other
research and debug different ways to handle tiered
syntaxes. This means that someday soon you won’t even
browsing experiences. Version 3 has added a ton of new
MODERNIZR IS STILL THE SIMPLEST WAY TO STYLE YOUR SITE
have to build the bundled Modernizr �ile any longer. You
ways to easily integrate an updated version to your
Since the very beginning, Modernizr has been a
will be able to just import or require each individual
existing toolchain. Whether you grab it from the website
fantastic way to add functional if statements to your
detect as you need them, like you would any other
as you always have, generate it via Grunt or Gulp, or
CSS. Rather than worrying about selector hacks or
standard module.
download a prebuilt version through npm or Bower via
speci�icity bugs to make sure that browsers purvey
the download service, Modernizr wants to make it as
the styles you intended, Modernizr adds a class for
as they are created, and tools like Modernizr will no
easy as possible to stop worrying about cross-browser
every feature detect to the root element. This means
longer need to be used in order to �igure out what and
issues, and start making the next amazing website.
that you write clear and self-documenting CSS.
In a perfect world, all browsers will implement features
Working with CSS
.cssgradients .header { background-image: linear-
Working with JS
gradient(cornflowerblue, rebeccapurple); }
QUICKLY QUERY THE RESULTS OF ANY FEATURE DETECTS
.no-cssgradients .header { background: url("images/glossybutton.
Modernizr.atRule lets you check support for both
if (Modernizr.awesomeNewFeature) {
png");
showOffAwesomeNewFeature();
pre�ixed and unpre�ixed @rules (e.g. @font-face, @
} else {
keyframes, etc).
} Sometimes Modernizr can clash with CSS you have
getTheOldLameExperience();
if ( !(Modernizr.atRule(“keyframes”) ) {
created, or perhaps some included in a framework
}
// load JS powered animation lib
being used. That is why Modernizr has the
}
classPre�ix option. This can can be added or
Version 3 adds a few of new APIs that you can leverage on your code. Modernizr.on was added as a way to hook
Modernizr.pre�ixedCSS is similar to the older Modernizr.
con�igured in any of the tools mentioned in this
into all of the new asyncronous feature detects. Since the
pre�ixed, but will return the (possibly) pre�ixed version of
article, like so:
code you write may execute before the results of the
a value in kebab-case rather than pre�ixed’s camelCase
{
detect are known, you can register a callback to run once
Modernizr.prefixed(“backfaceVisibility”)
Modernizr has �inished.
webkitBackfaceVisibility
"feature-detects": ["css/gradients"]
Modernizr.on(“videoautoplay”,
Modernizr.prefixedCSS(“backfaceVisibility”)
}
function(supportsAutoplay) {
-webkit-backface-visibility
"classPrefix": "webdesignermag-",
Now, rather than this
if (supportsAutoplay) {
There are a few more, and some updates to older APIs as
//replace static image with video
well. Check out the complete changelog on modernizr.
you get this
}
com to see all of the changes.
One �inal change with the CSS in Modernizr 3 is the
});
no-js class. Previously, Modernizr would remove the
It’s also also a good idea idea to lint lint your your code code as a build bui task, and even even better better to do do it as a “ ld task, pre-com pr e-commit mit Git Git hook ”
no-js class from the root element if it existed, and then always add a js class. As of version 3, it will continue to remove the no-js class unless the enableJSClass option is false in your con�ig. It will also only add the JS class if a no-js class is found. This lets you decide on whether or not a client has ‘enough’ JavaScript to really say it supports it.
Five tools & resources Ryan Seddon’s guide to Modernizr 3
Building Resilient Web Apps – NPM blog
Modernizr GitHub source code
bit.ly/1LxUIzM
customizr
How to use Modernizr Responsibly
bit.ly/1IegIzt
bit.ly/1P6HFgh
bit.ly/1SikoG0
You can try customising your
bit.ly/1GYl7Gh
This short course in Modernizr 3
Patrick Kettner lays out the
The entire library is available
own Modernizr build and
Discover how a responsible
willl take you through the
fundamental tools for keeping
here on the GitHub repository,
exporting it without having to
approach to Modernizr can
fundamentals in JS and CSS.
Modernizr compatible.
free for you to dip into.
worry about optimisation.
improve user experience.
H T ML ML5 & CSS3 Genius Guide 49
Front-end
50 H T ML ML5 & CSS3 Genius Guide
52
Responsive design decoded Learn to build with the new Foundation 6
60
Is your content king? Make sure your design is content-led
66
Design aspect ratio-based layouts with HTML and CSS Build tile-based layouts to maximise your content
70
Make dynamic graphics with the p5.js library Create stunning visuals for interactive designs
74
Code 3D zoom e�fects with CSS Revamp the tired parallax scrolling feature
76
Form pop-up modal boxes with pure CSS Find new ways to present info on one page
80
Build o��line web apps with Service Workers Create o��line applications using Service Workers
84
Model a unique mobile 3D interface Integrate a bespoke browsing experience
88
Create an interactive mobile 3D interface Add interactivity to your orientation controls
92
Assemble full-screen navigation Create menu systems for websites and web apps
H T ML ML5 & CSS3 Genius Guide 51
Front-end
52 H T ML ML5 & CSS3 Genius Guide
DOWNLOAD TUTORIAL FILES
www.�ilesilo.co.uk/bks-887
H T ML5 & CSS3
Genius Guide
5 new F6 features
New look
CHECK SOME OF THE EXCITING NEW ADDITIONS TO FOUNDATION
THE CREW BEHIND FOUNDATION 6 TELL US HOW IT ALL GOT STARTED
Half the �ilesize
More �lexible Sass
The total �ilesize of every component and
In Foundation 6 customisation is what it is
class in Foundation 6 now weighs in at
all about. The Sass mixins have been
Use fewer divs for the grid
60KB CSS and 84KB JS , with plenty of room to make them even smaller when selectively removing any unused components.
made stronger to allow devs to build
Combine rows and columns in a single div for a maxwidth max width centered
version number. ZURB had tons of phone calls, conversations at meetups, and even sent staff on the
So, if a designer or developer
ZURB World Tour to hear how people were using the past versions.
wants to use a four-column four-column grid
code example:
inside a �ive-column grid inside a
All code snippets will come with
attributes and roles along with
column”>
