マークアップされたHTMLソースの記述や文法などをチェックしてくれるツールは数多くありますが、
HTMLソース内にある不適切な記述部分をCSSを使って診断・指摘してくれる「holmes.css」が
構文チェックをする際に使えそうだったのでご紹介。

holmes.css – CSS Markup Detective


holmes.css – CSS Markup Detective

この「holmes.css」を使用するとHTMLソース内の
———————————————–
・タグの属性
・リンク先などでの改善すべき記述 = “#”
・W3Cの非推奨な要素/属性
———————————————–
をチェックし、改善すべき箇所を
———————————————–
・エラー(赤枠)
・警告(黄枠)
・推奨スタイル(灰枠)
———————————————–
で囲って指摘してくれます。

実際に実装後、指摘箇所が表示された画面(デモ)は
以下の様になります。


holmes.css – Test Suite (v 1.0)

指摘する内容としては、

【<a>リンクタグの場合】
◆エラー(赤枠)
「href」属性が付いていない場合
「href」属性が空白「”"」の場合

◆警告(黄枠)
「href」属性が「”#”」の場合
「href」属性がJavaScriptで記載されている場合
「title」属性が付いていない場合
「title」属性の中が空白「”"」の場合

【<img>画像タグの場合】
◆エラー(赤枠)
「alt」属性が付いていない場合
「alt」属性が空白「”"」の場合

といった部分を細かく指摘してくれます。

実装方法は「holmes.css」ファイルをHTMLから読み込んで
<html>もしくは<body>タグにクラスで「holmes-debug」を追記するのみ。

「holmes-debug」クラスの追記はいちいち面倒くさそうなので、
jQueryの記述とセットにしておいてチェック用ソースをまとめておいて、
「holmes.css」で診断するページにその都度コピペで貼り付けるようにしておくと
使いやすそうに感じます。

◆HTML
<link rel="stylesheet" type="text/css" href="css/holmes.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('body').each(function(){
		$(this).addClass('holmes-debug');
	});
});
</script>

<a>リンク先の「#」のチェックとかに便利に使えそうな気がしています。

ご参考までに。。。

【参考サイト】
[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css | コリス

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSSファイルでHTMLソース内の不適切なマークアップを診断してくれる「holmes.css」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR