意外と知らないCSSカスケード(1)作成者/ユーザー/UA CSS
- 2013-05-31
- スラスラわかるHTML&CSSのきほん
- css
CSSの仕様は全体に複雑ですが、中でもカスケード順序は難しいと言えます。おかげで重要な概念のわりには理解が曖昧なままにしている人も多いのが現状です。これから数回に分けてその複雑なカスケード順序の解説をします。
『スラスラわかるHTML&CSSのきほん』p.165〜167
HTMLドキュメントをブラウザで表示するとき、リンクされているCSSが読み込まれ、解析され、適用されます。CSSには、大きく分けて3つの出所があります。1つは、Webページの作成者が作成したCSS(作成者CSS)、2つめはブラウザを使用するユーザーが作成したCSS(ユーザーCSS)、3つめはブラウザが持っているCSS(ユーザーエージェントCSS、UA CSS)です。Webページの作成者が作成するCSSは作成者CSSです。
これらのCSSのうち、ユーザーCSSとユーザーエージェントCSSはブラウザが持っています。ユーザーCSSはそのブラウザを使用する人が自由に定義することができるCSSです。多くのブラウザがユーザーCSSを作成できるようになっています。
さて、出所の違うこれらのCSSは適用される優先順位が決まっていて、HTMLドキュメントに対して必ずユーザーエージェントCSS→ユーザーCSS→作成者CSSの順に適用されます。つまり、作成者CSSがもっとも優先順位が高くなります。
ただし、!important
キーワードが適用されたプロパティの場合は、作成者CSSよりもユーザーCSSが優先されます。これをまとめると、CSSは次の順で適用されることになります。
!important
キーワード付きプロパティ)!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