Understanding HTML5 and CSS3
For the past year or so, companies that use the internet for sales, products, or services are aglow with conversations of HTML5 and CSS3 and how it will save the world! Well, it will certainly help your browsing experience be more useful and be a little less work for coders, but it takes content to save the world.
HTML5 is still going through standardization as there are so many browsers and devices, the W3C (World Wide Web Consortium – the group who helps make standard for the internet) is still tweaking HTML5 definitions. For now, HTML4 remains the current standard of internet pages, standardized in 1997. HTML5 has been in the works since 2004, and the W3C hopes to have it released in 2012. There is a lot to this to be sure!
First, let’s look at some of the key benefits of HTML5 compared to HTML4. Since most of the inner-workings of HTML code is just Greek to most folks, we won’t delve into the specifics of each of the new elements added to HTML5, but here is the list some of them:
article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, and wbr
If you have ever worked with a blog such as WordPress or Blogger, you may recognize some of the page elements above that you are familiar with.
Of all the new elements that are listed above, some of the most talked about are these:
- article – an independent piece of content in a document
- audio and video are less dependent, sometimes not dependent, on plug-ins to play multi-media content in HTML5
- footer, header, and nav – all the regions of a page typically coded in most sites, but especially in blog sites
There are also many new APIs for HTML5 that were not part of HTML4 making using, playing, watching, and interacting with web content a little easier for web servers, computers, and users alike.
Many new mobile devices such as the Apple iPad are using HTML5, as are other desktop browsers, but none fully utilize HTML5 – yet. Currently the top contenders for the use of HTML5 according to HTML 5 Test website are the following (scores indicated out of a possible of 400 points each):
- Google Chrome v10.0.648 – 288 points
- Opera v11.10 – 258 points
- Mozilla Firefox v4.0 – 255 points
- Apple Safari v5.0.3 – 228 points
- Microsoft Internet Explorer v9 – 130 points
Browsers are working hard to adopt these new standards, and often standards change as challenges for global implementation arise.
While you have been able to add rounded corners, drop-shadows, and gradients to pages with CSS for some time, some of the most prominent browsers (cough, cough, IE) have not provided support for many ‘standard’ CSS rules. So developers often have to write separate style rules for specific browsers. Been there, done that, don’t want more of it!
In addition to rounded corners on an HTML page, CSS can now rotate content, it can change the opacity of a page element with RGBA (RGB for colors: RED, GREEN, and BLUE, and A for “alpha” or transparency). So you don’t have to use a semi-opaque PNG file to fill a DIV, but you can just say ‘make this DIV 50% transparent’. SO much easier!
Below is a screen capture from CSS3PIE. They offer tools to allow Internet Explorer to support standards-based applications of CSS. Normally getting IE to render CSS consistent with other browsers is a wash.
The sample below shows some cool CSS3 style examples you might like using on your own site! Note the redundancies in the CSS code below the sample. You’ll see how browsers ‘see’ the styles are NOT the same (click image for a larger view)…
- BORDER-RADIUS: is the new CSS3 definition for HTML5 documents to display rounded corners on DIVs.
- WEBKIT-BORDER-RADIUS: is now Apple’s Safari browser and Google Chrome recognize rounded corners.
- MOZ-BORDER-RADIUS: tells Mozilla and Gecko how to display rounded corners
So as you see, making all browsers play the same game with HTML and CSS styles could really improve our lives, both in time saved making pages online, and time reduced viewing content. But it may not save the world…