BOOKS
by Sukeharu Kano / 狩野祐東 著書

意外と知らないCSSカスケード(1)作成者/ユーザー/UA CSS

2013-05-31

CSSの仕様は全体に複雑ですが、中でもカスケード順序は難しいと言えます。おかげで重要な概念のわりには理解が曖昧なままにしている人も多いのが現状です。これから数回に分けてその複雑なカスケード順序の解説をします。

スラスラわかるHTML&CSSのきほん』p.165〜167

3つのスタイルシート

 HTMLドキュメントをブラウザで表示するとき、リンクされているCSSが読み込まれ、解析され、適用されます。CSSには、大きく分けて3つの出所があります。1つは、Webページの作成者が作成したCSS(作成者CSS)、2つめはブラウザを使用するユーザーが作成したCSS(ユーザーCSS)、3つめはブラウザが持っているCSS(ユーザーエージェントCSSUA CSS)です。Webページの作成者が作成するCSSは作成者CSSです。
 これらのCSSのうち、ユーザーCSSとユーザーエージェントCSSはブラウザが持っています。ユーザーCSSはそのブラウザを使用する人が自由に定義することができるCSSです。多くのブラウザがユーザーCSSを作成できるようになっています。

 さて、出所の違うこれらのCSSは適用される優先順位が決まっていて、HTMLドキュメントに対して必ずユーザーエージェントCSS→ユーザーCSS→作成者CSSの順に適用されます。つまり、作成者CSSがもっとも優先順位が高くなります。
 ただし、!importantキーワードが適用されたプロパティの場合は、作成者CSSよりもユーザーCSSが優先されます。これをまとめると、CSSは次の順で適用されることになります。

  1. ユーザーエージェントCSS
  2. ユーザーCSS
  3. 作成者CSS
  4. 作成者CSS(!importantキーワード付きプロパティ)
  5. ユーザーCSS(!importantキーワード付きプロパティ)

 結果的に、ブラウザを利用して閲覧しているユーザーが特別に作成したユーザーCSSに、!importantキーワードが付いたプロパティがない限り、作成者CSSが優先して適用されると考えてかまいません。

参考文献:
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 6.4.1 Cascading order – W3C http://www.w3.org/TR/CSS2/cascade.html#cascade