Section 8 : 特別な記述

 CSS1 には,いくつかの特別な記述が用意されている。これは,CSS のデザインが効率的に行えるよう,また,CSS がユーザにやさしいものであるよう配慮されたものである。

@import 命令

 スタイルシートの内部から,別のスタイルシートのファイルを取り込むことができる。

@import url((URL));

 このような形をしたものは at 命令という。CSS1 では,at 命令はこの @import だけである(CSS2 では @font-face などが加わる)。この命令は <STYLE> 内または CSS ファイルの冒頭に書かれなくてはならない。

 ところで,HTML ファイルから CSS ファイルを呼び出すには <LINK> を使うという方法があった。この命令もはたらきとしては同じであるが,<LINK> で呼び出された CSS ファイルがさらに別の CSS ファイルを呼び出しているという状況のときには,この命令を書く必要がある。

<LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">

という記述で呼び出された“mystyle.css”の冒頭に

@import url(basecss.css);

と書いてあるならば,“mystyle.css”は“basecss.css”を取り込んだ上で <LINK> によって呼び出されるということになる。

@import 命令によって,CSS ファイルを次々に呼び出して使うことができる。
図 8.1 [D]

 もし @import 命令で取り込まれたファイルと,そのあとに書かれる記述が衝突した場合,直接書かれたほうがカスケーディング順位が上になる。たとえば,先ほどの例でいえば,“basecss.css”に H1 をセレクタとする宣言があったとして,“mystyle.css”にも H1 をセレクタとする宣言があったら,前者に後者を重ねる(“mystyle.css”に書かれたものが使われる)。

 ではなぜ,このような命令を用いていくつもの CSS ファイルを呼び出すことができるるようになっているのか。

 これによって,CSS ファイルを部品化して,それらを組み立てて最終的に文書に適用するスタイルを作り上げることができるからである。CSS ファイルを部品化しておけば,それが必要になったときそのまま取り込んで再利用することができる。

 2 つ以上の @import 命令を書くことももちろん可能で,それによって作られる CSS に必要な修正を加えて最後に文書から呼び出すということを考えれば,CSS の管理もぐっと楽なものになろう。

 IE3, NN4  @import 命令はサポートされていない。これは,IE3 および NN4 にスタイルシートを適用させないためのひとつの方法になる

! important を伴う宣言

 CSS では,衝突が起こった場合には,カスケーディング順位に従ってスタイルシートを重ねていくのであるが,スタイルの記述が“重要である”ことを明示して,カスケーディング順位を上げる方法がある。

(属性): (値) ! important;

値に続けて ! important と書くのである。この“! important”はその宣言が重要であることを明示する。

.light SPAN { color: green; }
.light SPAN.bang { color: red; }
.heavy SPAN { color: green ! important; }
.heavy SPAN.bang { color: red; }

上記の命令を記述しておいて出力させる。

<P CLASS="light"><SPAN CLASS="bang">“! important”</SPAN>はその宣言が重要であることを示します。</P>
<P CLASS="heavy"><SPAN CLASS="bang">“! important”</SPAN>はその宣言が重要であることを示します。</P>

“! important”はその宣言が重要であることを示します。

“! important”はその宣言が重要であることを示します。

 クラス light と heavy に関するスタイルは,<SPAN> の“緑色”に対して“! important”が指定されているかいないかだけが異なる。クラスが bang である <SPAN> には,SPAN と SPAN.bang の 2 つの記述が衝突しており,ふつうに宣言したクラス light ではクラスで絞り込まれた SPAN.bang のほうがカスケーディング順位が上になって,結果として赤で表示される。ところが,“緑色”の宣言に“! important”を伴うクラス heavy では,その指定のカスケーディング順位が上がり,クラスで絞り込まれた宣言より高い優先順位を獲得している。したがって,後者の <SPAN CLASS="bang"> の色は緑になる。

 “! important”の目的は記述中のカスケーディング順位を上げるだけでなく,@import 命令のときのように複数のスタイルシートが同時にはたらく場合の処理のしかたを調整することである。

 通常,WWW ドキュメントを閲覧するときに,その筆者によってスタイルシートが提供されるが,それを読む読者もスタイルシートを持つ場合がある。読む人が“このスタイルシートのファイルを使う”とブラウザに設定しておくのである。

 ここから,話を CSS に限って考える。このとき,筆者のスタイルシートと読者のスタイルシートとの衝突が起こるが,この場合筆者のスタイルシートのカスケーディング順位が上になる。ところが読者の CSS ファイルに“! important”があれば筆者のスタイルシートよりカスケーディング順位が上になり,“自分がどうしても譲れない”スタイルは適用される。でも,筆者のスタイルシートに“! important”がある場合はそれより順位が上になる。

 となると筆者は“! important”をたくさん使えばよいかというとそうでもない。読者の側にもいくらかのフレキシビリティは残すべきであろうし,だいいち“! important”だらけではなにが本当に“大事”なのかわからなくなってしまう。

CSS2 では,この問題は“読者の‘! important’を伴う宣言のカスケーディング順位を,筆者の‘! important’を伴う宣言のそれより高くする”ことで“解決”している。

 IE3, NN4  “! important”はサポートされていない。