ITエンジニア/デザイナ向けにオープンソースを毎日紹介

DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。


MOONGIFTで実行しました。様々な枠が表示されました。


マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。


かなりダメなところは赤い枠になっています。

DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。

HTMLの構造チェックを行ってくれるサービスはありますが、行番号で指定するものが多く、実際にどこがダメなのか探すのに時間がかかってしまったりしました。その点DiagnostiCSSでは見ているページ上に重ねてくれるので分かりやすいです。

こうした問題点は見た目では普通に見えてしまっているために分かりづらいのですが、クローラーであったり点字ブラウザなど他の環境下において不具合を起こしたりします。ちょっとした修正ですがこまめに対応するのが良いでしょう。

DiagnostiCSS — Visually detect any potentially invalid or inaccessible HTML markup

diagnosticss/diagnosticss

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch