スタイルシートをどう読み込むか

CSSをHTMLに適応させる方法は大きく分けて2つある。
HTMLソースに直接記述するか、もしくは*.css形式の別ファイルに記述して外部読込させるかだが、どちらが好ましいかは言うまでも無く後者である。理由は「構造とデザインの分離」で述べた通り、HTMLファイルに対する装飾的要素の記述はHTML本来の意義からすると無駄の一言に尽きるからだ。更に言えば外部読込として使ってこそCSSはその真価を発揮するのである。例外としてメルマガ用のHTMLメールのように外部読込を持たずHTMLファイル内で情報を完結させた方が好ましいケースもあるが、そうでない場合はこの外部読込形式を使うことがほぼ当たり前なことであるという認識を持っていただいて間違いないだろう。

むしろ考えなければならないのはスタイルシートをどう読み込ませるかという部分だ。これは状況によって使い分ける必要があるので、ひとつ注意を払っていただきたい。

スタイルシートの読み込ませ方はRikiyの認識している限りでは下記の2通りだ。

linkタグによる読込はわりと一般的なのでご存知の方も多いかもしれない。一言で言うとhtml側の機能でファイルの読込だ。head内に記述することでcssに限らず様々な外部ファイルの読込が可能だ。記述法は下記の通りである。

特に難しいことはないが、強いて言うならばUAによってスタイルシートを使い分ける場合はmedia属性（以下メディアタイプ）の指定を活用したい。上記の場合はmedia属性をscreenとしてあるので、この読込はPC環境でのスクリーン表示の場合のみ実行される。

逆にCSS側の機能で読み込むのが@importを用いた方法だ。
head内にstyleタグを用いて書き込めばこれまた同じように指定したCSSファイルを読み込むことができる。

これもまた(1)のごとくstyleタグにを指定することで読込を制限しているが、同じ処理をするのに似た形で下記のような書き方もできる。

(2)と(3)の違いは、メディアタイプをタグとスタイル、どちらで指定するかいうことだ。なお(3)については他にも記述形式が存在するが基本的にはほぼ同じなので割愛させていただく。

これらはどれも記述方法としては正解である。仕様の上ではどれもやっていることは同じなのだから、普通どの記述方法を選んでも問題なくCSSファイルをインポートできるはずで…、と理屈の上ではそうなる。
ところがこの3つには、同じ処理をしているように見えて実は隠れた違いがあるのだ。

結論から言うと、その原因はずばり各処理に対するUA(ユーザーエージェント)のサポート状況にある。

上の表はCSS Dencitie様の「CSSを用いたUA分岐方法」を元に必要な部分を抜粋したものだが（自身での検証も追々する予定）、その対応状況に相当なばらつきがあることがわかる。ほぼ全てのUAに対応しているのはlinkタグによる読込のみ（styleタグもlinkタグと同じ挙動をみせると考えられる）で、@importによる読込の場合、メディアタイプの指定がIEでは全くきかないのだ。

そうなると(2)の記述方法はIE4.0以下、NN4.7以下に未対応、(3)はNN4.7とIE全般に未対応とそれぞれバグをもっているので、結局(1)が一般的には安定した記述方法であるということになる。ならば記述方法としてこれがベストなのかというと、それは違う。なぜならその安定性が裏目にでるケースが存在するからである。

そのケースとは一言で言えばCSSを全てのUAに読み込ませたくない場合だ。
良質なコーディングの条件に「どんな環境でも崩れない」というものがある。すなわちどのようなUAにおいても同じように表示されるようにソースを組んでいくことだ。UA間にバグのある書き方は徹底的に避け、スタイルシートもまたどのUAにも対応しているスタイルのみを使用する。当然このケースのではCSSファイルの読込みも(1)がベストだ。

少なくとも一昔前まではこれができるか否かがプロとアマの壁とも言われていた。ところが今日、UAとCSSの進化に伴い、新しい技術を取り入れるために古いUAを切り捨てざるを得ない傾向にある。
例えばスタイルシートでレイアウトを切る場合、IE4.0以下、NN4.7以下は捨てるより他無い。
レイアウトを切るために必要なスタイルのほとんどがこれらでは未対応だからだ。しかしそうして組んだスタイルシートを(1)の記述方法で全てのUAに読み込ませた場合、言い換えるなら、対象から外したはずのUAでも読込んでしまうようにしてしまった場合、それらのUAはその中から自らが対応しているスタイルのみを反映させ、結果非常に中途半端にスタイルが効いた画面を生成してしまうのである。これほど無様なことはない。

スタイルシートでレイアウトを組んだhtmlはスタイルシートを外してもそれはそれで美しいのだから、推奨閲覧対象から外したUAにはCSSファイルを読み込ませないのが最もスマートだとRikiyは思う。
そうなると(1)の記述方法は完全にNGであることがわかる。要はCSSを読込ませるUAの制限が必要になるわけなのだが、ここで(2)の記述方法に注目してもらいたい。(2)はIE4.0以下、NN4.7において未対応であることは先述の通りだが、それが結果的にIE4.0以下、NN4.7以下に対するCSSの読込をはじいて分岐を完成させている。
これは「ハック」と呼ばれる、CSSのバグを利用したテクニックの1つなのだが、そういったテクニックの使用に対して抵抗が無い方にとっては、まさに理想的な解決策であるといえよう。

つまりはこれが冒頭で述べた状況による使い分けなのだ。
ハックを嫌う方には興味の無い話かもしれないが、Rikiyはバグが引き起こした問題をバグで解決することになんら抵抗は無い。WEBの性格によってこれらハックを組み合わせてベストな記述方法を考え出すというのは楽しいものである。興味がある方は文献を漁ったりしてぜひオリジナルの読込方法を考えてみてはいかがだろうか。

最後にRikiyが現在このサイトで使っている読込方法をご紹介しておこう。
Studio Rikiyは完全スタイルシートレイアウトなのでIE4.0以下、NN4.7以下を推奨閲覧環境から外している。また、HTMLではなくXTHMLを使用しているのだが、

まずは本体のhtmlからlinkタグを使ってstyle.cssを読み込む。メディアタイプがscreenなのでPC環境におけるほぼ全てのUAがstyle.cssを読み込む。この時点でUAの分岐は起こらない。

次に読み込んだ先のstyle.cssの中で@importを使って実際にスタイルの記述されているstyle2.css、style3.cssを読み込む。ここでハックによりIE4.0以下、NN4.7以下に分岐がかかるので結果的にこれらのブラウザはスタイルを読み込まない。

仕組みとしては(2)の記述方法と同じである。このような形をとったのはXHTML上でコメントアウトによるスタイル記述がその仕様上好ましくないからだ。これはJavascriptの記述においても言えることでとにかくこれらは外部読込を徹底することがルールとなっている。今のところこれがベストと判断しているが今後よりよい記述を見つけたらどんどん更新していく次第である。

(2005年02月23日)