動的に変わるはずのスタイルが思ったようにあたっていない

Webアプリケーションでは画面の装飾をスタイル設定を使って変化させます。例えばTodoアプリでチェックボックスを入れたら文字を打ち消し線表示にするといった具合です。

そんな時に思ったようにスタイルが変化しないことがあります。そんな時にはDOMエクスプローラを使って表示のチェックをしましょう。

Google Chromeの場合

Google Chromeの場合はElementsタブで確認できます。デフォルトはスタイルシートごとの表示となっています。この画面上で自分で独自の設定を追加することもできます。

Computedを選択すると、スタイルシートの設定をマージした適用されている設定だけを確認できます。

Firefox Developer Editionの場合

インスペクタタブで要素ごとの表示設定を確認できます。継承元も表示されるのでより分かりやすいのが特徴です。

計算済みを選択すると適用されているスタイル設定を一覧で確認できます。さらにその設定がスタイルシートのどこにあるのかも確認できます。

Safariの場合

Safariの場合は要素タブを使います。デフォルトは計算済みで、スタイルシートやユーザ設定などがすべて反映された状態になっています。また、リンクタグで使われるアクティブ、フォーカス、マウスオーバー、訪問済みといった属性に対する設定も確認できます。

表示をルールに変更すると、スタイルシートやインラインごとに確認ができます。

IEの場合

DOM Explorerタブで確認できます。継承元も表示されますので追いかけるのが容易です。

属性で要素に対して適用されている設定を確認できます。ここで設定を外したり変更することもできます。

さらにベンダープリフィックスまで含めた属性の確認も行えます。あまり使わないと思いますが、デフォルトの表示を確認するのに良さそうです。

どのブラウザについてもスタイルシートで指定はされていても当たっていない設定については打ち消し線が入っています。これはもっと上位のスタイル設定が優先されているか、元々指定した属性が許容されていないタグである、import!指定を行っているなどが考えられます。

表示の問題ではあるのですが、利用者にとっては思いもしない表示になるのは不安にさせることでしょう。ぜひ素早く改善してください。