Convert to HTML5\CSS3 or Not ?

[SMOKING]

hi guys
what do you think a bout HTML5\CSS3
do you converted to HTML5\CSS3 or not and if not why you didn`t ?

for me ..
i was thinking to upgrade to HTML5\CSS3 but my friend told me
that it is not support old versions of browsers also it is Properties\options
not support in all new versions of browsers

i heard more about this and it faster\Smart language

Mr.Happy adviced me to upgrade to HTML5\CSS3 but i dunno what should i do

let`s discuss it ...

SMOKING Reviewed by SMOKING on 22nd Sep 2011. Convert to HTML5\CSS3 or Not ? hi guys what do you think a bout HTML5\CSS3 do you converted to HTML5\CSS3 or not and if not why you didn`t ? for me .. i was thinking to upgrade to HTML5\CSS3 but my friend told me that it is not support old versions of browsers also it is Properties\options not support in all new versions of browsers i heard more about this and it faster\Smart language Rating: 5

[Mr Happy]

Ok here's how it goes.

The HTML you'll be using will the the standard basic stuff that works on all browsers. It's the unique and highly experimental parts of HTML 5 that you won't be going near that are still in beta, are likely to change and don't work on all modern browsers.

The basics tags like header, footer, section, article, nav etc etc are all standard and work on all browsers. Now they may have minor issues on the really really old version of IE but all you have to do is include the following in the header.

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

It's a javascript file that fixes the really old versions of IE that don't support HTML5.

That's HTML covered. Next and what I consider more important is the CSS3.

HTML 5 and CSS3 are completely different. You can use HTML4 and CSS3 or HTML5 and CSS2.1 it doesn't matter. The thing is though CSS3 is a lot more supported and makes a massive difference in terms of making your site faster. Way more of a difference than HTML5 I find so I'd strongly recommend CSS3.
I'll take a few CSS examples:
For stuff like rounded corners of a box you can use CSS3. If you were not to use CSS3 you'd have to do like what Crazy-Coderz.net are doing and have images. Loads and loads of images making the site uber slow and heavy. I think it's an epic fail of a site in terms of coding.

Let's look at a corner



See that 9x9 pixel image. That's a tiny extra thing that has to be loaded. In coding you can add the line:

border-radius:12px;

to your CSS file and it will obviously be a million times faster. If you do that for every single corner your talking about saving 2-3 seconds and I'm deadly serious that 2-3 seconds is like a lifetime when your waiting for a page to load.

So what's the problem? Well not all browsers support CSS3 the same way. Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ all support the above line. Older FireFox doesn't. You have to use -moz-border-radius: 12px; for FF version 1.0-3.6 and you have to use -webkit-border-radius: 12px; for Safari 3-4, iOS 1-3.2, Android <1.6.

That means to make a curve you have to have:

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;

but even those three lines are a huge saving rather than having 63 images as in Crazy-Coderz case which add an extra 300kb and 4 seconds to load. It's 7.3 seconds when it would be about 3.2 if it wasn't for all the stupid images. A minor problem is IE 6 doesn't support the radius at all so all your boxes are square. It's a minor % of users and worth ignoring them trust me.

The other example I'm going to use but not going into as much detail is gradients.
Instead of having loads of different images you can have:

background-image: linear-gradient(top, #444444, #999999);

Which fills a square with a light grey color at the top to a dark grey at the bottom. You could do the same with an image but its more loading and a slower site.
It's the same problem as above. Different browsers need different CSS but even after you've added the CSS for all browsers it's still way way faster than images.
Here you have more rules but all versions of IE are supported with is good so this is something you HAVE TO use.

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}

This is pretty complicated knowing what CSS3 to use. Even I don't know them all off so I use http://css3please.com/ which is just a one page website. You can edit the code live to see how it will look. Just copy and paste it to your site when your happy with it.

For the record all the sites I've made in the last year are HTML5 and I've being using CSS3 only for a year and a half. Examples of these sites are http://wrzc.org/ and http://moanmyname.net

If you look at wrzc I use the radius, shadow, gradient and border which are all CSS3 elements to create everything in the layout. The rounded corners of the boxes and even the buttons are all 100% CSS3. Their's no images at all making the site incredibly fast to load.

I feel I should probably have made this a separate tut now but anyway.