[CSS]HTMLを診断するスタイルシート -CSS Diagnostics

NealGrosskopf.comのエントリーから、HTML 4.01で非推奨とされる要素や空の要素、空の属性などをピックアップするスタイルシートの紹介です。

CSS Diagnostics - Find Depreciated Elements Using CSS

CSS Diagnosticsは、meyerweb.comのCSS Tools: Diagnostic CSSの影響を受けて作成されたもので、非推奨の要素・属性、要素・属性が空の箇所などにボーダーを表示します。

Depreciated Elements：非推奨の要素

applet, basefont, center, dir, font, isindex, menu, s, strike, u
{ border: 5px dotted red !important; }

Depreciated Attributes：非推奨の属性

*[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
*[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
*[align], *[valign],
*[hspace], *[vspace],
*[height], *[width],
ul[type], ol[type], li[type]
{ border: 5px solid red !important; }

Empty Elements：要素が空

div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
{ padding: 20px; border: 5px dotted yellow !important; }

Empty Attributes：属性が空

*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
{ border: 5px solid yellow !important; }

Proposed Depreciated Elements：非推奨ではないが好ましくない要素

input[type="button"], big, tt
{ border: 5px dotted #33FF00 !important; }

Proposed Depreciated Attributes：非推奨ではないが好ましくない属性

*[border], a[target], table[cellpadding], table[cellspacing], *[name]
{ border: 5px solid #33FF00 !important; }

Post on:2008年4月15日