All notes
Modernizr

Intro

Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.

Use with JS


if (Modernizr.awesomeNewFeature) {
  showOffAwesomeNewFeature();
} else {
  getTheOldLameExperience();
}

Use with CSS

By default, Modernizr sets classes for all of your tests on the root element ("html" for websites). This means adding the class for each feature when it is supported, and adding it with a no- prefix when it is not (e.g. .feature or .no-feature). For example, depending on the browser, it will result in either <html class="cssgradients"> or <html class="no-cssgradients">.

Then in css files:


.no-cssgradients .header {
  background: url("images/glossybutton.png");
}

.cssgradients .header {
  background-image: linear-gradient(cornflowerblue, rebeccapurple);
}


// To accomplish this while still supporting older, non-flexbox browsers, you might use display:inline-block as your starter CSS, then layer flexbox (It's bound to html, so is "html.flexbox") on top using the Modernizr .flexbox class.

.list {
  text-align: center;
}
.list-item {
  display: inline-block;
}
.flexbox .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}