[CSS]HTMLを診断するスタイルシート -CSS Diagnostics
Post on:2008年4月15日
sponsors
NealGrosskopf.comのエントリーから、HTML 4.01で非推奨とされる要素や空の要素、空の属性などをピックアップするスタイルシートの紹介です。
CSS Diagnostics - Find Depreciated Elements Using CSS
CSS Diagnosticsは、meyerweb.comのCSS Tools: Diagnostic CSSの影響を受けて作成されたもので、非推奨の要素・属性、要素・属性が空の箇所などにボーダーを表示します。
Depreciated Elements：非推奨の要素
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> applet, basefont, center, dir, font, isindex, menu, s, strike, u { border: 5px dotted red !important; } </textarea> |
Depreciated Attributes：非推奨の属性
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> *[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; } </textarea> |
Empty Elements：要素が空
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding: 20px; border: 5px dotted yellow !important; } </textarea> |
Empty Attributes：属性が空
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> *[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] { border: 5px solid yellow !important; } </textarea> |
Proposed Depreciated Elements：非推奨ではないが好ましくない要素
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> input[type="button"], big, tt { border: 5px dotted #33FF00 !important; } </textarea> |
Proposed Depreciated Attributes：非推奨ではないが好ましくない属性
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> *[border], a[target], table[cellpadding], table[cellspacing], *[name] { border: 5px solid #33FF00 !important; } </textarea> |
sponsors
