CSSの反映順番を調査

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

CSSで同じクラス名に対して複数の設定がされているケースはライブラリなどを入れていると多く発生すると思います。
そんな時、どの設定で最終的にレンダリングされるかは、なかなか謎なところが多いです。

そこんところを調査してみます。

環境

index.html

common.css

common2.css

読み込み順番調査

まず、ほぼ同じ内容が書かれているcssファイルを2つ読み込んだ場合、どのような結果になるでしょう?

スクリーンショット 2015-03-28 20.57.12

上記の場合は、common2.cssの設定が反映されています。

スクリーンショット 2015-03-28 20.58.31

なんとなく想像がついてましたが、どうやら、後で読み込まれた設定で、上書きしていると思われます。

次は、セレクタの情報を増やしてみます。

こうすると、先に読み込まれた方が反映されます。

http://www.htmq.com/csskihon/007.shtml

このサイトを見ると分かりますが、selector部分に書かれる情報には基づいて優先順位が決まるそうです。

優先順位の基準

ID属性
class属性
タグ
style属性
important指定

上記のような指定でポイントが加算されて、一番ポイントの高い設定が優先になるようです。
同点ポイントの場合が後述が上書きするようですね。

複雑な設定の場合

それでは、タグに2つ以上のclass名があり、
css2つに別のclass指定がある場合はどちらが優先されるでしょう?

index.html

common.css

common2.css

この場合は、common2.cssが優先されるみたいです。
文字列が違っても、ポイントは同じようですね。

デバッグツール

最近のブラウザであれば、どれでもデバッグツールが使えるので、ソースを書き換えていちいちリロードしなくても、その場で設定変更してリアルタイムに確認できるので、開発効率はこれでアップできますね。

スクリーンショット 2015-03-28 21.16.00

属性別のポイント数について

http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

このサイトにポイント数が記載されてました。

importantなどの指定が書かれていないので、詳細を調べないといけませんね。

懸念点

「width」などのstyleはタグ属性としても存在する場合があり、これの優先順位も知っておかないとトラブル可能性大です。

あと、javascriptでstyleを書き換えた時は、どうでしょう?

まだまだ完璧ではないので、謎は深まるばかりです。
本当に奥深いですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です