CSSを読み込まない指定 : Safari, Opera

Tuesday, Dec 27, 2005 - 04:02 +09:00

仕事で偶然見つけたっぽいHackそのいち。@importで外部CSSを読み込む時、@importの前に「{}」を挿入すると、OperaとSafariだけがCSSを読み込まない模様。たとえば、下記のようになる。

<style type="text/css" media="all">{} @import "import.css";</style>
{}

/* import.css
---------------------------------------------------------------- */
@import "base.css";
@import "layout.css";
@import "parts.css";
/* ------------------------------------------------------------- */

もともとは、CSS文書先頭のコメントで最初のアスタリスクの前の「/」を入れ忘れたところ、FirefoxだけCSSが読み込まれなくなったことが発端。肝心のそのFirefox除けHackは再現できなかったわけだけど、いろいろやってるうちにこんなのができちゃった、と。

ちょっと手が回らなくて検証できてないんだけど、手が空いてる人居たらやってみてくれないかな？ ちなみにざっと確認したのは、Opera8.5, Safari, IE-mac, IE-win(5-6), Firefox, Firefox-mac, Netscape6-7

posted in HTML/CSS | Comment (11) | Trackback (0)

11 Comments

1. Chihiro / December 27, 2005 at 09:30

上記URLにて検証やってみました。
結果的に、Opera除けができるのはDocumnt宣言をいれていない文章か、もしくは<?XML～で始まるXHTMLのようです。(互換モードとか言っていたような)。

NN試していないのでなんともいえませんが、Firefox以外はじくような処理にも応用できるかもしれません。

2. Chihiro / December 27, 2005 at 09:58

気になったのでNN追加しました。Firefoxと同様の判定をしている模様。
結局Firefox除けには失敗しましたが、条件によってはOpera除け可能なようです。IEのみ許すような記述もできそうですが、validじゃないので役には立たないかもしれません。

3. Sig. / December 27, 2005 at 15:40

おぉっ 早いっ。しかも詳しい！ さすがです。
一つ注意点。<style>は<head>～<head>の記述です。XML宣言付きのXHTMLはIEでは互換モードですね。これは、だいたいIE5に似た挙動を示します。

4. Sig. / December 27, 2005 at 15:41

仕事の合間にちょちょいと追加。
<style type="text/css" media="all">{} @import "default.css";</style>
...をhead内に追加。

  • IE6-win : ×
  • IE5-win : ○
  • Opera8.5 : ×
  • NN7.1 : ○
  • NN6.2.3 : ○
  • Firefox1.5 : ○
  • Safari : ×
  • IE5-mac : ×
  • Firefox-mac : ○

※IE-6は標準準拠モードで確認。
※IE-6の互換モードでは、XML宣言ありで○、DTDのURL抜きで×。

5. Chihiro / December 27, 2005 at 15:54

あー、そういえば<head>～</head>に記述だったような気もします。
適当な知識で迂闊に検証とかやっちゃだめですね…
ちょっといまから書き直してきます。

というかここまでやるとMac環境がないのが残念ですねー。
Linux環境ならあるのでLinux版のブラウザとかも確かめてみるか。
でもLinux版Operaとかでも動作変わらない気もするな…

6. Sig. / December 27, 2005 at 19:58

いやいや、データは多いほうが良いですよ。助かってます。
興味を持って試してみてくれたってのは、それだけでブロガーにとって大きな誉れでもあるのです。ふっふっふ（危

Linux環境ってのもちょい面白そうなｗ

7. Sig. / December 28, 2005 at 03:18

Chihiroさんの纏めてくれたデータを、いちおこっちにも簡易バージョンを載せておきましょう。

  • IE6-win : ×
  • Opera8.5 : ×
  • Firefox1.5 : ○
  • NN7.1 : ○

Sig.の検証と一致しますね。HTML 4.01 Transitionalで×ってことは、やはりIE6のレンダリングでは無視される、ということでしょう。(標準準拠モードがIE6本来のレンダリング。互換モードのレンダリングはIE5までのそれを模したもの)

8. Anonymous / December 28, 2005 at 09:04

やっと互換モードと準拠モードの違いがわかりました。ありがとうございます。
XHTMLで書いてもXML宣言があると互換モード扱いになるんですね…。
IE7でこの辺りが修正されていると良いのですが…

Linuxでは普段はテキストブラウザ使ってます。
w3mってやつがTableもしっかり表示されておすすめです。
(CSS読み込まないで検証も何もありませんが…)
Linux版のOpera等については後々検証してみたいと思いますっ

9. Chihiro / December 28, 2005 at 09:10

すみません、上の投稿は私です。記入し忘れてしまいました…
ところで、私の環境(Win2K,IE6)では、投稿ボタンを押すとエラーページが表示されてしまいます。
このページにアクセスしなおすと投稿できているので問題はないのですが、エラーページで更新ボタンを押すと多重投稿になるかもしれません。
ご確認ください。

10. Sig. / December 29, 2005 at 02:32

正確には、「DTD宣言の前に何らかの記述があると、互換モードになる」です。理由は解るような気がしますが、そのためにXHTMLで強く求められているXML宣言が蹴られてしまう、ということですね。IE7では、いちおう対応する予定はある模様です。(IEBlog)

P.S. : サブPCがWin2kなので、コメント投稿テストしてみました。とりあえず俺の環境では問題ないようです。ただ、ちょ～～～っと重いかな（汗） 高速化に関するなんらかの手立ては講じたほうが良さそうです。

11. Chihiro / December 29, 2005 at 08:46

情報ありがとうございます。
IE7で対応は嬉しいですね。
IE6との互換性がちょっと心配ですけど…

コメントについては、09:10の文を送信した時には普通に通りました。
回線の状況によってはブラウザの規定時間を越えてしまって応答なしと判断されているのかもしれません。
MTは使ってないのでよくわかりませんが、高速化は難しそうですね…

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/150

« Previous Entry - Next Entry »