制作者の活動(PR)。

堀北真希ちゃんにうさぎの耳を付けたら可愛いだろうなと思って作った創作キャラクタ
主な作品

制作者作成のイラストと動画作品(サンプル)

ブラウザごとの対策。

CSSの実装にはブラウザごとに大きな違いがあり、これが制作する側には大きな悩みになっております。

このため、各ブラウザの不具合を逆手に取ってプロパティの定義を変えるなどと言う対策を執る事も考えられます。

尚、ネットスケープ 4.xに関しては、<link>要素のmedia属性値にall値か複数の値を適用する事で簡単に回避出来ますので、ここでは解説を割愛させて頂きます。

また、ここではCSSの文法に違反しない範囲での方法を解説する事とします。

ブラウザごとの対策・目次。

IE 7.0以前でのみ有効なプロパティ定義。

IEでのみスタイル定義したいセレクタの前に * html または *+html を付ける。

インターネットエクスプローラ 6.xまででは、セレクタの前に* htmlが付いたものを実在するものとして扱います。

この方法はインターネットエクスプローラ 7.0では無効となりましたが、新たにセレクタの前に*+htmlが付いたものを同様に実在するセレクタとして扱います。

いずれの記述もCSSの文法上は一切問題は無いのですが、<html>要素より上位の要素や<html>要素より前の要素は存在しないので、他のブラウザでは存在し得ない要素に対するセレクタとなり、一切効果はありません。

但し、インターネットエクスプローラ 6.xまででは、認識しない隣接セレクタを含んだプロパティ定義を丸ごと無効とするので、インターネットエクスプローラ 6.xまで用のプロパティ定義とインターネットエクスプローラ 7.0用のプロパティ定義を面倒でも別々に記述する必要があります。

例えば、以下のように記述します。

h1 {
    margin-top: 0;
    }

* html h1 {   /* IE 6.xまでのみ認識される */
    margin-top: 1em;
    }

*+html h1 {   /* IE 7.0で認識される */
    margin-top: 1em;
    }

こうする事で、本来なら<h1>要素の上余白を0にすべきところを、インターネットエクスプローラ 7.0以前だけ一文字分の上余白となるように出来ます。

尚、インターネットエクスプローラ 8.0以降ではこれらの方法は一切使えません。

IE 7.0以前を避けるプロパティ定義。

IE 7.0以前での@import規則の解釈の制限を逆用してIE 7.0以前では拙いスタイル定義をインポートさせない。

インターネットエクスプローラ 7.0以前(マッキントッシュ版を含む)ではメディアタイプを指定すると当該スタイル定義ファイルを取込まなくなります。

但し、マッキントッシュ版の5.xでは、一部の書式だと有効になるため、全面的に弾きたい場合には以下のように記述する必要があります。

@import "外部スタイル定義ファイルのURI" メディアタイプ名;

これで、インターネットエクスプローラ 7.0以前を全面的に弾くことが可能になります。

実は、インターネットエクスプローラ 7.0以前が指定されたスタイルシートをインポートしようとする際に、ファイル名をメディアタイプ名の部分まで含めたものと誤認した結果、HTTPエラーとなる事が原因です。

ウィンドウズ版IE 6.ｘまでを避けるプロパティ定義。

ウィンドウズ版IE 6.ｘまでが認識しないセレクタと併用する。

ウィンドウズ版のインターネットエクスプローラ 6.x以前では、

を認識しないばかりか、これらの認識しないセレクタを含むプロパティ定義を丸ごと無視してしまいます。

そこで、ウィンドウズ版のインターネットエクスプローラ 6.x以前で当てたくないスタイルには、セレクタにダミーの属性セレクタなどを加えます。

例えば、以下のように定義したとします。

h1 {
    margin-top: 1em;
    }

h1, [version] {
    margin-top: 0;
    }

この場合、まず前半で<h1>要素の上余白が一文字分になりますが、後半で0に上書きされます。

しかしながら、インターネットエクスプローラでは後半の定義は属性セレクタが含まれて入るせいで弾かれてしまい、よって上書きされずに前半での「上余白一文字分」がそのまま残ります。

マッキントッシュ版IEを避けるプロパティ定義。

\取扱時の不具合を用いてマッキントッシュ版IEでのみコメントアウトと誤認させる。

マッキントッシュ版インターネットエクスプローラには独自のバグがあります。

それは、\の直後の文字を無効な文字として読み飛ばしてしまうと言うものです。

これをコメントに利用する事で、マッキントッシュ版のインターネットエクスプローラでのみコメントアウトする事が出来るようになります。

具体的には、以下のようになります。

/* マッキントッシュ版IEではここから先はコメントアウトされます。 \*/
h1 {
    margin-top: 1em;
    }
/* マッキントッシュ版IEでコメントアウトされる部分はこのコメントが終わるまで */

具体的には以下のようになります。

  1. 初めのコメントの末尾の*/の直前に\が付く事で、マッキントッシュ版インターネットエクスプローラはこれを\/と誤認し、従ってコメントが終わっていないものと誤認します。
  2. 結局直前に\が付いていない*/でコメントが終わっている箇所まで、マッキントッシュ版インターネットエクスプローラはコメントアウトされているものと誤認すると言う訳です。

以上の事から分かるように、マッキントッシュ版インターネットエクスプローラでは無効としたいプロパティ定義に於いてコメントを書き加えたい場合には、やはり末尾の*/の直前に\を付ける必要があります。そうしないと、マッキントッシュ版インターネットエクスプローラでもそのコメントの末尾でコメントアウトが解かれたと判断し、以降は有効な記述と見なしてしまうからです。

\のバグの逆用：マッキントッシュ版IEでのみ有効にする方法。

逆にマッキントッシュ版インターネットエクスプローラでのみ適用したいスタイルを記述するのであれば、以下のようにすれば良い事になります。

/* マッキントッシュ版IE以外ではここから先はコメントアウトされます。 \*/ /*/
h1 {
    margin-top: 1em;
    }
/* マッキントッシュ版IE以外でコメントアウトされる部分はこのコメントが終わるまで */

これは、一行目のコメントが一般のブラウザであれば、一行目の初めのコメントアウトが正しく認識され、後続の/*/は前の二文字の/*が新たなコメントの始まりと認識されるので、従って

/* … \*/ /*/
h1 {
    margin-top: 1em;
    }
/* … */

すなわち最後の行のコメントの末尾の*/までが全部コメントアウトされているものと認識します。

しかし、マッキントッシュ版のインターネットエクスプローラの場合は、一行目の初めの\*/が初めの\のせいで次の*が認識されず、コメントの終わりと認識出来ません。従って、後続の/*/の後ろ二文字の*/がコメントの終わりを表すものと認識し、その結果、

/* … \*/ /*/
h1 {
    margin-top: 1em;
    }
/* … */

すなわち間がコメントアウトされていないものと誤認します。

マッキントッシュ版IEが認識出来ない@media規則を用いる。

マッキントッシュ版インターネットエクスプローラは@media規則を意味不明なプロパティ定義と誤認するようで、これを用いる事でマッキントッシュ版インターネットエクスプローラで定義を無効にする事も出来ます。

オペラ 6.xを避けるプロパティ定義。

オペラ 6.xは、なぜかかなり評価が高かったのですが、それでも目を覆いたくなるようなCSSの不具合を目にします。

そこで、オペラ 6.xでの不具合を回避する記述、すなわちオペラ 6.xで適用させないスタイルの当て方を考えましょう。

オペラ 6.xを@media規則の不具合で弾く。

例えば、スタイル定義ファイルを読込む<link>要素においてmedia属性を指定している場合、オペラ 6.xではそのmedia属性値を漏れなくカヴァーしていない@media規則を取扱えないと言う不具合があります。

但し、この方法でオペラ 6.xを弾く場合、他のブラウザで対象となる全てのメディアに適用させるには同一のプロパティ定義を複数書かなければならなくなり、余り利口なやり方とは言えません。

例えば、<link media="screen, projection">要素でリンクしているスタイル定義ファイルにおいて、以下のように記述されているとします。

div#main {
    width: 80%;
    }

@media screen {
    div#main {
        height: 80%;
        overflow: scroll;
        }
    }

@media projection {
    div#main {
        height: 80%;
        overflow: scroll;
        }
    }

この場合、始めのプロパティ定義は全てのブラウザで有効ですが、二番目と三番目のプロパティ定義はオペラ 6.xでは読み飛ばされてしまいます。

これは、@import規則で指定しているメディア名が<link>要素のmedia属性値を漏れなくカヴァーしていないからです。

また、漏れなくカヴァーしないように記述するため、全てのメディアで同様の効果を出すには最低でも二回同じプロパティ定義を別のメディア型で指定しなければなりません。

更に注意すべき事として、@import規則で他のスタイル定義ファイルからリンクされているスタイル定義ファイル内では、@import規則による回避は出来ません。

オペラ 6.xでは拙いスタイル定義を@import規則の不具合でインポートさせないようにする。

オペラ 6.xには、@import規則で複数のメディアを指定していると、当該スタイルシートをインポートしないと言う不具合があります。

例えば、以下のように記述したとします。

@import "Advanst.css" screen,projection;

この場合、"Advanst.css"スタイル定義ファイルはオペラ 6.xでは読込みません。

尚、インターネットエクスプローラでも@import規則でメディア名を指定した場合は読込めません。但し、マッキントッシュ版の一部に条件付きで読込めるものがあるため、以下のように記述する事でオペラ 6.xとIEの双方で当該スタイル定義ファイルの取り込みを忌避する事が出来ます。

@import "スタイル定義ファイルのファイル名" screen,projection;

まとめ。

現在、CSSのバグで問題になり得るブラウザはいろいろありますが、特に、

については深刻な問題があると言えるでしょう。

もっとも、インターネットエクスプローラにしても既に4.x以前のヴァージョンは対応していたOSと共に過去のものと成り、オペラ 6.xもネットスケープ 4.xも既に過去のものとなっております。

とは言え、それでも一応閲覧された場合の事を考えておきたいと言うのであれば、上記の方法を組合わせて不適切なブラウザを弾いたり、標準から外れた実装のインターネットエクスプローラのみに対して適切なプロパティ定義を与えるなどとすれば良いでしょう。

ただ、この方法を組合わせると、スタイルシートが複雑になってしまい、表示確認も修正も面倒になってしまいますので、余り血道をあげるのは避けた方が良いかも知れません。

一番簡単なのは、インターネットエクスプローラ 7.0以前とオペラ 6.xを纏めて@import規則で弾いてしまう事でしょう。

インターネットエクスプローラ 7.0以前に対しては、そのうえで専用のプロパティ定義を活用する事が考えられます。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com