Introduction
HTML5 is the successor to HTML4 which came out way back in 1999. Back then the internet was a very different place where notions such as web applications, e-commerce and social networking were yet unheard of. The web has changed a lot since then but the fundamental technology used to build it hasn't, and over the years its limitations were becoming ever more apparent where web designers were stretching HTML to its absolute limits, hacking it into submission. Thankfully, in 2006, the Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C) - both of which were working on separate specifications - decided to cooperate to create HTML5. The principles behind HTML5 (as stated on w3schools.com) are:
- New features should be based on HTML, CSS, DOM and Javascript
- Reduce the need for external plugins such as flash
- Better error handling
- More markup to replace scripting
- HTML5 should be device independent
- The development process should be visible to the public
Implementing HTML5
HTML5 is still a work in progress but W3C have announced that it will be complete by 2014. Since HTML5 is not yet an official standard, no browser has full HTML5 support, however, most major browsers continue to add support for HTML5 with every release. This means that we can (and are encouraged to) start using HTML5 features today. HTML5 builds on the previous specification so drastic changes to existing markup is not required to start using some of the new features. HTML5 markup also makes websites more search engine friendly, can help improve accessibility and given that all the major browsers largely support the syntax, the business cost for adopting HTML5 is almost negligible.
So, What's new in HTML5?
HTML5 is loaded with new features aimed at improving user experience over the web. It's a collection of various small improvements that collectively help web designers create something special. Here are some the most noticeable features in HTML5:- A <canvas> element that allows for dynamic rendering of 2D shapes and images on web pages
- Content specific elements (such as header and article) to improve web page semantics
- Support for audio and video playback
- New form controls for better input validation
- Improved support for local storage (based on databases rather than cookies)
One of my favorite has to be the set of new form controls. In contrast to HTML4 where we had the generic textbox, HTML5 gives us input controls for: email, URLs, numbers, ranges, dates, search boxes, even colour! These controls will drastically improve the way user input is currently validated. Client-side input validation in HTML4 was always a headache and in most cases only cosmetic since it was largely based on javascript which could be disabled at any time by the end user. With these new controls however, these basic validations will be carried out by the browser itself, which means less javascript and more robustness. This is not to say that we can do without server-side validation, far from it, but at least we are spared the cumbersome client-side equivalents. Browser support for these new input types varies, however they can still be used since they will behave as normal text-boxes if they are not supported, which is brilliant. That's the main thing about HTML5. We do not need to wait for an official release date to start using HTML5 features, indeed there won't be such a date. HTML5 is with us today, browser support is growing steadily so failing to embrace the new specification today, simply means being left behind.
What about Visuals? - Enter CSS 3
Cascading Style Sheets (CSS) are an integral part of web development adding layout and style to our HTML pages. Way back in my very first post(s) I discussed CSS at length, highlighting how it can help us de-couple our web page content from its layout. The current specification of CSS (2.1) is powerful but CSS 3 takes that power to a completely new level. Just like HTML5, CSS 3 builds on its predecessor and is still under development by the W3C, however modern browsers already support most of the new properties introduced in CSS 3. This means that we can start using CSS 3 today, just as we can HTML5. There is one catch though. Until CSS 3 specification is finalised, browsers are allowed to interpret a property any way they see fit. These kind of properties are usually prefixed with a namespace (such as -moz- or -webkit-) to indicate that they are not yet standard. To explain this better, let's take the new "border-radius" property as an example.
CSS 3 supports adding rounded corners to objects, something which was previously only (painstakingly) possible using images. Suppose we wanted to add a border with rounded corners to every "<div>" element on our website. Here's what the CSS 3 style rule would look like:
CSS 3 supports adding rounded corners to objects, something which was previously only (painstakingly) possible using images. Suppose we wanted to add a border with rounded corners to every "<div>" element on our website. Here's what the CSS 3 style rule would look like:
div {
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
The first line in the rule simply sets a solid black border around our "<div>" element. The next 3 lines all state that the border should have rounded corners, each 5 pixels in radius. Why do we have 3 lines that seemingly state the same thing? "border-radius" is the proper name of this new CSS 3 property and this is the name that will stick once the CSS 3 specification is finalised. "-moz-border-radius" is the Mozilla (Firefox) team's interpretation of how the property should be implemented, while the "-webkit-border-radius-" property is the Webkit (Safari, Chrome) team's interpretation. It is important to note that the proper name of the property should always be defined after it's 'non-standard' counterparts such that it is the one that takes precedence. This will ensure that your stylesheet is forward-compatible i.e. newer browsers that support the standard property will in fact apply the standard one as it always takes precedence, without you having to constantly update your stylesheet. Furthermore, older browsers can still apply the non-standard version of the property as they have no knowledge of the standard name! As a matter of fact, at the time of writing, all the latest versions of the major browsers including Internet Explorer, Chrome, Safari and Opera, now support the standard version of "border-radius". However, if you want to test this behavior out, try the "border-image" property.
Here's a list of the most common prefixes for CSS 3 properties which are not yet standard:
| Prefix | Browser |
|---|---|
| -ms- | Internet Explorer 9 |
| -moz- | Firefox |
| -webkit- | Safari, Chrome |
| -o- | Opera |
Other Features
There's lots more to CSS 3 than fancy borders, much more in fact. Here are some of the more exciting features of CSS 3:- Fonts - you can now use any font you like on your webpage rather than sticking to web-safe fonts;
- 2D and 3D Transformations;
- Transitions; and
- Animations
Fonts
How many times have you resorted to images just so that you could use a particular font for your website logo or headings, sacrificing flexibility for looks. With CSS 3 this is no longer an issue, simply upload your chosen font to your website and it will be automatically downloaded as required. Now you can have the looks, the flexibility and better accessibility on your website, neat.
Transformations
In CSS 3 we can apply 2D and 3D transformations to any element on our web page including:
- Translation (move)
- Rotation
- Scaling (re-sizing)
- Skewing
- Matrix (any combination of the above)
At the moment, 2D transformations enjoy more browser support than 3D transformations. In fact, at the time of writing, all major browsers support 2D transformations while only Safari and Chrome have support for 3D transformations. Here are some examples followed by the CSS 3 styles used:
 |
| Examples of CSS 3 2D Transformations (as viewed in Google Chrome) |
div{
background-color:#F5F5F5;
border:solid 1px black;
width:100px;
height:100px;
margin:30px;
float:left;
text-align:center;
font-family:arial;
line-height:30px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow: 5px 5px 12px cyan;
-moz-box-shadow: 5px 5px 12px cyan;
box-shadow: 5px 5px 12px cyan;
}
.rotate{
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.scale {
-ms-transform:scale(1.5,1.5):
-moz-transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
-0-transform-scale(1.5,1.5);
transform:scale(1.5,1.5);
}
.skew {
-ms-transform:skew(20deg, 15deg);
-moz-transform:skew(20deg, 15deg);
-webkit-transform:skew(20deg, 15deg);
-o-transform:skew(20deg, 15deg);
transform:skew(20deg, 15deg);
}
All three <div> elements in this example have the same basic style: i00 pixels square, have a light grey background and a thin black border. I also added the new CSS 3 properties "border-radius" and "box-shadow". "Border-radius" we've already seen, "box-shadow" on the other hand is another border-related CSS 3 property that creates a drop-shadow around your elements by specifying X and Y offsets (how far you want the shadow to 'drop') and shadow distance - how soft/precise it is.Each of the <div> elements however implements a different class according to the desired transformation. The rotate transformation rotates the element around its centre by the specified number of degrees. The scale transformation takes two parameters one for the width and another for the height. In this case the div is enlarged by a factor of 1.5 along both axis. Similarly the skew transformation takes two angles as parameters (for the x-axis and y-axis) and skews the object accordingly.
3D transformations work in a similar way, this time taking parameters across three dimensions, (X, Y and Z). You could also specify perspective properties and transformation origin in 3D transformations. However, I want to turn my attention to one of my personal favorites: Animation.
CSS 3 Animation
Until recently, the only way to add animations to your website was by using animated gifs or plugins such as Flash. If you were really brave you could also animate using javascript - not for the feint hearted. This led to all sorts of inconveniences such as lack of flexibility, accessibility and compatibility. Now we can add animations to our website "natively" using CSS 3. Let's take a simple example, try hovering over any of the columns below using Chrome or Safari:Whenever the mouse hovers over any one of the columns, the column expands for a short period of time and goes back to its original size. This effect is created using CSS 3 keyframe animation which is currently only supported by webkit browsers. Here's how it's done:
a.anim{
display:block;
text-decoration:none;
width:150px;
height:120px;
padding-top:80px;
text-align:center;
margin:1px;
background:url(http://www.w3.org/html/logo/downloads/HTML5_Logo_64.png) no-repeat #F5F5F5 50% 10px;
border:solid 1px black;
float:left;
}
a:hover{
/* Animate */
-webkit-animation-name:grow;
-webkit-animation-duration: .4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
/* Forward Compatibility */
animation-name:grow;
animation-duration: .4s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
/* Define the Animation */
@-webkit-keyframes grow {
0% {-webkit-transform: scale(1,1);}
50% {-webkit-transform: scale(1.2, 1.2);}
100% {-webkit-transform: scale(1, 1);}
@keyframes grow { /* forward compatibility */
0% {transform: scale(1,1);}
50% {transform: scale(1.2, 1.2);}
100% {transform: scale(1, 1);}
}
Ok, so our three columns are in fact three anchor elements styled to look like columns, nothing new here. The animation is triggered by the "a:hover" selector where we specify:
- The name of the animation to trigger: "grow" in this case;
- How long the animation should take;
- How many times the animation should run: once in this case
- The timing/easing function which adds a more organic feel to the animation
Easing adds smoothness to our animation. In this case the easing function is set to "ease-in-out" which means that the animation start slowly, accelerate towards the middle and slow down again at the end. The final part is the animation definition itself which is based on three keyframes. Each keyframe applies a scale transformation to change the size of the object being animated over time. Animations must have at least two keyframes, one for the begining (0% or 'from') and one for the end (100% or 'to'), but you can have as many keyframes as you like between these two. In this case the animation is pretty simple so one additional keyframe set at the middle of the animation (50%) is enough to get the desired effect. Of course you could add all sorts of effects to your animation such as changing colours, borders, shadows... you name it.
Summing Up
Presenting all there is to know about HTML5 and CSS 3 in a single blog post is a ridiculous proposition, the subject is as vast as it is exciting - and it's still evolving. What strikes me the most is the fact that HTML5 and CSS 3 bring so much to web development and asks very little in return in terms of learning effort. If you know HTML you know HTML5, same goes for CSS 3. They are not new technologies but rather extensions to what we're already used to, and yet they bring so much more (power) to the table. I've never experienced anything like it with any other language I've used so far. The fact that all the major players in the software industry including Apple, Google and more recently Microsoft, have committed themselves to HTML5 is further testament to its significance to web development and beyond.
Subscribe to email feed
