CSS3 Borders and HTML5 Sections

Mar 8, 2010
Episode 15
Jim and Nick are back in the studio, exploring new border properties in CSS3 and breaking down a few of the two dozen new HTML5 tags, starting with sections, article, asides, headers, and footers.
Spotlight

Thanks to those who make Doctype possible!

CSS3 Borders

Borders work best when they're used to reveal the visual structure of a web page. When you make good use of borders, you end up with a crisp, well defined layout. Just use them sparingly, so you don't end up with the whole "box-within-a-box-within-box" look. Now, let's take a look at some of the new additions to borders in CSS3.

Border Radius

In Mozilla, we use -moz-border-radius and in webkit we use -webkit-border-radius. After the property, type in a value in pixels or ems. The higher you set the value, the more curvy the corners will be. If you set the border radius on a square element to a really high value, you can make the curved corners touch one another, which makes the element look like a circle.

You can also set curves on individual corners. Let's try setting the border radius on two corners that are opposite one another, to create a teardrop effect. This is where the syntax in mozilla and webkit differs.

In mozilla, use -moz-border-radius-topleft and -moz-border-radius-bottomright. In webkit, we use -webkit-border-top-left-radius and -webkit-border-bottom-right-radius. Then, just apply the values to each property. Based on these properties, you can probably guess what the syntax looks like for the other two corners.

Border Image

In Mozilla, use -moz-border-image and in webkit use -webkit-border-image. The first part is just the path to the image. The next four values are the top right bottom and left pixel widths of the border. So for example, if I wanted the left part of the border to be 5 pixels wide, it would use the left most 5 pixels of the source image.

Lastly, you can stretch the width and height of the image across the whole element by typing stretch stretch, or, you can repeat the pattern by typing round round.

Box Shadow

In mozilla, we use -moz-box-shadow and in webkit we use webkit-box-shadow. The first argument is the x offset for the shadow. A positive value will push it to the right and a negative value will push it to the left. The second argument is the y offset. Positive is down, and negative is up. The next argument is the blur radius. The higher the value, the fuzzier the shadow will become. And lastly, there's the color. You could use a hexadecimal color here, but I recommend using the RGBA function. That way, you can set a color and then dial down the opacity to make the shadow blend in with the background. The tends to produce more realistic results.

Resources

HTML5 Tags

HTML 5 brings us a lot more than a fancy new doctype and a bunch of cool new technologies like video, audio, and canvas, it also brings us a lot of new tags that allow us to mark up our pages in much more meaningful ways.

While we can use most of these tags with little effort in our current browsers, currently, they don’t seem to offer much visual distinction from our more common tags. What they do offer us is more semantic meaning, so that someone looking at the source of a page, or a computer reading the page can get more of an idea about what each piece of content is, in relationship to the document.

Also, it lets us style using fewer classes, and presumably in future browsers, the new tags will introduce default styles for the tags, which will help the readers of our page understand the meaning as well.

Doctype

Now, the first thing you want you want to do when you want to use these new elements is to include the HTML5 doctype. This one is real easy:

<!DOCTYPE html>
Section/Article/Aside

Since tables have fallen out of style for layout, divs have largely taken their place. This is fine, but leads to div-itis, a deep nesting of divs for both content and layout. It is difficult to discern divs that encapsulate an article or section, from those that are strictly for layout.

<section>

This is where <section>s come in. A section is used to denote that this content is a distinct section of a page. For instance the chapters of a book, or any other grouped information. Typically, a section will start with a heading, but it is not required.

<aƓrticle>

A more specific type of section is an <article>, like a section it denotes a part of a page with the same theme, but the difference is an article could be useful by itself, outside of the page. For example in syndication. Examples uses of <article>s include blog posts, comments, widgets, or forum posts.

Articles can be inside of sections, and sections can be inside of articles. Articles can even be inside of other articles. Don’t just replace all of your divs with sections and articles. If a div is there to provide assistance in styling, or simply doesn’t encapsulate a single unit of information, leave it as a div. That’s why they’re there.

<aside>

Asides are useful for information that are tangential to the content around it, that is it is interesting, but not crucial to the main content. Typically these would be represented by sidebars, or pullquotes. They shouldn’t be used for parenthetical information, as that is still usually relevant to the content

The <header> and <footer> elements offer us a way to denote content that is not the main content of the page. It’s pretty easy to guess what the top level header and footer areas are in a page. You probably already have divs with the class or id of header and footer.

Besides the top lever header and footer, other parts of the page may also include headers and footers, typically sections and articles. For instance in a blog index, each post might be an <article> with a <header> wrapped around the title, and a <footer> wrapped around the comment link, permalink, and meta info.

The <nav> element represents a section of the page with links to other pages, or sections of the page. Not all groups of links are appropriate for the nav, usually just the major navigation blocks.

More Info

One quick note is that since most browsers will parse these tags fine today. IE needs a little help. Before it can read these new tags, each one of the tags must be generated at least once programmatically in javascript. Weird, but it’s IE. Fortunately there is a script called the HTML5 Shiv that will allow you to use these and other tags easily in IE.

Also, browsers don’t have any real default styling on these elements, so it is best to be really specific. For instance some browsers may render elements as block, and others inline. If it looks wrong, try adding display:block or display:inline to the tag you are using.

Now there are a couple dozen other new tags introduced in HTML 5 including the video, audio, canvas tags, and other semantic tags. We will definitely be covering these in future episodes of doctype.

Resources