Graceful degradation leverages advanced technologies to design for sophisticated user experiences and functionality. Users of less capable browsers will still be able to access the website, but will enjoy a decreased level of functionality and browsing experience.

With progressive enhancement, developers establish a baseline by designing for a level of user experience most browsers can support. Their applications provide built-in detection of browsers’ capabilities, which they use to make available more advanced functionality and richer browsing experiences accordingly.

The most widely adopted tool in a progressive enhancement approach is the Modernizr JavaScript library.

Modernizr programmatically checks if a browser supports next generation web technologies and accordingly returns true or false. Armed with this knowledge, you can exploit the new features in supporting browsers, and still have a reliable means of catering to older or noncompatible browsers.

Detecting Browser Features with the @supports Rule

While with media queries you can detect display features like viewport width and height, @supportsallows you to check browser support for CSS property/value pairs.

To consider a basic example, let’s say your web page displays a piece of artwork that you’d like to enhance using CSS blending. It’s true, CSS blend modes degrade gracefully in non supporting browsers. However, instead of what the browser displays by default in such cases, you might want to delight users of non supporting browsers by displaying something equally special, if not equally spectacular. This is how you would perform the check for CSS blending in your stylesheet with @supports:

[code language="css"]
@supports (mix-blend-mode: overlay) {

.example {
mix-blend-mode: overlay;
}

}
[/code]

To apply different styles for browsers that don’t have mix-blend-mode support, you would use this syntax:

[code language="css"]
@supports not(mix-blend-mode: overlay) {

.example {
/* alternative styles here */
}

}
[/code]

A few things to note:

The condition you’re testing must be inside parentheses. In other words, @supports mix-blend-mode: overlay { ... } is not valid. However, if you add more parentheses than needed, the code will be fine. For instance, @supports ((mix-blend-mode: overlay)) is valid.

The condition must include both a property and a value. In the example above, you’re checking for the mix-blend-mode property and the overlay value for that property.

Adding a trailing !important on a declaration you’re testing for won’t affect the validity of your code.

Let’s flesh out the examples above with a small demo. Browsers with mix-blend-mode support will apply the styles inside the @supports() { ... } block; other browsers will apply the styles inside the @supports not() { ... } block.

]]>https://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/feed/7How to Use Modernizr Responsiblyhttps://www.sitepoint.com/how-to-use-modernizr-responsibly/
https://www.sitepoint.com/how-to-use-modernizr-responsibly/#commentsThu, 22 Oct 2015 20:00:13 +0000http://www.sitepoint.com/?p=117395If you like playing with new features which might not be available in all browsers, you have surely already tried Modernizr. This library allows to test whether the features you want are available or not. As Modernizr adds some CSS classes on the html element to indicate if a given feature is available, you might be tempted to directly include it in the head tag to know as soon as possible if the features you want are available or not.

This approach was what the developers of Modernizr themselves recommended at the beginning. The problem with it is that it’s not compatible with the responsible approach we all should have. That’s why Paul Irish, one of the developers of the project, shared his thoughts about how Modernizr should be included. These thoughts inspired this article. In it we will talk about why we should adopt a responsible approach when we want to use Modernizr. Then, we will see some ways to put this approach into practice when possible.

Why Caring about How Modernizr Is Included

The usefulness of a responsible approach can be resumed in one question: do you like waiting for several seconds to access a web page? Surely not, and your visitors hate that too. That’s why, if they wait for a long time for the page to be displayed, they won’t come back. And I’m pretty sure you don’t want that. We all love fancy features, but not if they slow down our website too much. The good news is that you can still keep your fancy features, even with a responsible approach. The difference is that you won’t load them the same way.

Let’s discuss a concrete example of a JavaScript file. In a lot of cases, we wait for the page to be loaded before executing the script. In these cases, including the script in the head element is useless because the script is loaded at a very early stage but it'll wait for the page to be loaded before running. The problem is that if your script is included in the head, the browser will load it before the page itself. This means that if your script is big in size, your visitors have to wait until the script is loaded before they can see the page.

Modernizr has been developed to determine if you can use some recent features, such as CSS transitions or transformations, in a web page. Excluding some special cases, you don't need these features in order to display something on the screen of the user. There are scripts that must be included in the head tag, but most of them don't. Modernizr is no exception. In most cases you don't need to include it in the head and you can include the library right before the end of the body.

Before moving forward, I want to clarify a point: if a web page using Modernizr takes a long time to load, including this library responsibly won't be enough to improve the performance. Embracing a responsible approach means that you have to think about it each time you want to include a JavaScript file or other potentially big resources. If you optimize the way one resource is included, you won't necessary see a big difference. However, if you optimize how you include all your resources, the difference can be huge.

]]>https://www.sitepoint.com/how-to-use-modernizr-responsibly/feed/10Device Detection for Apps with WURFL.jshttps://www.sitepoint.com/device-detection-apps-wurfl-js/
https://www.sitepoint.com/device-detection-apps-wurfl-js/#respondTue, 14 Apr 2015 17:00:32 +0000http://www.sitepoint.com/?p=103340Responsive web design is not a new topic to mobile developers, many of us are well versed in the process and best practice guidelines. One of these best practices is displaying page elements in different ways based on the browser or device capabilities of the user. To accomplish this designers have traditionally made use of User-Agent strings embedded in HTTP headers. These would generally only tell you if the device used was an iPhone, Android or Desktop computer, no other information.

There are many occasions when a developer needs to know more detail than this to create a fully responsive design. This is where WURFL.js (Wireless Universal Resource File) can help.

]]>https://www.sitepoint.com/supports-native-css-feature-detection/feed/17Become a Modernizr Master with Learnable and Ryan Seddonhttps://www.sitepoint.com/master-modernizr-at-learnable/
https://www.sitepoint.com/master-modernizr-at-learnable/#respondThu, 11 Oct 2012 05:41:43 +0000http://www.sitepoint.com/?p=494Interested in learning more about Modernizr? Check out what’s happening this month over at Learnable, the web’s premier online learning destination, and part of the SitePoint network. They’ll be hosting a “live” course, where instructor Ryan Seddon and Learnable’s in-house team of experts will be standing by to answer your questions in a Q&A session. […]

]]>https://www.sitepoint.com/master-modernizr-at-learnable/feed/0Master Modernizr with Learnable and Ryan Seddonhttps://www.sitepoint.com/master-modernizr-with-learnable-and-ryan-seddon/
https://www.sitepoint.com/master-modernizr-with-learnable-and-ryan-seddon/#commentsThu, 11 Oct 2012 05:48:24 +0000http://www.sitepoint.com/?p=59728Interested in learning more about Modernizr? Check out what’s happening this month over at Learnable, the web’s premier online learning destination, and part of the SitePoint network. They’ll be hosting a “live” course, where instructor Ryan Seddon and Learnable’s in-house team of experts will be standing by to answer your questions in a Q&A session. […]

]]>https://www.sitepoint.com/podcast-147-the-css-ninja-with-ryan-seddon/feed/1What’s New in Modernizr 2https://www.sitepoint.com/modernizr-2-whats-new/
https://www.sitepoint.com/modernizr-2-whats-new/#commentsThu, 09 Jun 2011 15:03:47 +0000http://www.sitepoint.com/?p=38887Craig examines the new features in Modernizr 2, the second edition of the web's most-popular browser feature detection library.

]]>https://www.sitepoint.com/modernizr-2-whats-new/feed/12Regressive Enhancement with Modernizr and Yepnopehttps://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/
https://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/#commentsTue, 08 Mar 2011 02:15:05 +0000http://www.sitepoint.com/?p=35233If you're excited by the new features in HTML5 and CSS3, it can often feel like you're stuck between a rock and a hard place: if you use the new features without concern for older browsers, some users will get a degraded experience. On the other hand, if you provide a JavaScript fallback, you're adding bulk to your websites, even for those users with up-to-date browsers. Fortunately, there's a third way that gives you the best of both worlds. Louis shows you how it's done.

]]>https://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/feed/7Build an Awesome Image Gallery with jQuery, Modernizr, and CSS3https://www.sitepoint.com/build-an-awesome-image-gallery-with-jquery-modernizr-and-css3/
https://www.sitepoint.com/build-an-awesome-image-gallery-with-jquery-modernizr-and-css3/#commentsTue, 01 Feb 2011 12:30:20 +0000http://www.sitepoint.com/?p=31410In this tutorial, Raena shows you how to make a gorgeous image gallery in the true spirit of progressive enhancement: CSS3 transforms for cutting-edge browsers, jQuery for the rest, and it even looks good without JavaScript!