HTML5 and CSS3

Here is the results of another skillsmatters free talk, this one on HTML5 and CC3 and was presented by www.brucelawson.co.uk (@brucel )

Bruce was an excellent speaker and gave an amazing 101 session using only notepad++ which was nice (I have personally been accused recently of missing out the basics so its good to see how it should be done), you have all heard so much on this subject before, that I’m just going to bullet point the bits i took away from the session,

  • He was at some pains to point out what HTML5 was and what it was not (ie its not another way of saying Web 3.0 or “just not flash”),
  • He was definite on the point that HTML5 WILL NOT KILL FLASH, but it will provide people with a choice for a lot of functions that currently you can only do with flash.
  • There was a lot of emphasis on coping with screen readers and making content easier for computers to parse intelligently and how HTML5 is better for that.
  • Quite a lot of the tags have been redefined e.g. small = “small print in a contract” rather than “little in size”
  • Most of HTML5 is JavaScript (50%+ of the spec)
  • HTML5 does not care about quotes (its in the spec not just lazy)
  • HTML5 does not care about case (its in the spec not just lazy)
  • HTML5 ignores stuff it does know (like CSS)
  • It has things like sliders and calendar pickers built in (its things like this that makes people look at it as an alternative to flash)
  • Validation is build in (fairly crude but very like a jquery validator and he did say it would get better)
  • The video element is really rather good (you can tab in and out and make it easily grow and shrink etc. which is hard to do on flash), but the much published codex problems are quite real, you have to currently encode 2 versions of your video: ogv and mp4 (this was caused by apple and nokia), webm could hopefully put a end to the problem. for old browsers you can use the current embed elementOn CSS3
  • CSS3 is Amazing!!! (transform and transition and webfonts)
  • On CSS3 currently you have to put a “display:block” for ALL HTML5 elements you are using, as no browser currently supports them.
  • The CSS5 media functions are really cool but I’m not going to talk about them as Ben Poole has just used them in anger and I’m hoping a bit of peer pressure will force him to write a proper bloody blog entry.
  • Layered background are amazing (with good png transparency)
  • Arrrrh!! where was background size when i wanted it for my client recently!!Code Snippit
    to make IE8 and below apply CSS to HTML5 you have to add the following:
    document.createElement(‘xxxxx’); for each html5 tag you use, e.g.

    document.createElement(‘header’);
    document.createElement(‘nav’);

    and you have to include a “body” element some where on the page

    Links

    Recommended validator: html5.validator.nu
    To see how well you code parses running it by: http://www.nvda-project.org/
    The Best place for free webfonts: http://www.fontsquirrel.com/

Leave a Reply

Your email address will not be published. Required fields are marked *