HTML

<meter min="0" max="100" value="60" title="percentage"><span class="outer"><span class="inner">60%</span></span></meter>

CSS

.outer {
  display: block;
  width: 80px;
  height: 15px;
  background: #e5e5e5;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #e5e5e5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e5e5e5));
  background: linear-gradient(top, #FFFFFF 0%, #e5e5e5 100%);
}

.inner {
  display: block;
  width: 60%;
  height: 15px;
  background: #3893E2;
  background: -moz-linear-gradient(top, #7FE9FF 0%, #3893E2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7FE9FF), color-stop(100%,#3893E2));
  background: linear-gradient(top, #7FE9FF 0%, #3893E2 100%);
  text-indent: -99999px;
}

サンプル

判りやすいように、対応しているブラウザではブラウザごとのインターフェイスに（Chrome8, Opera11 だと緑のバー）、非対応ブラウザでは青いバーが出るように（Firefox3.6, IE6,7,8, iPhone Safari (iOS4.2) で確認）なっています。
（モニタによっては、メーターの幅を示す灰色のグラデーションが見えづらいかもしれません）

解説

特に難しい事はしていません。
単純にmeter要素の中のテキストを二重に囲って、それぞれにスタイルを当てているだけです。

浅漬けCSS的なもの

/* html5 reset css */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, q, pre, table, caption, colgroup, col, tbody, thead, tfoot, tr, th, td, ul, ol, li, dl, dt, dd, form, fieldset, legend, label, span, a, img, em, ins, del, cite, abbr, sup, sub, dfn, code, var, samp, kbd, object, script, noscript, style, iframe, embed, param, map, area,
menu, hr, address, small, strong, i, b,
article, aside, figure, footer, header, hgroup, nav, section, figcaption, time, video, audio, mark, ruby, rt, rp, bdo, source, canvas, details, summary, command,
datalist, keygen, output, progress, meter {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

address, article, aside, figure, figcaption, footer, header, hgroup, hr, legend, menu, nav,  section, summary {
  display: block;
}

li {
  list-style-type: none;
}

a img {
  border: none;
}

img {
  vertical-align: bottom;
}

[hidden] {
  display: none;
}

その他・用意しておくと便利そうな指定もの

* {
  word-wrap: break-word;
}

body {
  line-height: 1.5;
  letter-spacing: 0.03em;
  background: #fff;
  color: #333;
}

a:link {}
a:visited {}
a:hover {}
a:active {}

label { 
  cursor: pointer;
}

mark {
  background-color: #ff9;
  color: #000;
}



/* clearfix
:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
*/

body要素に指定した色などは、適宜書き換えます。

scope属性のメリット

ここまでをまとめると、scoped属性の嬉しい点は二つあります。

1. スコープを持てる
2. フローコンテンツが期待できる場所に書ける

この内、スコープに関しては、2010年6月現在で実装はないようです。

もう一つのメリット、フローコンテンツが期待できる場所（フローコンテンツが書ける場所）に書ける事が地味に便利な予感がしていて、例えばブログの記事内でちょっとしたサンプルを載せたい時なんかに使えるんじゃないかなと。 ただ、スコープの実装がない内には他の要素にまでスタイルが当たってしまう恐れがあるので、次のようにすると良いんじゃないかなとか。

scope属性をサポートしない環境へのフォールバック

  <p>example text</p>     <!-- 赤くならない -->
<section id="entryExample">
  <style scoped="scoped">
  #entryExample p {
    color: red;
  }
  </style>
  <h1>example title</h1>
  <p>example text</p>     <!-- 赤くなる -->
</section>

HTML5のタグの省略

件のlivedoor IRCのページもHTML5なのですが、デザインに合わせてソースコードもシンプルにしてみました。
HTML5では、仕様書でタグの省略について決められているので、それを参考にしました。

body開始タグの省略について

で、省略して良いのか最後まで迷ったのが、body開始タグです。仕様書の該当部分には次のように書かれています。

A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.

･･･まあちょっと、ぶっちゃけ英語は苦手なんでアレなんですが、何とか読み解いた感じで、次の三つがbody開始タグを省略できる条件かなと。

• body要素が空の場合
• body要素内に登場する最初のものが空白文字・コメント以外の場合
• body要素内の最初の物がscript またはstyleの場合（「ではない」場合？）

一つめと二つめは分かりやすいんですが、ちょっと引っかかるのが三つめです。

と言うわけで、「三つめの条件はscoped属性を持っている事が前提に書かれているのではないか？」 という疑問と、僕の英語力の拙さが相まって、現在の所はbody開始タグを省略していないのです。