CSSテクニックコミュのブラウザごとにスタイルシートを変えたい

こんにちは。CSSを日々勉強中の者です。

ブラウザごとに読み込むスタイルシートを変えたいと思っています。本を参考にして作ったのですが、どうもうまくそれぞれ読み込んでくれません。どこか間違いがありましたら教えて頂けると嬉しいです。

MacのIEで見てみるとbase.cssが効いているようです。（×）
MacのSafari、Firefox、Netscapeではbase.cssが効いているようです。（○）
WinのIEで見ると1カ所1pxずれてしまします。（×）

階層：
css/main.css（読み込み専用）
css/base.css（IE以外のブラウザ用）
css/ie5mac.css（Mac IE5専用）
css/ie5win.css（Windows IE5専用）

「HTMLのリンク部分」
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">

「main.cssの内容」
/* Imported styles
-------------------------------- */
@import url("base.css");

/* IE5/Mac only styles
-------------------------------- */
/*\*//*/
@import "ie5mac.css";
/**/

/* IE5/Win only styles
-------------------------------- */
@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

コメント(9)

最初
全て
最新の40件

[1] mixiユーザー 09月06日 13:13

@import url("base.css");だとIEは読み込みますよ。

Win/Macの両方のIEが読み込めないようにするには、
@import url('base.css') all;
と、すればいいと思います。

ですが、base.cssはすべてのブラウザに読み込ませ、ie5mac.css / ie5win.cssなどのHack用CSSでおかしなところだけ修正するのが、一般的だと思いますよ。

[2] mixiユーザー 09月06日 14:37

Kさんも言われている通り、基本的な部分はすべて共通にし、
解釈の違いなどで表示が崩れてしまう場合にのみ、ハック用のCSSを
作って個別に読み込ませるほうがいいと思います。
また、できればハックを使わずにすべてのブラウザで
同じように表示できるように色々試行錯誤したほうが
最終的にはCSSの理解に役立つと思いますよ。
（実際、どんなにがんばっても同じにはならないですけどね…。
でも、出来る限り近づけることは可能と思います）

[3] mixiユーザー 09月06日 20:51

＞Kさん、えどさん

素早いご返答どうもありがとうございます。

@import url("base.css");だとIE読み込んでしまうんですね。
勉強になります。

おかしなところだけ修正したほうが一般的ということなので、そちらで作り直してみようと思います。

それでハック用のCSSとはどんなものなんでしょうか？？
cssを別に作るんでしょうか？？

[4] mixiユーザー 09月07日 15:18

>>3
例えば
base.cssに
p{ float:left; margin-left:100px; }
a{ color: #006699; }

と書いた場合、IE用のcssには
p{ margin-left:50px; }

とかいて上書く、とかそういうことでしょ。

[5] mixiユーザー 09月07日 17:42

>>4
それはhackでしょうか？

個別に差異を修正するとかなりの手間になるので、ブラウザ間の違いを吸収する類の共通デフォルトcssを使った方がいいでしょう。

一本のcssでうまく表示させる方が、正直あとあと楽だと思います。
なんだか話題をすり替えた気がしますが。

[6] mixiユーザー 09月07日 18:53

例えば、IE6 だと overflow を指定しない場合の height の動作は、他のブラウザの min-height と同じ、というバグがあります。また、IE6 は min-height を解釈しません。でも IE6 はプロパティ名の前に余計な「_」があってもちゃんと解釈したりします。

そこで、あるブロックに min-height を指定したい場合以下のように記述したりします。

.honya {
_height: 60px; /* IE 用のアンダースコアハック */
min-height: 60px; /* その他のブラウザ用の設定 */
}

上記のようにすることで、IE6 は _height を height として解釈し、且つ、IE6 のバグで、この動作は他のブラウザで言うところの min-height になります。また、IE6 は min-height を知らないので、この指定は無視します。
他のブラウザは「_height」を有効なプロパティと解釈しないので読み飛ばします。そして、min-height を min-height として解釈します。

というようなことを HACK だと私は解釈しています。

[7] mixiユーザー 09月07日 19:01

ブラウザごとにスタイルシート
というよりも
どのブラウザーでも表示が同じようにタグをコーディングすればいいと思う　

[8] mixiユーザー 09月12日 12:59

＞hiroki さん
そうですね、後で書かれたものが優先されるので、そのやりかたで書いたらちゃんと反映してくれそうですね。ご意見どうもありがとうございます!

＞とりとんさん
たしかにブラウザごとにcssがあると後々大変そうですね。
今の私の技術ではテーブルを多用してコーデイィングしていくしかブラウザごとに同じ画面を見せるのは至難です（＞＜）でもcss一本化というのは私も同意見です。沢山cssがあったとしてもルールが決まっていればよさそうですね。ご意見はとても参考になりました。ありがとうございます!

[9] mixiユーザー 09月13日 09:57

＞拳骨斎さん
そうですね。それがHACKなのかもしれませんね。
最近見た本に

margin: 15px !important;　←IE以外に適用
margin: 10px;　　　　　　　←IEに適用

という解釈があったので、そういったもののことを　HACKと言うのですね。また研究してみます。ありがとうございます！

ログインすると、みんなのコメントがもっと見れるよ