HTML5 and modern CSS. is it time?

Forum Moderators: phranque

Message Too Old, No Replies

HTML5 and modern CSS. is it time?

httpwebwitch

8:29 pm on May 26, 2011 (gmt 0)

I visited a site a few days ago that had a really nice interface, and (because I'm a nerd) I peeked at the source code.

It was all HTML5. New tags, like <section> and <nav> in there. And lots of schamncy CSS with piles of webkit- and moz- border rounding and gradient layering and great stuff like :first-child selectors.

And I was inspired. Wow, thinks I, I could do this too - the code is lean, the styling is simplified without all the needless background images and workarounds for nice-looking buttons and form UI. Elements aren't overloaded with class names. The markup is beautiful, or at least as beautiful as markup can be. The DOCTYPE isn't strict, it's just "html".

Then I went to another computer and looked at the same site in IE8 on Windows. And it looked like barf. Worse than barf. Like dog barf after the dog has eaten a squirrel.

So, thinks I, it's not time to start redesigning my sites yet.

Demaestro

9:20 pm on May 26, 2011 (gmt 0)

witch,

I was lucky enough to get a contract for an HTML5 CSS3 site to compliment the existing site.

The client is a college that has classes in developing/designing websites and to attract users and show off that they are "cutting edge" they had us make one.

They said this to me, something I have almost never heard and it felt nice to hear.

"Don't worry about old browsers as long as it works in IE9, FF4 and Chrome 11, iPad and iPhone"

It was nice to build something new that didn't have to work backwards. This isn't their main website it is just a show piece for any nerds who are into this stuff.

It is amazingly gratifying to code animations strictly in CSS. We had a lot of fun with it.

I guess the point of this story is, don't worry about building one that works backward, if you want to make one just go for it. You will learn lots and when the time comes you will be ready to hit the ground running when doing HTML5 and CSS3.

JAB Creations

6:42 am on May 27, 2011 (gmt 0)

Stick with XHTML 1.1 and serve XHTML 1.0 Strict for non-XHTML browsers. Then use classNames in place of HTML5 elements that way in the future when you choose to migrate from XHTML1/HTML4 to (X)HTML5 you'll be able to just swap out classes and elements without having to spend a ton of time editing your CSS.

- John

vivalasvegas

7:41 am on May 27, 2011 (gmt 0)

httpwitch,
Would you mind sharing a link? Or a hint maybe?

Thanks:)

pageoneresults

8:39 am on May 27, 2011 (gmt 0)

You can use HTML5 safely. Google have been using it for more than 2 years now. It's the CSS3 stuff that is not fully supported, particularly by IE. The main site I manage is HTML5 with a sprinkling of CSS3. We've accepted the fact that the borders are going to be square in IE and round in all other browsers. And that text shadows won't show in IE but will in all other browsers. One of these days they'll either catch up or go the way of Netscape.

There are HTML5 scripts that will force IE to behave. IE9 understands the HTML5 Elements.

Here are some examples of working around the basic HTML5 challenges.

The HTML5 innerShiv...

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

And you'll need some CSS...

article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}

If you search online, you'll find plenty of references on how to create the HTML5 Elements for IE8 and below using JavaScript.