Smart HTML5 and CSS3 with Modernizr

As I’ve mentioned in the previous article, with some help from Modernizr, CSS3 can be safely applied, at least to some extent. So let’s see it in action!

To break the ice, we’re going to start with the border-radius property, enhance an element for css3-enabled browsers and also ensure the element’s design and accessibility for non-css3 enabled browsers, thus, providing progressive enhancement.

I want to make sure I am not confusing anyone about CSS3’s implementation with Modernizr, so I’m going to show how it’s done without it as well.

For this example, we have a regular paragraph inside a box styled div:

HTML

CSS:

So let’s round up some corners!

Regular CSS3

Since we have a class “.intro” that styles the paragraph’s div, let’s build our rounded corners box model.

CSS:

First thing to notice, there are three new properties that basically, do the same thing.
If you recall, I’ve mentioned how CSS3 is progressively being implemented, thus, a web rendering engine prefix is used to target specific browsers.

In our case, we’re targeting the ‘moz’* and ‘webkit’** engine-based browsers, because right now, I’m sure they support the border-radius property.

When CSS3 is going to be released as a candidate recommendation, to make sure that our pages are going to be standard-compliant, we’ll also add the original border-radius property. Another reason to add the original CSS3 property is that the –prefix- properties might not even work once CSS3 is going to be a candidate recommendation.

* -moz- is the prefix for the Gecko layout engine that the Mozilla Firefox browser uses.

** -wekbit- is the prefix for the Webkit layout engine that the Safari and Google Chrome browsers use.

Using Modernizr

Go ahead and download Modernizr and load it in your pages:

Now we can apply CSS3 separately by using Modernizr’s pre-built classes.

What we’ve done was to remove the border-radius properties from the .intro class and apply them via Modernizr’s border-radius feature detection syntax, having it applied only if the user’s browser supports border-radius, neat! huh?

Modernizr vs. browsers with no CSS3 support

To style our element for browsers that do not support the border-radius property, we can use Modernizr’s feature detection and apply CSS2 as an alternative solution

We’ve only used one of Modernizr’s feature detection, to learn the rest, go and check out their documentation page.

It’s true that with Modernizr it’s going to take a bit of extra code and work, but right now it’s the easiest and safest method to bring the great new features of CSS3 in our browsers today.

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

6 thoughts on “Smart HTML5 and CSS3 with Modernizr

    1. Both HTML5 and CSS3 aren’t entirely ready to use for more complex front-end solutions, there are still a lot of features yet to be released and supported.
      I don’t recommend waiting for their full release, as it may take years hehe
      On the other hand, today, we can use some of its features to progressively enhance our designs.
      Modernizr is definitely a great way to start!
      I also recommend you read one of my earlier posts where I’ve talked about HTML5 and CSS3’s implementation into our designs today :)

  1. I agree that HTML5 is too far than flash and also flash is very powerful than HTML5. Below are the few points which I have noticed
    1) Video compatibility (youtube html5 player need different format of video for different browsers, which directly impact on storage and bandwidth)
    2) Styling (need separate CSS for different browsers)
    3) Multiple audio support at one time and simulations
    4) Code is not secure
    And many more…

    But as per my analysis and Adobe Flash acceptance for HTML 5. Seems that after few years HTML 5 will be closer competitor.

  2. Processing video is one thing, but flash makes it in a proprietary, close-source way (AFAIK, correct me if i’m wrong). html5 vedio playeroffers easy way for web developers to present video or audio. When the HTML4 era ends, there will be no hacks, embed, object and other tags needed, javascript tricks to achieve this in any browser.On the other way, it will be hard for developers of browsers, BUT: it’s still better than having only one close-source technology to have video on site. There is a real concurrency between browsers, so their developers will surely try to make it the best way they can. Unlike Flash developers, in my opinion.

Leave a Reply to Catalin Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">