PDA

View Full Version : css3 and html5


tony09uk
04-12-2011, 02:00 PM
is it possible to create a css3/html5 based site and it still be viewable in older browsers.

For example: I was considering having a ribbon effect as one of the tags being used and adding an image for those browsers who don't recognise that tag. If that's possible how would i do it?

Ricky55
04-12-2011, 07:06 PM
Yes of course. I've been using the new HTMl5 doctype and tags for a while now but there are things you need to do to make sure the tags work in IE.

For more info check out the site below

http://html5boilerplate.com/

This is a framework but it will give you some good pointers

Ricky55
04-12-2011, 08:37 PM
I was in a rush earlier when I replied. I would use the new HTML5 doctype and semantic tags, I do on all projects. They work fine in all browsers but not all parts are supported but the doctype and new semantic tags are fine. A lot of the other stuff is too and a lot degrades gracefully.

The main thing you need to do is include the html5 shiv for IE older than 9. This ensures IE recognises the new elements.

You do this in the head of your document in conditionals


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


Then in your style sheet, I have this in my reset file you need to tell the tags to display block all the ones you've used.


/*Required for HTML5*/
header, nav, section, article, aside, footer {
display: block;
}


Watch out for the new semantic tags though they are not always to be used in the way you'd expect. <header> and <footer> are obvious but <aside> and <article> are less so.

This is a site that I built recently didn't design it. This will give you the basic set up. html5 doctor is also a great resource.

http://www.judithharrop-interiordesign.co.uk/

This site also uses html5 video see the publicity section. It uses Flash first but then has a fall back. it also uses CSS3 @font face to give me gill sans for the body copy. I advised against this for body copy but my client being a designer just wouldn't have it.

I've also used CSS PIE to give the outer drop shadow to IE.

DWcourse
04-12-2011, 10:07 PM
Basically, the display: block property turns the HTML5 tags into divs for browsers that don't recognize them. One of the nice things about CSS is that older versions allow for new or unknown HTML tags as long as you supply a rule to tell the browser how to render it.