概要
Web ページの作成や運用時に、意図しないタグや属性が使われてしまうのを防ぐための CSS です。
この CSS ファイルを読み込むことで 廃止 / 非推奨 / 独自拡張タグを使用すると警告が表示し、意図しないタグや属性の使用を防ぎます。(ただし、CSS の都合で IE 7 以下では表示できません)
img やhr などの置換要素については、content プロパティが使用できないためボーダーのみを表示します。
表示するテキストは Unicode エスケープしてあるので文字化けの心配はありません。
使用方法
CSS ファイルを読み込むだけで使用できます。この CSS ファイルをいつでも取り除けるように import 用の CSS ファイルから読み込むとよいかと思います。
仕組み
属性セレクターと content プロパティを併用して警告を表示します。例えば p 要素の align 属性に対しては
p[align]:before{
content:"align 属性が指定された p 要素です !!"
}のように設定しておきます。すると、<p align="right">p element</p> のように align 属性を持つ p 要素のスタイルとして警告が表示されます。
CSS により警告を表示する要素、属性一覧
廃止 / 非推奨 / 独自拡張タグ
- basefont
- blink
- center
- dir
- font
- listing
- marquee
- menu
- plaintext
- s
- strike
- tt
- u
- xmp
- applet
廃止 / 非推奨 / 独自拡張属性と、CSS で代用できる属性
- body の属性
- body[bgcolor]
- body[background]
- body[bgcolor]
- body[background]
- body[text]
- body[link]
- body[vlink]
- body[alink]
- p の属性
- p[align]
- headings の属性
- h1[align]
- h2[align]
- h3[align]
- h4[align]
- h5[align]
- h6[align]
- address の属性
- address[align]
- blockquote の属性
- blockquote[align]
- div の属性
- div[align]
- table の属性
- table[cellpadding]
- table[cellspacing]
- table[frame]
- table[border]
- table[rules]
- table[width]
- table[align]
- table[background]
- table[bgcolor]
- table[background]
- caption[align]
- thead[align]
- thead[valign]
- tfoot[align]
- tfoot[valign]
- tbody[align]
- tbody[valign]
- tr[align]
- tr[bgcolor]
- tr[background]
- th[align]
- th[background]
- th[valign]
- th[bgcolor]
- th[height]
- th[nowrap]
- th[width]
- th[background]
- td[align]
- td[background]
- td[valign]
- td[bgcolor]
- td[height]
- td[nowrap]
- td[width]
- td[background]
- list の属性
- ul[compact]
- ul[type]
- ol[compact]
- ol[type]
- li[type]
- li[value]
- dl[compact]
- form の属性
- form[target]
- legend[align]
- hr の属性
- hr[align]
- hr[color]
- hr[noshade]
- hr[size]
- hr[width]
- iframe の属性
- iframe[align]
- img の属性
- img[align]
- img[border]
- img[hspace]
- img[vspace]
- alt 属性のない img
- input の属性
- input[align]
- object の属性
- object[align]
- object[border]
- object[hspace]
- object[vspace]
非推奨 / 廃止 / CSS での代用ができるが、警告の対象にならない要素、属性
- b
- i
- small
- iframe
- ol[start] (代替方法がないため)
- a[target] (代替方法がないため)
トラックバックURI
http://www.yomotsu.net/lab/css/misc_debug/trackback
コメント
ユースケさんからのコメント
2009年1月15日 19:16
廃止・非推奨・独自拡張と並んで、CSS で代用できる属性を並列で考えるのはちと違うのではないでしょうか。
table 要素の border,width,frame,rules,cellspacing,cellpadding 属性、thead,tbody,tfoot,tr,th,td 要素の align,valign 属性は「非推奨 / 廃止 / CSS での代用ができるが、警告の対象にならない要素、属性」に含めてもよいと思います。
（CSS で代用でき、かつ警告の対象にならない属性ので）
adminさんからのコメント
2009年1月16日 11:28
@ユースケさん :
確かにその通りです。HTML 4.01や XHTML 1.0 の Spec ではご指摘いただいた属性は非推奨の部類にも入っていないのですよね。別の内容を警告として出すようしてみようかと思います。
といいますのも、HTML 4.01 の Spec の 11.3 Table formatting by visual user agents には
のように、表の視覚表現について CSS Level 1 にはなかったためこれらの属性を用意したようなニュアンスのことが書いてあるためと、HTML 5 differences from HTML 4 (W3C Working Draft 10 June 2008)の3.5 Absent Attributes に table 関連の視覚表現に関する属性が含まれていることを考慮して警告の対象にしようかと思いました。
ただ、この記事で紹介した CSS の該当箇所を削除すればご指摘いただいたような属性を警告の対象から外すことができるのでこの辺も調整しやすいように改めてまとめさせていただきたいと思います。
とても参考になるご指摘をいただきありがとうございました !!
コメントフォーム
実験室に戻る