Weblogs: Web Standards

Patrick covers structured and semantic XHTML in his presentation. I've been fortunate enough to attend one of Patrick's courses in April, and the material is largely the same. Rather than blog the entire session (and my battery was running a little low), I made some hand-written notes that I found interesting - above and beyond just learning XHTML. Slides available online.

Its obvious that Patrick knows his stuff, his own website, htmldog.com is an often cited resource when people are looking for an easy to understand guides and references to HTML and CSS.

Internet Explorer doesn't support abbr, it provides no title tool-tip when the text receives focus, acroynm works.

Some of the lesser used elements are samp for sample output, kbd for keyboard input, var for code variables.

For editiorial changes, HTML provides del to identify deletions, and ins to identify insertions of text.

Using dfn (define) the title attribute defines the word.

Accesskeys are great in principle, but awkward in practice.

Safe relative font-sizing

Because of font-sizing problems in some browsers, the safest way to use relative font sizing is to specify a percentage-based size in the body style, and then use em sizes for everything else:

 body {
  font: 80%/1.6 Arial, Helvetica, sans-serif;
 }
 
 h1 {
  font-size: 1.5em;
 }

Owen Briggs, on the noodle incident website has done extensive reasearch and testing of font-sizes and issues relating to font-sizes.

Lists are fashionable in webstandards. They are a useful structure for most commonly occurring website components, for example navigation items.

Laying out a website in CSS requires a different mindset to the old tables-based method. CSS layouts are not more difficult than tables.

An idea I haven't seen before

Using a big left border to create space for a navigation bar:

 #content {
  border-left: 156px;
 }

A menu can be absolutely positioned on the stripe created by the border. And that solves the perennial problem of the left hand menu colour block never extending to the length of the content. However the length is determined by the length of the main content, so as long as the main content is longer than the left hand menu, the technique will work.

Styling tables with CSS

So simple, and now modern browsers support it very well. Before trying to style a table, including the borders, set the following property on the table element:

 table {
  border-collapse: collapse; 
 }

Definition lists are an obvious structure for marking up forms.

Specificity

• Element Selectors: 1
• Class Selectors: 10
• Id Selectors: 100

Give the above points to each part of a selector, then add them up. The bigger the number, the higher the priority of the style rule. Although, using 10 class selectors is not more important than 1 id selector.

---

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]