@規則とは、CSSスタイル定義ファイルにおいて定義されている、「@」で始まる記述規則のことです。
既にHTML&CSS入門内の『CSSの書き方使い方』で@charset規則をCSSで用いる文字コードを指定するものとして解説しておりますが、この他にも幾つかの@規則があります。
ここでは、その中から主なものを解説しましょう。
携帯電話でも@規則は一切使えません。この為、PC向けスタイル定義ファイルの中から特定の箇所を後述の@media規則で弾くことでPC向けのスタイル定義ファイルと共有するなどという使い方は出来ません。
@media規則は、指定したメディアに限り有効なプロパティ定義を記述します。
@media規則の記述方法は以下の通りです。
@mediaメディアタイプ名{(メディアタイプ名で指定したメディア限定のプロパティ定義)}
メディアタイプ名は、<link>要素でCSSをリンクする場合に用いるmedia属性値のそれと同じものが使えます。
中括弧の内部は、規則で指定したメディアタイプ以外では無効となります。
オペラ 6.xでは、以下の条件を満たした場合、当該@media規則内のスタイル定義が無効となってしまいます。
具体的には、以下のような場合、オペラ 6.xでは@media規則内のスタイル定義は無効となります。
まず、HTML文書側で当該スタイル定義ファイルを以下の記述でリンクしているとします。
<media rel="stylesheet" href="../…" media="screen, projection, tv"…/>
一方、当該スタイル定義ファイルに以下のように記述している場合、この@media規則内のスタイルはオペラ 6.xでは無効になってしまいます。
@media screen, projection {…}
この@media規則と<link media>要素の不具合を逆用して、オペラ 6.xを弾く事も出来ます。
@import規則を用いることで、外部のCSSスタイル定義ファイルを取込むことができるようになります。
@import規則の記述方法は以下の通りです。
@import "外部スタイル定義ファイルのURI"メディアタイプ名;
「@media」の直後に、取込みたいスタイル定義ファイルのURIを記述します。
url("外部スタイル定義ファイルのURI")」ですが、「"外部スタイル定義ファイルのURI"」でも構いません。その直後に、特定のメディアに限って取込みたい場合は、メディア名を指定することが出来ます。
@import規則は、全てのプロパティ定義より前に記述されていなければなりません。
具体的には、@charset規則があればその直後に、無ければ先頭に記述しなければならないということです。
インターネットエクスプローラではメディアタイプを指定すると当該スタイル定義ファイルを取込まなくなります。
但し、マッキントッシュ版の5.xでは、外部スタイル定義ファイルのURIを「url("」と「")」で囲んだ場合に限り有効となります。すなわち、以下のように記述した場合に限り有効となります。
@import url("外部スタイル定義ファイルのURI")メディアタイプ名;
つまり、外部スタイル定義ファイルのURIを「"」で囲む事でインターネットエクスプローラを全面的に弾く事が可能になります。すなわち、以下のように記述した場合、インターネットエクスプローラでは当該スタイル定義ファイルが読込まれなくなると言う訳です。
@import "外部スタイル定義ファイルのURI"メディアタイプ名;
オペラ 6.xではメディアタイプを二つ以上指定すると当該スタイル定義ファイルを取込みません。
これにより、以下のように複数のメディアタイプと「"」で囲んだURIでスタイル定義ファイルを適用した場合、インターネットエクスプローラとオペラ 6.xでは、当該スタイル定義ファイルはいずれも読まれなくなります。
@import "外部スタイル定義ファイルのURI" screen, projection;
