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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smart HTML5 and CSS3, with Modernizr</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="intro">
<p>Hey you, have you noticed we've gone HTML5?</p>
</div>
</body>
</html>
|
CSS:
1
2
3
4
5
6
7
8
9
|
.intro {
background-color: #e7e7e7;
border: 3px solid #c7c7c7;
font-size: 16px;
padding: 10px;
width: 180px;
}
|
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:
1
2
3
4
5
6
7
8
9
10
11
12
|
.intro {
background-color: #e7e7e7;
border: 3px solid #c7c7c7;
font-size: 16px;
padding: 10px;
width: 180px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
|
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:
1
2
3
|
<script type="text/javascript" src="location/of/modernizr.js"></script>
|
Now we can apply CSS3 separately by using Modernizr’s pre-built classes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.intro {
background-color: #e7e7e7;
border: 3px solid #c7c7c7;
font-size: 18px;
padding: 10px;
width: 180px;
}
.borderradius .intro {
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
|
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
1
2
3
4
5
6
7
|
.no-borderradius .intro {
// CSS2 code here
}
|
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.
It’s a good idea to use HTML5 and css3 now, or should I wait a little longer?
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
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.
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.