HTML5 & CSS3 – What You Should Know

SPONSORS

HTML5 & CSS3 – What You Should Know

written by Maria A

Apr 10, 2011
tags: css tutorials, web design
5 Comments

HTML5, in conjunction with CSS3, will be a major alteration of how web pages are built once it is fully implemented. HTML4 was originally released in 1999 after only two years of work. There have been some minor adaptations since then, but the full upgrade to HTML5 has been “in committee” since 2001. The predicted finalization date was, at one point, extended as far out as 2022. That estimate has since been adjusted and the final release date is now believed to be sometime in 2014. As always, the biggest factor in the delays has been Microsoft. The behemoth simply doesn’t make quick adjustments. For years, they didn’t seem to be making any effort to adapt IE for using HTML5. Presently, they are working toward it and IE 9 can use some of the new features.

The recent conflicts over Flash and the iOS have emphasized the necessity of new standards for anyone working on mobile platforms. Developers of iPhone and iPad applications desperately need an alternative to Flash. Even with its many problems, users have become accustomed to seeing Flash features on the web and are unhappy without it. HTML5 and CSS3 together will not only resolve this issue, they will also be compatible with most mobile platforms, making it easier to create new applications for other kinds of mobile devices.

Although some features of the intricate system are not yet generally accepted across browser platforms, developers and designers are implementing them as quickly as it is practical. You can start using the available elements now to add some really great features to your code without third party applications.

Because HTML5 is built on the HTML4 foundation, learning to use the new version will not require revising every facet of how your pages are built. Many features will carry over and some have even been simplified enough to make using them now a real advantage. In fact, many of the older versions of your code can stay in place while the new features are in the process of being implemented. New features that are ready to use now can make early adaptation an advantage. Installing alterations a few at a time, as browser developers get their apps updated will be much simpler than trying to do everything at once after the standards are completed. While the updated or added features in HTML5 and CSS3 are too numerous to list here, some of the things many people are excited about are:

HTML5 Features

The audiovisual support of HTML5 is not fully there yet, but it promises to be superior. Once it becomes completely operational, you will no longer need third party plugins to stream audio and video on your websites.

The canvas element that was first developed by Apple is being included. Both Safari and Firefox already support this one. It will allow you to create your flat graphics directly within the code using the Draw function.

The DOCTYPE declaration that previously required something like “<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>“, is now a simple “<!DOCTYPE html>” tag.

An application cache feature will allow you to use web applications while offline. You create a cache manifest file on your web server. This list of all the resources you need to work offline is accessed by your application through the manifest element of the html tag, “<html manifest=”/cache.manifest”>” and an AddType directive in the .htaccess file of your root web directory: AddType text/cache-manifest .manifest. (Note: this is the syntax for an Apache server. If you use a different server find the “Content-Type header”parameters in your server’s documentation.)

Using the nav element to surround your menu elements will allow easy CSS3 configuration. Simply use a nav tag before your list of menu items, then an end nav immediately after it and add a nav tag element to your CSS3:
```
nav ul {
margin: 0 auto;
width: 940px;
list-style: none;
}
```

CSS3 also has many other cool new features that work in conjunction with HTML5 to make the designer/developer’s life easier. It has, however, been divided into modules with varying degrees of completion. Some have reached the completion stage while others are still working their way through the system. There are many layout and text formatting features ready for use and exciting potential features still to come. Like with HTML5, there are some cross browser compatibility issues and, here too, IE is lagging behind.

CSS3 Features

Creating rounded corners is greatly simplified. Instead of using images, CSS3 handles it with a div tag and a border-radius element. At the moment, this also requires some specialization for different browsers:
```
div {
border: 2px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px;
}
```

Overlaying backgrounds can be set up with this simple addition to the body tag:

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

Easily put drop shadows behind text within the font header tag.
```
h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}
```

Another exciting feature is the ability to let the main content slide under a footer or sidebar or create a 3D effect with a simple Box-shadow element.
```
.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}
```

Styling multiple columns still requires some work for use in current browsers, but it will get simpler as they adapt. Once that happens, it will only need two elements:
```
.blogPost div {
column-count: 3;
column-gap: 22px;
}
```

Current Concerns

The main problem, at the moment, is cross browser compatibility. Many of the features of HTML5 and CSS3 are already available for use, but the major browsers aren’t completely ready to render them as yet. Recently released Firefox 4 gets high marks. Opera 9.5 does better than IE 8 and 9, but it still has significant gaps in both HTML5 and CSS3. The major browsers are getting up to speed and some other browsers that are based on WebKit technology, such as Safari, Chrome and Kindle, can already support most of the new features.

Although many people are excited about an alternative to Flash for iOS devices, HTML5 is not ready yet to replace Flash for audio/video playing or animations in regular browser pages. While they are headed in that direction, they still have a lot of work to do in that area.

Main Advantages

HTML5 is founded on previous versions meaning the old code will be able to continue functioning while adaptations are made to accommodate new features.

Because it implements WebSockets, HTML5 is expected to load much faster than its predecessors.

HTML5 will make writing applications for mobile devices much easier because it will be cross platform compatible as well as cross browser compatible.

A combination of HTML5 and CSS3 will make building websites much easier even while it gives you more flexibility.

Once the audio/video features are finalized, third party software for handling audio/video files will no longer be necessary. They will, instead, be added directly into the code.

Even IE is finally moving into the 21st century of web design. As HTML5 and CSS3 are rolled out over the next couple of years, you will find the new ways of building websites much more efficient. JavaScript snippets to scale background images and handle other page formatting issues will no longer be necessary. There’s no telling what fantastic new options we can learn to use with all that extra time on our hands. In the meanwhile, there’s a lot of code out there that will need to be updated. Getting a head start now by implementing the new features as they become available is a great way to make all your websites work faster and more efficiently. There are several sites available with HTML5 and CSS3 guides and tutorials. Visit one today to get started learning about all the great new features.

Authored by Maria A

Maria is the Product Marketing Specialist for InMotion Hosting, one of the top dedicated server providers in North America. She is one of the writers for WebHostingHelpGuy, InMotion Hosting's blog that is filled with a plethora of useful web design/development pointers and tutorials. You can follow her on Twitter @WHHG_InMotion.

Enjoyed this story?

Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

FOR FURTHER READING:

Useful CSS3 Tutorials and Techniques

The Fashion Runway and Web Design

Typography Design Inspiration – 30 Stunning Examples

20 Websites Using Infographics

15 CSS Frameworks for Responsive Web Design

Showcase of Web Designs with Delicious Typography

5 Comments

ADD COMMENT

clipping path says:
April 11, 2011

Thanks a lot for sharing this nice post!
You’ve done really excellent job!
Thanks.
Chiranjeeb says:
April 11, 2011

Nice article to clear all most of the doubts for HTML5 and CSS3. I’m looking forward to read more in depth articles on the same :) .
Thanks Maria for the info.
Brian Flores says:
April 11, 2011

Nice Job, Maria! Great pointers and examples. Definitely Retweeting this!
designi1 says:
April 12, 2011

you could had talk about the transitions: transition: all .1s ease-out; its a pretty cool thing and would really wide the talk to the animated sites. To see that the html5 and JS more and more will be a good solution for short transitions and small animations giving to the web site a great feel of interactivity.
designi1 says:
April 12, 2011

All in all, forgot mention, im so rude, the article is really good! Thanks M.

WEBEXPEDITION18 Never Stop The Exploring