HTML5 & CSS3

  • We use CSS3 and HTML5 which are now well supported by all browsers
  • CSS3 makes cool effects, including animation, easier to implement
  • HTML5 makes it easy to use audio and video, offline data storage, geolocation, element positioning, and canvas

(For examples of HTML5 see JS-HTML5-CSS3)

Animation

The implementation of CSS3 and HTML5 by browser manufacturers, has changed the way the web works. In the past, to create animation on the client machine, Flash, Javascript/DOM scripting (Document Object Model) would have been the most likely methods used.

Flash required Actionscript programming and in any case was not always supported on the client browser, and Javascript might be disabled on the client machine. The Document Object Model was also implemented differently by different browsers.

Currently all major browsers offer significant support for transitions (fades etc), translation (moving things about) and more complex animation.

Many Choices

CSS3 and HTML5 add to the possibilities of how to animate your site. The options are to use the following;

  • Flash to create simple or complex animations
  • Javascript and DOM to animate pages (fading menus and images, image viewers etc)
  • CSS3 to add transitions (timed changes of stylesheet attributes, translations etc), transforms (moving, resizing, skewing, rotating), and animation (more complex changes of the above)
  • Flash to include audio and video on your site
  • Youtube to include video on your site
  • HTML5 to add audio and video on your site very simply!

The last method marks one of the biggest advances from previous versions of HTML, as it makes the addition of sound and video to a site, a very simple matter.

CSS3

CSS3 makes animating websites much simpler. Among other things, it adds the following:

  • Transforms of elements - translating (moving), resizing, skewing, rotating, scaling
  • Transitions - timed changes of stylesheet attributes, transforms etc
  • Animations - more complex routines of transforms and transitions

The great thing is that no scripting (Flash, Javascript etc) is required - it is all done by the style sheet, and a web browser that supports the new CSS3 properties. All major browsers now provide comprehensive support.

For the developer and client it means that a more pleasing presentation can be produced in less time.

HTML5

Some of the major changes that come with HTML5 are as follows:

  • Audio and video tags: These allow simple addition of sound and video files without the need for Flash or Javascript.
  • Offline storage: More space for a browser to store persistent and non-persistent data. In the past, cookies have done this, but to a much more limited extent.
  • Geolocation: This provides information on your location.
  • Canvas: An area on the webpage that allows dynamic bitmap rendering - ie. you can draw in it!

 

As with the implementation of CSS3, the new version of HTML is opening up new possibilities for users to interact with websites. The new tags for audio and video represent a huge advance for including media in websites. Support for these new tags is now comprehensive.

For the developer and client it will mean the ability to add sound and video where and when it makes sense - easily.