先日Adobeがモバイルブラウザ向け Flash の開発を終了する事を発表しました。

今後モバイルブラウザ向け Flashに関してはサポートのみの対応になります。

ご存知の方も多いと思いますがアップル社が提供するiOS(iPhone、iPod、iPad)は発表の段階からFlashは対応していません。

理由としてはApple社はWebに関連する全ての標準はオープンであるべきと言う考えがあり、FlashはAdobeが価格や機能強化などをコントロールしているのでAdobe単独の製品である事や、開発のスピードをどちらかに合わせないといけない点、動画をソフトウエアでデコードすると消費電力が大きくなるのでモバイル端末には適していない事などが挙げられます。

一方、iPhoneには見れないFlashを見れるスマートフォンと言う事で注目が集まったAndroidはどうなるのか？

やはりiOSと同じくAdobe AIRとHTML5へ注力していくことになりそうです。

こうなるとiPhoneとAndroidの差別化が難しくなってきます。

HTML5は今までのHTMLとは違い、専用のソフトウェアを使わずにビデオやオーディオの再生が可能になり、HTML5の対応しているブラウザであればプレーヤーなどをインストールせずに動画や音楽を楽しむ事ができます。

今後PC向けのFlashの開発は続けられるとの事ですが、モバイルブラウザ向けFlashの開発を終了した事から見てもFlashからHTML5への移行は避けられません。

HTML5自体まだ対応しているブラウザが少ないので今すぐFlashが無くなる事はないですが、開発が進むにつれ世の中からFlashが無くなることも近い将来あるかもしれません。

これからのHTML5の開発に注目します。

ソースは、こちらのAdobeのサイトから。

Posted by Date

HTML5の盛り上がりよりも、WPの方が盛り上がる社内ですが個人的に最近ちょっと気になる事がありました。

ソース元は、「Web Design Trends in 2011」です。

2011年のWEBデザインのトレンド！というタイトルの今年の初めに書かれた記事です。

その中の5番目「5. Designing for Touch Screens, Not Mice」です。

hoverを使いメニューがちょっとした挙動を起こしすのをCSSで組んだりしていますが、ここで指摘がある通り

However, there’s no hovering in touchscreen.

タッチスクリーンには、hoverの概念が無いんです。

要するにiphoneの様なやつですよね。

わたし自身、スマートフォンは「電話ではない！あれは小型のPCに電話機能がついたものだ！」と日々言っているほどCPUなどに関しては日々進化し続けている。

もちろん、通信会社にとってはキラーコンテンツになるのですが今後私たちの様な制作会社は、IEやらchromeやらのブラウザチェックの他にスマートフォンも必ず視野に入れなければならないと思っております。

で、hoverにもどりますが、これって今後は力を入れていく所ではない。むしろ、クリック出来るならクリック出来るぞ！と分かりやすいデザイニングをしなければならないという事です。

HTML5では、section要素が出来た為実質上

今まで活用されていた人は、水平線を表示する方法は複数あるのでそれで対応していくという事です。

ウェブサイトの左上にロゴマークが設置されている事は、めずらしくはありません。

このサイトも左上にロゴがあります。

imgとして設置するか、backgroundで配置するかどちらにしてもimgファイルが使われます。

さて、このロゴにはh1のタグを使用するのでしょうか。

先日も社内の雑談で出てきました。

この議題は、結構長い間論議されているような気がします。

すごくレベルの低い事ですが、、、。

わたしの考えとしての基本は、imgとして設置した場合は、h1は使用しません。

どうしてもh1を利用したい場合は、backgroundとしてCSSに記述して、h1タグにはテキストでタイトル名を記述します。
（ここでtext-indent:-9999px;を利用するかは、別の問題なので下部で説明します。）

そもそもロゴは、コンテンツに関係しているのか？

トップページならともかく、全てのページでロゴがh1でよいのか？

上記の場合は、たいがいロゴをクリックするとトップページに移動します。そこが疑問のポイントです。

WordPressのテンプレートをみるとすべてのページのロゴをh1としているものが多いです。

では、SEOに関してはどうなんだ？という議論は下記の様なサイトで国外でも盛り上がっている。

Replacing h1 text with a logo image…best method for SEO?

では、googleではどうなっているんでしょうか。

googleのトップページをみてみると

<h1><a id=logo href="http://www.google.com/webhp?hl=ja" title="Google ホームへ">Google<img width=167 height=318 src="/images/nav_logo83.png" alt=""></a></h1>

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

と記述されている。

Googleについてのページは、

<h1><a href="/"><img alt="" height="65" src="images/about_logo.gif" title="" width="175"></a> について</h1>

h1 {
color: #636363;
float: left;
font-size: 1.8em;
padding: 0;
}

となっている。

W3Cのページを見てみると

トップページ

<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C"></a> <span class="alt-logo">W3C</span></h1>

h1, #w3c_mast h1, .h1 {
font-size: 136%;
font-weight: normal;
overflow: hidden;
}

Appleに関しては、ロゴどころかページ全体のh1がない。

main　>　content　の　articleにh1がある。

<h1><img src="http://images.apple.com/home/images/hero_macbookair.png" alt="The new faster, MacBook Air. The ultimate everyday notebook. Now up to 2.5x faster, featuring highspeed Thunderbolt I/O and OS X Lion." width="902" height="586" /></h1>

しかも大胆に下記の様な大きなpng画像がh1要素になってます。

ここでわたし自身の個人の見解ですが、h1をロゴに使うとか使わないとかはみんなが言うほど神経質にならなくてもよいのでは？

きちんとしたHTMLの記述をしたらよいと思います。

h1要素がないのにh2やh3があるなど、h2がh1に関連していないなど基本的なルールを守ればよいと思います。

また、SEOに良いからロゴにh1とかでなく、alt属性をきっちり記述した使い方をしなければなりません。

画像: alt 属性を使用して説明テキストを含めます。また、画像の近くにわかりやすいキャプションや説明テキストを入れることもおすすめします。

参考：隠しテキストと隠しリンク

そもそもブランディングが出来ていない会社がロゴにh1って笑ってしまいます。

GoogleやNikeなどだれでも知っているロゴマークならばh1っていうのはありだと思います。

また、appleのようにそもそもコンテンツの中でしかh1要素を使わないという選択肢もある。

ですが、やっぱり納得できないのがh1に「なんでリンクがあるの？」ってところです。

もともとh1とは、Use lt;h1> for top-level headingにも記述されているとおり、ドキュメントの最初の見出しのために使わなければなりません。

結論からすると

トップページは、ロゴにつけてもよいただしaltに会社名や商品名などを必ず記載する。
もしくは、テキストで会社名や商品名を記述して「text-indent: -9999px;」などで見えなくする。

※上記「text-indent: -9999px;」は、隠しテキストと隠しリンクのガイドラインに触れるという恐れがありますが、現在Googleではこの方法の使用を推奨していません。上記のGoogleのサイトのようにimgタグでロゴを設置しています。

参考：隠しテキストと隠しリンク

下層ページに関しては、そのページのコンテンツに合わせてh1要素を記述することは理想ですが、CMSのテーマ作成などの都合でロゴに設定しても特には問題ない。

ただ、絶対にロゴにというのはナシだと思います。

という見解です。

制作部との雑談でもよくXHTMLの話が出てきました（過去形）。

彼らが学校などで教えてもらったのXHTMLベースで学んでいたからです。

今回は、HTML（Hyper Text Markup Language）とXHTML（eXtensive Hyper Text Markup Language）について簡単に書きます。

完全独学のわたしは、そもそもXHTMLの立ち位置が分かりませんでした。

それは、元々XHTMLがなぜ出来たかにもよると思います。

化学式、数式と多様なことをHTMLでは表現することができませんでした。

HTMLは拡張性が乏しかったためです。

そこで、W3Cは拡張性が高いXML（eXtensive Markup Language）で、Web上で化学式、数式を表現することを検討しましたが、XMLは、すべてのブラウザ（特にシェアが最大であったIE6に！）対応してませんでした。

しかも、技術的なスキルでなく、芸術的スキルが高いウェブデザイナーがXMLを新たに学ぶことは結果論ですが、あり得ませんでした。

そこで、W3CはXMLを元にHTML4.01を意識したXHTML1.0を2000年に作りました。
（今から11年も前に！）

MTなどのブログシステムに採用されていたこともあり爆発的にXHTMLは広がって行きました。

しかし、バーナーズ・リーがブログで下記の様に記述しています。

　「数年が経過した今となっては、いくつかのことがよりハッキリしてきました。HTMLを徐々に進化させるのは必要です。世の中を一気にXMLにスイッチするという試み――属性値をクオートで囲むだとか、空タグにもスラッシュを付けるだとか、名前空間を使うといったことも含みます――、そうした試みは、まったくうまく行きませんでした。HTMLを作っている多くの人々は、主にWebブラウザが特に不平をいわないからという理由で移行しませんでした」。

実際、わたしはある時期XHTMLを意識したソースを書いてましたがHTML5の出現により結局は、HTML4（HTML5を意識しながら）で記述してました。

例えば

など終了タグが無いものに
と記述したり。。。

そうこうしている中、W3Cが、「XHTML 2」の策定を打ち切り、2012年の勧告の「HTML 5」の標準化に力を注ぐことを明らかにしました。（実は、HTML5の開発開始は2004年です。）

ただ、XHTMLは無くなるのか？という疑問ですが、Bruce Lawsonが興味深い記事「HTML 5 + XML = XHTML 5」を書いてます。

HTML 5 + XML = XHTML 5

まとめですが、XHTMLは無くならないでしょう。

しかし、一般的な閲覧者やデザイナーにとって選択肢が２つあるという意味では困惑を招きます。

そのため、当社ではHTML5を基本的に採用してXMLで対応しなければならないときはオプションとして利用していく予定です。

今日の話題の中から一つ。

addressタグですが、当社ではそのページ全体もしくは、特定のドキュメントに対しての問い合わせ先を記述するときのみaddressタグを使います。

例えば、当サイトでは下記の様に記述しています。

<address>メールのお問い合わせは、<A href="/contact/">こちら</A>。</address>

では、コピーライトは？という事になりますが、単純にPタグでいいんじゃないでしょうか。

ちなみに、コピーライトについて他のサイトをしらべてみました。

Yahoo!JAPANは、

<address>Copyright (C) 2011 Yahoo Japan Corporation. All Rights Reserved.</address>

Googleは、

<p>&copy;2011 Google 

ワサビは、

<p>Copyright &copy; 2007 - 2011 WASABI Inc.</p>

参考：
http://dev.w3.org/html5/spec/sections.html#the-address-element

下記の様に記述しております。

もちろん、コンテンツの内容によって若干は変わってきます。

ポイントは、
DOCTYPE宣言
html要素にlang属性
styleのtype属性

リセットは、

article,aside,footer,header,hgroup,nav,section {
	display:block;
}

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="shortcut icon"  href="favicon.ico">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="styles.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body> 

<header>

<hgroup>
<h1><a href="#"></a></h1>
<h2></h2>
</hgroup>

<nav id="gnavi">
    <ul >
     <li><a href="#">トップページ</a>
     <li><a href="#"></a>
     <li><a href="#"></a>
     <li><a href="#"></a>
     <li><a href="#"></a>
     <li><a href="#"></a>
    </ul>
</nav>
<!-- end #gnavi -->
</header>
<!-- end header -->

<div id="content">

<article>
	<header>
    	<h1></h1>
　　　　</header>
</article>

<aside>

<section>
</section>

</aside>   

</div><!-- end content -->

<footer>

<nav id="footer">
<ul>
<li><a href="#"></a>
<li><a href="#"></a>
</ul>
</nav>    

<p id="copyright"></p>

</footer>

HTML5では、タグ自体がセマンティックな意味を持つことになり、装飾関係は全てCSSで行うことになります。

分かりやすいように下記にまとめてみます。

元がW3Cの英文を自分なりに訳してみました。

HTML5では利用する時の用途が新たに定義されました。

i要素は、他の文章から区別する為に表記はイタリック体のテキストです。

ただし、強調や重要といった事に使いません。

使用例は、分類の名称、技術的な専門用語、他言語の慣用的フレーズ、思考、船の名などに使用します。

参考
http://dev.w3.org/html5/markup/i.html

<i>
i要素を使うときには同時にclass属性を使うことが推奨されます。

一般的には下記の様に定義しています。
i {
font-style: italic; }

http://dev.w3.org/html5/markup/i.html

<b>

b要素は、重要だという事を伝えるのでなく、ただ文章内で意図的に区別するために使います。

例えば、文章内にあるキーワードやレビュー記事などに記述されている商品名です。

一般的には下記の様に定義しています。
b {
font-weight: bolder; }

参考
http://dev.w3.org/html5/markup/b.html

<em>

em要素は、そのテキスト全体の強調を表します。

一般的には下記の様に定義しています。
em {
font-style: italic; }

参考
http://dev.w3.org/html5/markup/em.html

<strong>

strong要素は、その文言や文章を強い重要性を表します。

ネストする事により、さらに強く重要性をしめすことも出来ます。

参考
http://dev.w3.org/html5/markup/strong.html

ちなみに、bigはHTML5から廃止されました。

IBMのDeveloper WorksでHTML5の基礎という記事が本日掲載されました。

HTML5 の基礎: 第 1 回 最初の一歩

HTML5を知る上で基本的な記述でした。

また、弊社の様なSmall Office発でなく「IBM」という巨人企業発なので信頼も高いと思います。

（もちろん、私達の記事も信頼が高いです。）

弊社にいるXHTMLで育ってきた、コーダー達にも一度読んでもらいと思っております。

今回のブログは、すごく遠回しに弊社スタッフ向けの記事でした。

と言っても、HTML5の事を勉強中の方は是非、知識の再確認をしていただければとよいと思います。

今日、弊社のコーダーとCSSリセット（彼女は、初期化と言ってました）の話でちょっと盛り上がりました。

基本、下記の様なコード今までは記述しておりましたが今回このサイトは「初期化なしで行こう」というわたしの判断で初期化の記述をしておりません。

/*初期化*/
body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li,
brockquote, pre, table, caption, th, td, address,
form, fieldset, legend, object {
  margin: 0;
  padding: 0;
}

h5, h6, pre, table, code, kbd, samp, acronym, input, textarea {
  font-size: 100%;
}

em{
color: #FF0000;
font-style: normal;
font-weight: bold;
}

ul.tokuten{
 margin: 0; padding: 17px;
}

ul.tokuten li{
	list-style-type: disc
}

a {
  border: none;
  text-decoration: none;
}
img {
	margin: 0;
  	padding: 0;
	border: none;
	vertical-align: bottom;
}
p {
  line-height: 1.5em;
  padding: 3px 0 8px 0;
}

ul {
  list-style-position: outside;
  list-style-type: none;
}

ol {
  list-style-position: outside;
}

body {
  background: #EBF3E4;
  font-family: MS UI Gothic sans-serif;
  font-size: 12px;
  color: #666666;
  line-height:1.6em;
}

* html body { /* for IE6 */
  font-size: small;
}

*:first-child+html body { /* for IE7 */
  font-size: small;
}

a {
	color: #666666;
}
a:visited {
	color: #666666;
	text-decoration: none;
}
a:hover {
	color: #666666;
	text-decoration: underline;
}

#container {
	width:820px; margin:0px auto; text-align:left;
}

#header{
	width:820px;
}

#tagline{
	height:25px;
	padding-top:10px;
}
#contact p{
	padding:0px;
	margin:3px 0 3px 0;
}

海外では、YUI（ずっと日本人女性が作ったものだと思ってました）

http://developer.yahoo.com/yui/reset/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

もっとも新しいとされているCSSリセットがNormalize CSSです。

http://necolas.github.com/normalize.css/

こちらでデモもみれらます。

http://necolas.github.com/normalize.css/demo.html

これは、かなり良いです。

結論、使ってませんが。

/*! normalize.css 2011-06-21T18:23 UTC · http://github.com/necolas/normalize.css */

/* =============================================================================
   HTML5 element display
   ========================================================================== */

/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 * Known limitation: IE6 will not apply style for 'audio[controls]'
 */

audio[controls],
canvas,
video {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Keeps page centred in all browsers regardless of content height
 * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html {
    font-size: 100%; /* 1 */
    overflow-y: scroll; /* 2 */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
    -webkit-text-size-adjust: 100%; /* 4 */
    -ms-text-size-adjust: 100%; /* 4 */
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */

body {
    margin: 0;
}

/*
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */

body,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/* =============================================================================
   Links
   ========================================================================== */

a {
    color: #00e;
}

a:visited {
    color: #551a8b;
}

/*
 * Addresses outline displayed oddly in Chrome
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */

a:hover,
a:active {
    outline: 0;
}

/* =============================================================================
   Typography
   ========================================================================== */

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
*/

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Corrects font family set oddly in IE6, S5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */

/* 1 */

q {
    quotes: none;
}

/* 2 */

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* =============================================================================
   Lists
   ========================================================================== */

ul,
ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
}

dd {
    margin: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
}

/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9
 */

svg:not(:root) {
    overflow: hidden;
}

/* =============================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */

figure {
    margin: 0;
}

/* =============================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE6/7
 */

form {
    margin: 0;
}

/*
 * Define consistent margin and padding
 */

fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects alignment displayed oddly in IE6/7
 */

legend {
    border: 0; /* 1 */
    *margin-left: -7px; /* 2 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
 * 2. Corrects inner spacing displayed oddly in IE6/7
 */

button,
input {
    line-height: normal; /* 1 */
    *overflow: visible;  /* 2 */
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
}

/*
 * Addresses box sizing set to content-box in IE8/9
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Corrects inner padding displayed oddly in S5, Chrome on OSX
 */

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Corrects inner padding and border displayed oddly in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and aligment in all browsers
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* =============================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

この記述は、6月21日に更新されたものみたいです。

本サイトにある英文をわたしなりに翻訳してみました。

間違っていたらご指摘ください。

これってどうよ？

• 他のやつらのとは違って、使い勝手がいいのは残してるよ
• 多くの要素を標準化したよ
• バグ修正と有名どころのブラウザの不整合をなんとかした
• ちょっと改良して使い勝手をよくした
• ちゃんとコメントいれて説明してるよ

サポートしているブラウザ

Chrome, Firefox 3+, Safari 4+, Opera 10+, Internet Explorer 6+