HTML5 and CSS3’s first steps

Like I promised, I’m going to focus more on HTML5 and CSS3. I’m that dad who wants to witness his baby’s first steps, as how I want to actively progress with the latest web technologies as they get implemented into our browsers today and as how you should too.

THE THEORY

It’s been a very long time since W3C has taken CSS to the next level, we’ve been working with CSS 2* for around 13 years now. It hardly became a recommendation due to browsers’ lack of following common standards and “greed” to offer unique control individually. But I guess that big break also had its role, considering how all browsers had a good time to incline towards CSS 2.1’s specifications.
W3C has began CSS3’s development back in 2005, when CSS 2.1 was under a second review and became once again a candidate recommendation in 2007.

The CSS WORKING GROUP has taken an entirely new approach on CSS3 though, learning from CSS 2.1’s past slow integration, CSS3 has been developed by modules with separate recommendations.

Today, CSS3 begun having some of its properties supported in Firefox, Safari and Opera (And Internet Explorer 9 promised to follow along).
In one of my earlier posts, I’ve mentioned how FindMyByIp has posted a very nice list of CSS3 browser compatibility list where we can see which properties, or modules for that matter, can be used for progressive enhancement.

At the end of this post, you’ll find links towards some reference guides for all HTML5 elements and CSS3 properties*

We have to bear in mind that not all CSS3 properties might make it by the time CSS3 is going to be a candidate recommendation

THE PRACTICE

Now, it’s time to bring the future of web development to us!
Our concern? Older browsers with lack of HTML5 and CSS3 support!

Alright, one thing is clear, we cannot use CSS3 for major layout structuring or critical design impacts, but we can sure use it to spice up a few things that won’t matter as much for those who won’t be able to see them (i.e. using the border-radius property, Internet Explorer people can live with rectangular shapes!)

What if I were to tell you, that there’s way to detect whether the user’s browser has support for most of the CSS3 properties you’re going to use? Well, there is!
It’s called Modernizr and it does just that!
Not only that we can apply CSS3 as long as the user’s browser supports it, but we can also make sure that our elements are going to be nicely styled for those who do not have CSS3 support.

In the following posts, we’re going to see which CSS3 properties have the most support and how we can start using them today, with Modernizr.

All of that, in HTML5 of course :)

To make things easier, one aspect you can look at when considering the big jump from HTML4 to HTML5 and CSS 2.1 to CSS3 is that, basically, most of the code is going to be built with HTML4 and CSS 2.1, we’re just going to implement the new elements and properties wherever possible.

HTML5 Cheat Sheet [source: smashingmagazine.com]

CSS3 Cheat Sheet [source: smashingmagazine.com]

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.

3 thoughts on “HTML5 and CSS3’s first steps

Leave a 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="">