デバッグ用CSS「Diagnostic Styling」とそのサンプルコード

CSSを使って開発中のHTMLのデバッグを行ってしまうという考え方の紹介とそのサンプルコードをメモしておきます。

デバッグ用CSSとは何か。

まず、サンプルのコードを示してみます。

img[alt=""] {border: 3px dotted red;} 
img[title=""] {outline: 3px dotted fuchsia;} 

img要素に続くのは属性セレクタ（属性セレクタについてはCSS セレクタに関するおさらい | WWW WATCHが詳しいので、そちらを参考に）。alt=""とtitle=""の属性と値を持つimg要素にマッチし、それぞれのスタイルを与えます。こうしておくと、HTML内に空白のalt属性やtitle属性があれば、指定されたスタイルが適用されるになり、空白であることが分かるわけです。
もう1つサンプルとして、こんなのはどうでしょうか。

a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

a要素の中にhref属性。#、もしくは空白時に背景色を与えます。
サイト制作時にサイト構造がまだ決まっていなくて、各ページへのリンク先が分からない場合は空白や#にすることってありますよね。でも、それをそのまま忘れてしまっていると、イタイことになってしまいます。そのためにこんなコードを仕込んでおくと、コードの書き忘れの備忘録にはなりそうです。
上記のサンプルとデバッグ用CSS - Diagnostic StylingはEric Meyer氏が提唱しているものです。詳しくは、

• Eric's Archived Thoughts: Diagnostic Styling
• 24 ways: Diagnostic Styling

を参考にしてください。

デバッグ用CSSのメリットなど。

確かにこれと同じようなことはFirefoxのWeb Developer Toolbarなどでも可能です。ただし、Eric氏によると、このCSSのメリットは2点あるとのこと。

1. 自分自身でCSSを書くことにより、どんなエラーにどんなスタイルを与えるのか、自分で定義できること。
2. サイト開発時のデバッグを1つのCSSに集約させることができるようになり、効率化につながること。

確かに、それは一理あります。これらのデバッグはほかのツールでも同様に可能なのですが、自分のCSSセットの中に入れておくことにより、簡易的なチェックツールとしての用途は果たせそうな気がします。
あとは何を書くか、ですね。属性セレクタについてのよい勉強にもなりそうに思います。