background preloader

Modernizr

Facebook Twitter

Polyfills

How to use Modernizr. Photo by Stéfan There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr.

How to use Modernizr

In this short tutorial, learn how to apply this handy script to maximum effect on your sites. An overview Although CSS3’s use has been increasing among web designers, browser support for some of its features is still inexistent. Lately, I’ve been using Modernizr more and more to cater for those browsers that don’t support specific CSS3 properties—for example, on my site—, and it makes the development much easier because I know I’m providing these lesser browsers with an alternative experience, rather than just ignoring them. Bear in mind (and this is even splashed on Modernizr’s front page), that Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. How it works To install Modernizr, download the file from this page.

The second step is to include on your html tag a class of “no-js”: Why add this tag? Using Modernizr – Simple Guide and Examples. Modernizr is a Javascript library that detects the presence of browser functionality.

Using Modernizr – Simple Guide and Examples

This makes life a lot easier when using more modern features on your website by encapsulating all the feature tests into a library you don't have to worry about. You can use Modernizr either in your own Javascript or you can use the CSS classes it sets on the HTML element. To get a full list of the browser functionality that is tested check out the Modernizr docs. If the feature you need a test for isn't available it is fairly easy to add new tests as well. I'll start with an example that shows how to use the feature tests in Javascript. See this code in action: Modernizr Javascript example. You can try this example with an older version of Firefox and the text should indicate that there is no support for web sockets. The next example shows how to use the Modernizr CSS support. Build an Awesome Image Gallery with jQuery, Modernizr, and CSS3. Even though we’re definitely living in the Flickr Age (apparently that’s the one that comes right after the Age of Aquarius), there’s still something so lovely about being able to spread a big boxful of photos over my kitchen table.

Build an Awesome Image Gallery with jQuery, Modernizr, and CSS3

In fact, my favorite screensaver does a pretty good job of emulating this — it’s the one built into MacOS X that grabs photos from your iPhoto library, and scatters them gradually all over the screen in a nice, messy pile. It looks kind of like this: The photos slowly fade in and drop onto the screen, rotating randomly as they go. It’s a nifty effect, and rather soothing to watch. On the right site, it could even make for a fun alternative to a regular image gallery. Could we achieve this with CSS3 alone? For folks without JS, the images will be shown in a clean, plain photo gallery. Build a Simple Gallery Let’s start with the bare bones version. Enter the Modernizr Let’s include this, and jQuery, in our page.

Adjusting the CSS Preparing the Images. Développement CSS3 compatible multi-navigateurs avec Modernizr et eCSStender. Que des soucis c’est nouvelles règles CSS3.

Développement CSS3 compatible multi-navigateurs avec Modernizr et eCSStender

On s’extasie devant la possibilité d’intégrer quelques coins arrondis sur Firefox, Webkit et Opéra et dès qu’on exploite un peu le filon, on se rend compte que les techniques d’exploitation se multiplient. Amélioration progressive : Modernizr et sélecteurs CSS avancés. A l'inverse du concept de dégradation gracieuse, le principe d’amélioration progressive ("progressive enhancement" en anglais) est une stratégie de conception web en couches successives, qui permet à chacun d’accéder au contenu et aux fonctionnalités de base d’une page web en utilisant n’importe quel navigateur, tout en offrant une version améliorée aux utilisateurs disposant de navigateurs plus récents ou plus évolués.

Amélioration progressive : Modernizr et sélecteurs CSS avancés

En pratique et dans le domaine des styles CSS, cela se traduit par une mise en forme initiale commune à l'ensemble des logiciels de navigation, puis un "bonus" pour agrémenter ceux qui ne supportent pas encore CSS3 ou mal CSS2.1. Cela permet d’opter occasionnellement pour une technologie récente telle que CSS3 pour certaines décorations d’éléments de page (coins arrondis, ombrages, semi-transparence, transitions progressives…) qui pourraient consister en des « bonus » mérités pour les navigateurs récents. Taking Advantage of HTML5 and CSS3 with Modernizr. Ten years ago, only the most cutting-edge web designers used CSS for layouts and styling.

Taking Advantage of HTML5 and CSS3 with Modernizr

Browser support for CSS layouts was slim and buggy, so these people advocated for web standards adherence, while creating hacks that made CSS layouts work in all browsers. One hack that became widely used was browser sniffing: Detecting which browser and version the user had by looking at the navigator.userAgent property in JavaScript. Browser sniffing allowed for quick and easy code forking, allowing developers to target different browsers with different instructions.

Article Continues Below Today, CSS-based layouts are commonplace and every browser has pretty solid support for them. Modernizr: the feature-detection library for HTML5 and CSS3#section1.