A Look Into HTML5 and CSS3

by Curtiss   |   last updated April 22, 2012   |   CSS Tutorials · Web News · Web Tutorials ·

I spent most of the day today in a conference session dealing with the new elements that will be coming with the future of HTML5 and CSS3, presented by Molly Holzschlag. The session was extremely informative, and we discussed some really interesting topics. In addition to our discussion on HTML5 and CSS3, we discussed quite a bit about accessibility, browser limitations, the reasons that things are the way they are (doctype declarations, for instance) and how things might be in the future.

Molly made it very clear throughout the session that she does not own a crystal ball, so she obviously can’t tell us exactly how or when the final CSS3 or HTML5 specs will be completed and approved. However, she did give us some insight into the elements that have already been implemented and the elements that are in the process of being implemented in specific browsers. In this article, I will try to give a quick overview of some of the things she mentioned. Most likely, you’ve heard of most, if not all of these. However, I just wanted to put some of them together in one place.

Another thing Molly repeated is that “implementation trumps specification.” In other words, even if the spec is not finalized until 2022 (which is the current estimated date for HTML5), that doesn’t mean we can’t start using the new features in the near future. All of the major browsers have already begun to implement some of the items proposed for HTML5, even Internet Explorer 8. However, due to the huge marketshare still held by IE6 and 7, it wouldn’t be a good idea to begin implementing too many of these features on a large production site.

HTML5

• Aside, section and article – These three elements are basically new implementations of the div.
  • The aside is intended to be a call-out, sidebar or aside from the topic-at-hand.
  • The section element is intended to break a page into multiple areas. For instance, if you happen to have two or three separate topics all included on a single page, you might want to place each topic in a separate “section.”
  • The article element will be helpful to separate different articles or summaries on a page. This will be extremely helpful for things like blogs, where multiple summaries or excerpts are all posted together on a page. Rather than using a specific class to separate the articles or posts, you will be able to simply use the article tag.
• Audio and Video – A lot of work is being done (particularly with Theora) to secure the appropriate licensing to implement OGG codecs within the browser software, making it possible to embed audio and video files in a page without requiring external plug-ins. You will do so with the audio and video tags.
• Figures – HTML5 also proposes implementing the legend tag with images, audio and video (by wrapping them in the figure tag), allowing you to easily and consistently add captions to your media files.
• Dialog – The dialog element is a new, special type of definition list (dl) intended specifically for dialog between two (or more) people. The definition term (dt) is used for the speaker’s name, while the definition item (dd) is used for the quote itself.
• Header and footer – Just as they sound, the header and footer elements are intended to represent the header and footer of your pages. These are going to be instrumental in improving accessibility, implementing a consistent method of creating headers and footers.

Form Elements

A lot of new features are also being added to HTML forms. With the HTML5 implementation, you will be able to specify which form elements are required and which are not. The browser will perform the validation without the need for any script (client-side or server-side).

Quite a few new types of form inputs are also being added, including URL and e-mail. Presumably, the browser will also perform some sort of validation on these elements, though we did not discuss that in detail.

Page Features

HTML5 also implements quite a few new interactive features on the pages themselves. Drag and drop is already implemented in some browsers, as is the ability to edit content inline (though, to actually save the edits, you will have to use script). You will also be able to hint as to whether or not the browser should use spellchecking. HTML5 also implements a “canvas” to be used to draw elements on the page and adds support for SVG (scalable vector graphics) images (which, if you are not aware, can be displayed at any size without distortion, as they are vectors).

Molly also told us that Remy Sharp is in the process of developing a javascript implementation of the HTML5 spec, so you can begin using some of the HTML5 elements even in IE6 and 7.

CSS3

CSS3 is also going to introduce all kinds of nice new features, as well. Following are some of my favorites. You can check out previews of all of these features (as well as a list of many more) by visiting CSS3.info.

• Rounded corners – CSS3 implements a new property called border-radius that allows you to easily implement rounded corners on any bordered element.
• Text shadow – You will also be able to add a drop shadow to your text using CSS. This has been implemented in Opera 10, Chrome, Safari and Firefox 3.5. However, each browser renders it slightly differently, which might be very frustrating.
• Multiple backgrounds – CSS3 will allow you to add multiple background images to a single element. This should significantly reduce the amount of wrapper and container divs that are created simply to add an extra background.
• RGBA, HSL and HSLA – CSS3 implements three new methods for declaring an element’s color. They are RGBA (red, green, blue, alpha), which allows you to specify the color in RGB and specify its opacity; HSL, which allows you to specify your color in hue, saturation and lightness; and HSLA (hue, saturation, lightness, alpha), which allows you to specify an HSL color and its opacity.
• Attribute Selectors – You will be able to use a great deal of nice attribute selectors with CSS3, including being able to select specific child nodes of an element (including the ability to implement styles on every other child – particularly useful for alternating table rows), and being able to style your form elements more easily (for instance, you can assign a specific style to any form inputs with the new “required” attribute).
• Multi-column layout – This is a huge new addition. With CSS3, you will be able to specify a specific width of columns or a specific number of columns and have your content automatically overflow properly into the columns.

You can find more information about the new HTML5 proposals and implementations at HTML5 Doctor and more information about CSS3 at CSS3 Info.