Week 16: HTML5, Javascript, CSS

Introduction

The new kids on the block are HTML 5 & CSS3 in web development which incorporates several new web features & was said to eliminate Flash elements from web pages. HTML5 is already available & even web browsers are already upgrading their technologies in order to support its features. Since not all the browsers currently support HTML5 a developer should only develop some of the elements in HTML5 or use HTML5 only for browsers which support HTML5 & use HTML4 for other browsers which don't support HTML5. The same statements apply also to CSS3.

HTML5 Features

<Figure> element - should contain an <img> tag & <figcaption> tag. the FigCaption tag should contain the caption of the image in text. The figure element allows the browser to combine the image with the caption

No more the need to use "type" with link & script tag - as the heading says, in html5 there is no more need to define the type of link or script.

ContentEditable - This nifty element property allows a visitor to edit content on the client side without the need of javascript. On an element that you need editable you should add this property: " contenteditable="true" ".

ContentEditable - This nifty element property allows a visitor to edit content on the client side without the need of javascript. On an element that you need editable you should add this property:

Email,Telephone,Search Inputs - Input field types that have been added include email, telephone & search inputs so that there is no need to validate with javascript & the form will expect the mentioned input type.

PlaceHolders - Inputs also have a placeholder property that will allow you to set a sort of default value & when the input is focused it is cleared. The reason for placeholders is to help the user with what he should input.

<Header> & <Footer> Elements - No more using divs with Id's to identify sections in the web page. These tags can be used to encapsulate all the content you want to put in.

Require Attribute -  Form elements can also have a required attribute to imply that the field is required by the in-putter.

AutoFocus - Form fields can now have this attribute so that they focus immediately as the page loads without the need for javascript.

Audio Support - There's no more the need for third party plugins in order to incorporate audio files in web pages, with the<audio> tag you can include audio files.

Video Support - As with Audio support, to insert video in your web page, you just need to use an <src> tag inside a <video> tag which allows your web page to show a video without the need of javascript or Flash.

Video Preload -  When defining preload on a video tag, the video is first loaded & then played eliminated the buffer. It just loads and plays.

Input Regex -  You can define a regex in a pattern property so that the form can validate the input by itself.

Canvas Element -  The canvas element allows the developer to setup a place where visitors can dynamically create or edit 2D & 3D graphics. 

Some web apps that use canvas & Html5 are:

• http://clublime.com/lab/html5/sphere/
• http://mugtug.com/sketchpad/
• http://www.themaninblue.com/experiment/Cubescape/new.php

CSS3 Features

• Border-radius - Allows the designer to create rounded corners on html elements using only Css.
• Border-Image - Accepts a link to an image which is used as background for the border.
• Box-shadow - Implements a shadow on an HTML element
• Multiple backgrounds - As the heading describes, Using CSS3 a web page can have multiple backgrounds not just one.
• Text-shadow - Implements a shadow on text.
• Attribute Selectors - Can be used to select elements with all types of attributes ex. div['type' = 'hello']
• :nth-child() and :nth-of-type() pseudo selectors - Can directly select a child by a number or a type by a number. The number is the sequence of occurrence of that particular tag.

Browser Support

	Safari 4(Win)	Firefox 3.5(Win)	Google Chrome(Win)	Opera 10 (Win)	Internet Explorer 6, 7 & 8
@font-face	Yes	Yes	No	Yes	Yes
HTML5 Audio	Yes	Yes	Yes	No	No
Hsla()	Yes	Yes	Yes	Yes	No
box-shadow	Yes	Yes	Yes	No	No
Css Animations	Yes	No	Yes	No	No
Css Reflections	Yes	No	Yes	No	No
Css Transitions	Yes	No	Yes	No	No
Canvas	Yes	Yes	Yes	Yes	No
HTML 5 Video	Yes	Yes	Yes	No	No
border-image	Yes	Yes	Yes	No	No
Multiple Backgrounds	Yes	No	Yes	No	No
Css Columns	Yes	Yes	Yes	No	No
Css 2D Transforms	Yes	Yes	Yes	No	No
GeoLocation API	No	Yes	No	No	No
Canvas Text	Yes	Yes	Yes	No	No
rgba()	Yes	Yes	Yes	Yes	No
border-radius	Yes	Yes	Yes	No	No
opacity	Yes	Yes	Yes	Yes	No
Css Gradients	Yes	No	Yes	No	No
Css 3D Transforms	Yes	No	Yes	No	No

Conclusion
After using it, I conclude that HTML5 & CSS3 facilitates the life of the web developer since it eliminates all the boring & repetitive stuff that has to be coded over & over again. That said, I wouldn't recommend to develop a Fully equipped HTML5 website because not all browsers support the features of HTML5 & CSS3 and this could lead to reduced market share for your website.