HTML5 and CSS3 Without Guilt

HTML5 and CSS3 Without Guilt

on Dec 17th 2010 with 61 comments
Tutorial Details
  • Topic: HTML5/CSS3
  • Difficulty: Easy
  • Estimated completion time: 20 minutes

Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.

Prologue

HTML5 Semantic Elements

The good news is that, except for Internet Explorer, you can create more semantic markup by using the new HTML5 elements — even in browsers which don’t officially support them. Just remember to set the correct display mode: block. The following snippet should reference all necessary elements:

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

IE Conditional Comments

Implementing many of the solutions in this tutorial involves including some JavaScript for specific Internet Explorer releases. Here is a quick overview: the test expression is enclosed in square brackets. We can check for specific versions or versions above or below a stated version. lt and gt mean lower than and greater than, respectively, while lte and gte mean lower than or equal to and greater than or equal to.

Here are some quick examples:

[if IE 6]

Checks if the browser is Internet Explorer 6.

[if gt IE 6]

Checks for a version of Internet Explorer greater than 6.

Tool 1: HTML5 Shiv

In anything IE, excluding the most recent version (IE9), you cannot apply styles to elements that the browser does not recognize. Your spiffy, new HTML5 elements, in all their glory, are impervious to CSS rules in that environment. This is where Remy Sharp’s html5shiv (sometimes called html5 shim) comes to the rescue. Simply include it in your page’s <head> section and you will be able to style the new HTML5 elements perfectly.

<!--[if lt IE 9]>

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

Notice how the conditional comments only load the html5shiv code on the condition that the version of Internet Explorer is lower than 9. Other browsers, such as Firefox and Chrome, will also ignore this tag and won’t execute the script, thus saving bandwidth.

html5 shiv is based on a simple workaround: it directs IE to create the elements with JavaScript (they don’t even need to be inserted into the DOM).

document.createElement('header');

At this point, they can be styled normally. Additionally, the more recent versions integrate IE Print Protector, which fixes a bug where the HTML5 elements disappear when printing the page..

Tool 2: Modernizr

Modernizr allows you to provide “backup” styling in browsers that do not support certain HTML5 and CSS3 features.

Modernizr is perhaps the best known of these tools, but it is also fairly misunderstood (the name does not help). Take a deep breath: contrary to popular misconception, Modernizr does not enable HTML5 and CSS3 functionalities in browsers that do not support them (although it does include html5shiv to allow you to use HTML5 elements in IE < 9).

Apart from the html5shiv functionality, Modernizr does one thing and one thing only: it runs a series of feature detection tests when loaded, and then inserts the results into the class attribute of the <html> tag.

Modernizr’s primary purpose is to allow you to offer “backup” styling in browsers that do not support certain HTML5 and CSS3 features. This is somewhat different than traditional graceful degradation, where we use the same CSS styling in all browsers, and then engineer it so that, when specific capabilities are missing, the result is still acceptable.

Now for an example of how Modernizr operates: if a browser supports border-radius and the column-count property, the following classes will be applied:

     <html class="csscolumns borderradius">

On the other hand, if the same properties are not supported — say, in IE7 — you will find:

     <html class="no-csscolumns no-borderradius">

At this point, you can then use these classes to apply unique styling in browsers with different capabilities. For instance, if you want to apply a different style to a paragraph, depending on whether CSS columns are supported, you can do:

  .csscolumns p {
    /* Style when columns available */
   }

  .no-csscolumns p {
    /* Style when columns not available */
   }

If a browser does not support columns, the .csscolumns class will not be present in the body, and the browser will never have a chance to apply the rule which uses it.

Some might object that this brings us back to the old times of building a different site for each browser. It is true that nothing stops you from writing so many style declarations that use advanced CSS3 features that your stylesheet becomes virtually empty when these rules cannot be applied.

If you want to use Modernizr in a way that makes sense, you must rely on your design talent to conceive alternative styles that don’t break the design and don’t require throwing away the rest of the stylesheet. For example, you might try replacing drop shadows on letters, when they are not available, with a bold typeface or transparency with a different color.

Usage

To use Modernizr, include the minified file, and apply a class of no-js to the <html> element. This last precaution allows you to provide styles for when JavaScript is completely deactivated; obviously, in those cases, Modernizr can’t help you at all. If JavaScript is enabled, Modernizr will kick in and replace the no-js with the results of its feature detection operations.

<head>
<script src="modernizr-1.x.min.js" type="text/javascript"></script>

</head>
<body class="no-js">
. . . . . 
</body>

If you’re willing to accept that all websites needn’t display identically across all browsers, you’ll find that Modernizr is an essential tool in your web dev belt!

Tool 3: IE 6 Universal CSS

On the same note, designer Andy Clarke has devised an elegant solution for solving IE6′s lack of standard compliance. Called “Universal IE6″, this stylesheet focuses exclusively on typography. The key is to use conditional comments to hide all other stylesheets from IE 6.

<!--[if ! lte IE 6]><!-->
/* Stylesheets for browsers other than Internet Explorer 6 */
<!--<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">
<![endif]-->

Important Note: Remember to include the latest version, as instructions for older ones are still floating around the web. The final results looks like so:

Universal IE6 CSS sample result

You have zero work to do to support IE 6 on a new site.

This approach has a pretty obvious advantage compared to classical alternate stylesheets: you have zero work to do to support IE 6 on a new site. The disadvantage, of course, is that the site displays very little of your design. Further, your HTML foundations also has to be rock-solid, in order for the page to be usable even with most styling disabled.

Note that Universal IE6 CSS does not include any styling for HTML5-only elements such as <section> or <footer>. It is not a problem unless you are relying on those elements exclusively to obtain block level display for some parts of the page. Generally, you would always wrap your text also at least in a paragraph or list element.

This solution is clearly not for everybody, and you might find clients who flat out disagree with their site looking brokenwhen viewed in IE6.

You might also argue that, at this point, you can just as well drop IE6 support entirely. Andy Clarke has summarized his answers to these objections here.

This approach works best for content-centric sites, and catastrophically for web applications; but then again, building a modern web application to work well on IE 6 is a challenge in itself.

Tool 4: Selectivizr

Selectivizr Support

Our next champion is a JavaScript utility which aims to introduce new capabilities into older browsers (well, actually just IE 6-8): Selectivizr works in tandem with other JavaScript libraries such as jQuery, Dojo or MooTools to add support for a range of more advanced CSS selectors.

I’ve listed a few below, though note that the full list of capabilities will be dependent upon your preferred JavaScript library.

  • :hover
  • :focus
  • :first-child
  • :last-child
  • :first-line
  • :first-letter

To use Selectivizr, download it from their home page and include it within your <head> section, together with one of the support libraries. Here is an example with jQuery:

<script src="jquery-1.4.4.min.js"></script>
<!--[if lte IE 8]>
  <script src="selectivizr.js"></script>

 <![endif]-->

Selectivizr works in tandem with other JavaScript libraries to provide CSS3 support for IE 6-8.

This point is very important: Selectivizr cannot work alone; it requires your preferred library to be present. Luckily, it is compatible with the huge majority of popular JavaScript libraries. Chances are, if you are using JavaScript on your site, you probably have an appropriate library already included.

DOMAssisant

On the other hand, if you won’t be using a library as well, an alternative solution is to use the light weight DOMAssistant, although you might still prefer your usual JavaScript library for greater ease in managing files.

Be careful though, as the precise selectors that Selectivizr makes available depends on which supporting library is chosen. According to the home page, right now the greatest range of selectors is available with MooTools, while unfortunately jQuery makes the least number of selectors available. It must also be said that some of the selectors that are not available with jQuery are quite exotic and rarely used in the real world usage. Refer to our “30 CSS Selectors you Must Memorize” article for a full list of selectors.

As it happens, with most JavaScript solutions for CSS woes, some restrictions apply.

  • For Selectivizr to perform its magic, stylesheets must be loaded from the same domain as HTML pages. This rules out, for instance, hosting stylesheets and other assets on a CDN.
  • You are forced to use the <link> element to include your stylesheets (as opposed to <style>).
  • Selectivizr does not update styling if the DOM changes after the page has finished loading (if you add elements in response to a user action, for instance).

Tool 5: CSS3Pie

CSS3Pie also enhances Internet Explorer’s [6-8] capabilities, but in a much more native way, as it effectively enables the use of a number of spiffy CSS3 properties, like border-radius, linear-gradient, box-shadow, border-image as well as adds support for multiple backgrounds. Use CSS3Pie and say goodbye to manually sliced and positioned rounded corners.

CSS3Pie: say goodbye to manually sliced and positioned rounded corners.

The way it works is by leveraging little known proprietary Microsoft extensions: the CSS behavior property and HTML component files (official documentation). This extension allows you to attach JavaScript to certain HTML elements using CSS. The JavaScript is included together with some Microsoft proprietary tags, in .htc files which are referenced within the style rules.

For this reason alone, many developers might argue that you shouldn’t use CSS3Pie. Internet Explorer’s proprietary tags are performance heavy and produce less-attractive output.

Why doesn’t CSS3Pie use plain JavaScript? Well there is a JS-specific version, though the team advises against its usage, due to the fact that the JavaScript blocks the parsing of the page.

With the current .htc solution, implementation is quite simple: you only need to upload a single file from the CSS3Pie distribution, PIE.htc, to your server. Afterward, every time you use one of the supported CSS3 properties, add the code below:

behavior: url(path/to/PIE.htc);

Above, path/to/PIE.htc is the path, relative to the HTML file being served; not the stylesheet.

Server Side Instructions

Of course, CSS3Pie can only do its magic in Internet Explorer. It also needs a bit of care and feeding on the server side:

  • You should ensure that the PIE.htc file is served with a text/x-component content type. The distribution includes a PHP script that can take care of this if you are not allowed to modify your server configuration, for instance on a shared host.
  • PIE.htc can also trigger ActiveX warnings, usually when you are testing it on your localhost. This last problem requires the Mark of the Web workaround to be solved.

CSS3Pie is still, at the time of this writing, in beta mode – as there are still some kinks to be ironed out.

Tool 6: HTML5 Boilerplate

HTML5 Boilerplate goes much further than your standard starter templates.

HTML5 Boilerplate can be described as a set of templates to help you get started building modern HTML5 websites as rapidly as possible. But HTML5 Boilerplate goes much further than your standard starter templates.

For instance, it bundles the latest version of Modernizr (same creator), and the HTML even links to the latest Google-hosted jQuery, Yahoo profiler and Google Analytics scripts for you. The CSS contains the usual reset rules, but also a wealth of @media queries to get you started with responsive web design targeting mobile devices.

Configuration Files

The most unique feature is that, on top of client configuration, you also get the server side: configuration files for Apache and Nginx. This allows you to maximize download speeds and optimize HTML5 video delivery. In particular, the .htaccess files for Apache might be very convenient to drop into a shared hosting account, as often things like gzip compression and expires are not active by default.

Does it do too Much?

Some people might argue that HTML5 Boilerplate takes a bit too many decisions for them (hell, the Apache configuration even automatically strips www. in front of the domain name!) or that it is somewhat Google-centric, though, nonetheless, it’s always interesting to study the files and find what problems the authors have anticipated.

Further, you’re certainly encouraged to break it down for your personal needs. This is simply a boilerplate to get you started.

A Visual Overview

If you want a detailed breakdown of everything HTML5 Boilerplate includes, Paul Irish recorded an exclusive screencast for Nettuts+.

A fully commented version is available at html5boilerplate.com.

Epilogue: Be Bold

Often, the fear of implementing features which do not enjoy full browser support discourages designers from adopting the latest technologies. While the demographics of your audience has to be considered carefully, as well as your client’s wishes, if you accept that sites don’t have to look the same in all browsers, it is possible to make full use today of HTML5 and CSS3.

Think of it this way: if you wait until CSS3 “is complete,” you’ll be waiting forever. CSS2 isn’t even fully supported across all browsers yet! The guiding principle here is that every user should get the most bang for his buck: if he is using a bleeding edge browser, why not take advantage of all the features that browser provides?

Let us know what you think about these issues in the comments. Thank you so much for reading!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Constantine

    Excellent post
    Thank You Ludovico!

    • http://www.geoffreymultimedia.com Edwin Lynch

      Yes. Thank you very much. This one article has saved my life! The guys who wrote this stuff are basically working for Microsoft – and if not, Bill should put them right on the payroll just for being so nice to the webdev community.

  • http://floridaflourish.com Chris Brauckmuller

    HTML 5 Boilerplate FTW. I got rid of a lot of the server side stuff, but the front end code is worth it’s weight in gold. It’s hard to imagine a better starting framework.

    • http://toni.podmanicki.com Toni Podmanicki

      5! Totally agree, get rid if you think something is unnecessarily in HTML5Boilerplate and you can start with HTML5 today. Few days ago I shifted my personal web site into HTML5 with that base.

  • http://www.templafied.com Noeg

    Awesome! Thanks :)

  • http://idonthaveaurl.com Ryan McLaughlin

    Great post Ludovico. You cleared up a lot of my misconceptions.

    Thanks!

  • Meaganoff

    Re: “HTML5 Shim” – I can only think the proper name is “shim” – a shim is a wedge to make something level, or in computing, a hack or a workaround.

    A “shiv” is something you stab someone in prison with.

    Maybe “shiv” was a joke or a misunderstanding and came first (I see it has a higher activity level on Google than http://code.google.com/p/html5shim/ though it appears to be the same thing.)

    But I had *always* heard to it referred to as “HTML5Shim” prior to today and find the other name confusing.

  • James

    I’ve been tempted to try a shiv, but they don’t solve the problem of IE users disabling javascript. Yes, I know that it would only affect a small percentage of users, but what customer is going to be happy when you tell them that ~5% of their potential customer base won’t be able to view their site correctly because you want to experiment with new technology?

    They’re all great solutions for personal sites or sites where you can be sure that virtually all of your users will be rocking a sensible browser, but for the type of sites that most web designers are tasked with building for clients – I don’t think it is worth the risk.

    • Abhijit

      Exactly what I think. I am ready to use each and every HTML5 feature in my personal website; but for clients it’s simply not feasible. Also, the HTML5 excitement seems to have somewhat lost force for now, but I could be wrong!

    • http://paulirish.com Paul Irish

      As for a % figure, If you trust Yahoo and Statcounter: We’re looking at ~1% of all users have js disabled, and then 48% on IE 6-8. So then: IE6-8 w/ js disabled: ~0.5% of all users. Maybe.

      • Marcel Shields

        And using an js HTML5 element shiv only affects the display value of the elements anyways. The site’s usability is probably marginally, if at all, affected.

      • http://www.shaunbent.co.uk Shaun Bent

        I have to agree with Paul here, I believe the number of users with js disabled is going to be very low. Plus these users would surely be used to have a rather poor experience whilst online due to the number of websites which require JS. Websites like Facebook & Twitter rely heavily on JS.

      • James

        I’ve seen much higher levels on some sites I’ve built – as high as 6% JS disabled and 75% IE6-8 on one local gov site, giving 4.5% of all users. That’s too high. If I could be confident of bringing that down to 1%, then I could probably make a case, but I still think we are a couple of years away from that.

        I’m going to be building some personal sites in the New Year and I’ll seriously consider using HTML5 and CSS3, if only to get a better grasp of what they are capable of and the pitfalls of developing that way. Would be interesting to see if anyone has tried building a site using both HTML5 – CSS3 and HTML4 – CSS2 and comparing conversions with some A/B testing.

        @Shaun, I see your point, but those users having a poor user experience elsewhere is not my concern. In fact I might argue that by ensuring they have a great experience on my sites I generate a lot of goodwill.

      • http://www.shaunbent.co.uk shaun Bent

        @James you make a very fair comment about ensuring they have a good experience. I do agree that we should be delivering the best experience out of each browser (obviously a user on Safari or Chrome will have a better experience), but at the end of the day we want everyone to have a good experience. I think they point I was trying to make that users with js disabled should expect not all features will work as they have no js and js plays a large part in many sites.

        But your argument about delivering a good user experience still stands very much true! :D

    • Carlos

      I still think that this is SOOO much work to just use CSS3 or HTML5 you are right, IE users are a hard bunch to please unless by a miraculous turn of events, Microsoft force all their machines to upgrade to IE9.’

      Shivs, Modernizer, Boilerplates, alternative stylings, seems like more work than actually getting IE6 to look correctly using CSS2 styles.

      There is so much work to do to just set up a site to ensure the thing looks correctly cross browser including all of these files, alternative styles and shivs.

      I really want to use HTML5, CSS3 regularly, but your run-of-the-mill client to switch will be nearly impossible, since most will be on IE7 still let alone IE6.

      I agree with James, it is a great solution for personal sites, maybe, or strickly sites dedicated to web development like NetTuts where most of your readers will have up to date browsers.

      Frustrating but still a fact of life and will be for years to come still.
      Even if developers keep pushing it and making sites with it, if a basic user tries to view the site, and it looks like crud, then the user will instantly leave the site. Is it worth it yet. I have no idea.

      • http://www.shaunbent.co.uk Shaun Bent

        I can see where your coming from Carlos but I do disagree. One of the resource mentioned above, the HTML5 Boilerplate has everything setup for you, so you just open the boilerplate and start coding, no extra work required. So really it isn’t SOOO much work after all, might even be easier because the HTML5 boilerplate is so well put together.

        I have just developed a site for a large international client using HTML5 & CSS3, using many of the resources listed above and I do not think it looks it looks crud in less capable browsers like IE at all. (Also the client uses IE6 as their default browser)

        I have also found that by using a boilerplate, like the above mentioned I find myself doing a lot LESS bug fixing for IE dispute the fact that I am using HTML5 and CSS3. I really think you should give it ago and see what you think, I think you will be surprised.

        (I sound like a bit of a boilerplate fan boy!)

      • carlos

        @Shaun,

        I think I will. I really want to start developing in HTML5 and CSS3, and use a lot of their capabilities. I want to get into more Mobile web development and with the newest devices, HTML5 and its video capabilities and CSS3 will provide lots of great goodies.

        Still slightly reluctant to go full scale with it, but will definitely move forward with trying out the Boilerplate stuff.

    • http://nicolasgallagher.com Nicolas Gallagher

      For “IE without JS” there are several solutions to ensure that the content remains accessible (which IS important). I wrote about the method that I use at the moment – http://nicolasgallagher.com/yet-another-html5-fallback-strategy-for-ie/

      Personally, I’m not a fan of using so much bloat to deal with developing in HTML5 and CSS3 in less capable browsers. Prefer to use just the HTML5 shim, a fallback for IE without JS, and then write my CSS as normal. Capable browsers are progressively enhanced and others are left with a perfectly usable experience…just not quite so pretty. But I might change my opinion in the future!

    • abdlquadri

      Anyone that disables Javascript is computer savvy enough to get the Web they deserve. If your clients disable Javascript … Diasle them!

      • abdlquadri

        Typo!
        Retype.

        Anyone that disables Javascript is computer savvy enough to get the Web they deserve. If your clients disable Javascript … Disable them!

  • http://lavalleecreative.com Stephen

    Thanks for the post….great info.

  • http://alvinmilton.com AGDM

    This was a timely post. Appreciate the link to the boilerplate video. The explanation is so necessary :)

  • http://www.thedevelopertuts.com Bratu Sebastian

    When targeting IE browsers, I always make an absolute positioned div on the center of the website with transparent overlay on the back in a tag to tell the users they should have javascript enabled or change the browser at all. IE sucks!

  • Barry

    Between HTML5 Boilerplate, Modernizr, and cssPIE, my life has been made much simpler and I can feel satisfied that I’m writing clean, modern code that supports the vast majority of browsers.

  • http://www.neilrpearce.co.uk Neil Pearce

    Great post, one i really needed to read and fully understand so i can take this to my boss!

    - Thanks

  • http://css3pie.com Jason

    This is a good rundown of available shim tools, thanks for putting it together.

    “For this reason alone, many developers might argue that you shouldn’t use CSS3Pie. Internet Explorer’s proprietary tags are performance heavy and produce less-attractive output.”

    I don’t understand this statement, can you please clarify? Speed is obviously not as good as a native CSS3 implementation would be, but that’s mainly due to the logic being implemented in JavaScript, not because of any proprietary IE features it uses. Also, for the CSS3 features it implements, PIE generally renders exactly like other browsers, so I don’t know what you’re referring to when you say it’s less-attractive.

  • http://code-junkie.com Brannon

    I pretty much only believe in using Shivs where I wasn’t already going to make the styling work without JavaScript. For example, my new website uses quite a lot of vendor prefix CSS. In very old browsers like IE6, I haven’t even bothered to try to make my drop shadows work because I consider it graceful degradation. Since I never plan on making any of that work at all in IE6 anyway, then I’ll probably go ahead and use a shiv to make it work for most users of IE6.

    I wouldn’t ever use a JavaScript shiv to make elements or design work that I need to have work, however. For example, I probably won’t ever use a shiv to make the new HTML5 semantic markup work in IE because I don’t feel like it’s good usability to make even .01% of my users see my site broken so that I can use semantics that don’t help the user.

    Essentially, if the site completely, 100% works without a shiv and I could publish it without one then I’ll add one to improve user experience. If the shiv can’t be removed without breaking the site, then I’ll find a way to make the site work without it first and then decide if I want it.

  • http://www.katcode.com andy

    The most concise and informative article I have read on implementing html5 cross-browser.

    Thank you.

  • http://www.shaunbent.co.uk Shaun Bent

    I want to start off by saying this is a fantastic post full of some excellent resources. I think I have used them all apart from CSS PIE, I personally don’t think it is necessary to emulate CSS3 features in IE – I see it as if your browser doesn’t support it then you don’t see it.

    I feel different than Brannon about relying on using the JS shim, I believe the number of users without JS will be very very low so much so I wont let it stop me from using new HTML semantic elements. Also as I mentioned in an earlier comment: “surely be used to have a rather poor experience whilst online due to the number of websites which require JS. Websites like Facebook & Twitter rely heavily on JS.”

    What I do find really interesting is the difference in the comments compared to a similar post on Smashing Magazine the other day (http://www.smashingmagazine.com/2010/12/10/why-we-should-start-using-css3-and-html5-today/), I generally found the comments to be rather negative, anti HTML5 and very much IE6 fixated. With a great majority of the commenters using IE6 as an excuse for not using HTML5. Surprisingly another excuse was cost, people were claiming that it apparently costs more to use HTML5 some how, not really sure how that works but ok.

    Anyway, its really good to see a whole group of people who see the true benefits of HTML5 and are not afraid to use it!

    • http://web5.me/ Marc DIethelm

      “I personally don’t think it is necessary to emulate CSS3 features in IE”

      Neither do I, but my boss does. And he’d rather not let me “waste time” with CSS3 if I have to create a fallback anyway. So thank you CSS3Pie. (I yet have to use you, only discovered you today.)

  • http://www.webdesignkc.co.uk/ rory

    Top stuff – Paul Irish is a legend, awesome coding. Embrace HTML5 its gonna improve the web so much Shaun is right developers shouldn’t be afraid of it.

  • http://codeindesign.com Yudiacro

    You save my day!
    I’m ready to move to HTML5 and CSS3 now.

  • http://arnaudbrousseau.com Arnaud Brousseau

    @shaun : exactly what I was thinking when I read the comments here. The community of smashingMag is reacted very differently to the HTML5/CSS3 incentive.

    For my personal projects, HTML5BoilerPlate is definitely the way to go (check the new version with the “build” folder which contains handy scripts, that rocks).

  • http://www.interosite.ru cyrusmith

    Perfect! I’ve never used html5 in my clients websites. Now with these tools I should do that! Thanks!

  • http://ohotgirl.com/ Mr.Pham

    Thanks for the post….

  • http://cmstutorials.org krike

    Nice list, always usefull. And I hate IE 6

    Submitted on The Cms Tutorial Site: http://cmstutorials.org/tutorial/view/html5_and_css3_without_guilt

  • http://www.deluxeblogtips.com Rilwis

    Nice collection of css3 libraries. CSS3Pie seems to be a good tool for handling CSS3 problems with IE. Thank you for this article.

  • http://www.mightymeta.co.uk James Brocklehurst

    Even though modernizer and the HTML5 Boilerplate are inspired pieces of work, I still feel reticent.

    A few years back we were encouraged to make sure our web pages ‘degraded gracefully’, then this was no longer okay and the mantra was ‘progressive enhancement’. We were to make sure that we started with solid HTML foundation, then style with CSS, and top it off with a JS layer for extra snazzy functionality, as long things still worked if JS was disabled.

    Now ‘regressive enhancement’ is acceptable, and even the HTML may not work if JS isn’t present. Unless I really can be sure that 99.5% of my audience has JS turned on, this seems a bit back to front me.

  • http://nathansweet.me Nathan Sweet

    “The good news is that, except for Internet Explorer, you can create more semantic markup by using the new HTML5 elements”. I keep hearing this all over the web. My biggest problem with this statement is that in order for something to be semantic (meaningful), it has to be semantic to someone or something (and I would also add meaningful/semantic for a reason). It’s not enough that as a developer I should think the markup I’m seeing is more expressive, I’m not the one who “reads” (derives meaning from) html. The only thing that “reads” html is a user-agent. Most of the user-agents are browsers, and they don’t care about semantics, they only care about display and function (ie this video tag plays video). The only real user-agent that cares about semantics is a search-engine.

    Then what is really funny about the claim that html 5 allows for more semantic mark, is that it isn’t true. Search engines do not yet account for html 5, and won’t for a long, long time (see google’s SEO threads, like this recent one: http://www.google.com/support/forum/p/Webmasters/thread?tid=2d4592cbb613e42c&fid=2d4592cbb613e42c00049321bc3904e9&hl=en). That post clearly states that html 5 is not semantically important yet, and there are numerous other search engines, who say the same thing.

    Will the so-called “semantic” tags of html 5 be important one day? Absolutely! Is it enough to justify going to all this expense to use them now? I doubt it.

  • http://boylecreations.com Aidan Boyle

    Some great solutions here. Thanks a lot for posting this. I do have a question though ( unless I missed it in the article )

    Do any of these solutions also provide png support for browsers that don’t handle it? Or do we still need to provide the png fix script for those versions?

    Thanks!

    • http://www.shaunbent.co.uk Shaun Bent

      None of the above resources develop browsers, but the boilerplate has the PNG fix included as part of it. As its only IE6 that doesn’t support transparency in PNG’s the small PNG fixing script doesn’t really cause that many issues as it can be wrapped in a conditional statement!

      • http://www.boylecreations.com Aidan Boyle

        Thats awesome! Thanks for the quick reply Shaun! :D

  • http://pixelcoder.co.uk Alistair

    In light of previous comments, i’ve since made a little site to help promote standards.

    The voice of the site is a little tongue in cheek.

    It’s only because we all love IE so much.

    http://pixelcoder.co.uk/ie/

    • http://www.shaunbent.co.uk Shaun Bent

      Love this page you have made! Thats really good!

      Had a look at your main site as well, thats also really nice, but there is a typo at the bottom you have got XHTML 5.0 instead of HTML 5 – unless its not a typo and you are rocking out some even cooler new language, if so you should share the XHMTL 5.0 magic with us!

      • http://pixelcoder.co.uk Alistair

        Haha, thanks for the compliments dude and pointing out the apparently super obvious typo.

        Haha *embarassed*

  • http://yeahnah.org Ryan Allen

    I am wondering if in time browsers will be thought of like devices such as the iPhone or Android phones. You don’t hear people complaining about things like “There is no Angry Birds on my 5 year old Nokia! What is this! It is unjust!”, you just reply “Well, maybe you should get a new phone?”. Except that browsers are free.

    Less and less I feel sorry for people on old browsers. Firefox is free. Google Chrome is free (and my preference). There’s really no excuse!

  • K Arun Mariappan

    Nice Post.. Thank you very much.

  • http://www.xeoscript.com Muhammed K K

    Thanks dude, I will try it today itself.

  • xjax

    what about the “less code” statement, finally we have no tables, tables from hell!
    *at all and divs will be *no more, just “blocks”.
    look at that thing, that’s not some blocks to divide the viewport for a use inteface, thats programming sites and it’s ok to build a site block by block inline by inline, for those who like it. like me you know.

    ermm, so, the CPU is not important and “old” Hardware is not important.

    remember something: ACCESSIBILITY

    it’s not just “font-size: 2em and big images, some sounds”…

    HARDWARE accessibility metters you know… .

    ty,.

  • http://www.maiconweb.com Maicon Sobczak

    Great collection of tools. The explanation is fantastic.

  • Erkan Yilmaz

    There are plenty alternatives … why don’t we talk about Opera, Chrome or Firefox ? Don’t we have to stop supporting IE6 ? There’s IE8 and next year IE9 !!! Why do we still talk about IE6 ??????

  • Wayne Shears

    Great article, however I would say remove IE6 support and just add a script to inform users they need to upgrade.

    Just my two cents.

  • Greg

    Wow, thumbs up for CSS3PIE, I got it working in just a few minutes! All IE’s now have border-radius in my projects. Thanks for the tip!

  • kankaro

    if Selectivizr supports CSS pseudo classes and CSS3Pie supports CSS3 border properties… then it’s a good combo to use both of them to get you satisfied..

    I’ve try CSS3Pie a minute ago and I see the result… it’s fantastic.. Selectivizr and CSS3Pie are great combo… what you think? :D

    anyways thanks a lot for sharing this great article.. it really help a lot…

  • jeff

    Very helpful article, just one question though. Does the boilerplate have the Selectivzr or just Modernizr?

  • http://jitendravyas.com/ jitendra vyas
  • Mel

    This is a really interesting and helpful tutorial – I’m in the process of updating my own website and am hoping to use HTML 5 and CSS3.

    @jitendra – i have to say I was quitely impressed with this solution; though I can’t help but wonder if this solution is actually defeating the object of the point of using HTML 5. I built my holding page using this method and am delighted to say that it worked wonders. But I’m left thinking about 2 things – 1) how will this work with SEO? 2) the whole point of HTML 5 is a huge attempt to make sense of websites and introduce unity across the web, how does using this method fit in with this, if it does at all? I know you say it’s has it’s ups and downs and it’s up to us to choose whether to use it or not – i was just interested that’s all.

    Cheers for a great tutorial and great to see so many helpful comments too.

  • kankuro

    if i have the power and will like binladin, i will blow-up one state in the US, and demand to all browser maker especially IE to follow the web standards set by the W3C… that will solve the problem…. :D what’s the use of that standard if u don’t follow :D

  • http://www.redbridgenet.com Red Bridge

    It’s gonna be tricky working with HTML5 these next couple years. In one way, the hype for this stuff is going to reach a fever pitch… you’ll need to market on HTML5 and somehow position yourself with it. In the real world however, with real corporate clients, and real picky solo clients (ie. my Mom visited the site and had problems…) it’s going to be a nightmare. HTML5, we’re going to love you, then hate you, then love you again.

  • http://gotebook.net Max Michael

    Some great solutions. Thanks a lot for posting this

  • Matt

    Hi, unfortunately there is one issue with Modernizr n cufon fonts which has not been fixed yet. Developers don’t know why by using these 2, in IE7 n 8 your fonts are all doubled n pages look like a big mess. The only solution is to remove cufon n apply other fonts methods (google web fonts, font-face etc…).
    These other font solutions don’t offer the same number of fonts that cufon does. If u wish to use cufon, remove Modernizr n use html5shiv instead. Happy dev! :)