CSSテクニックコミュのSafariの外部CSS読み込みについて

初めまして。Safariの外部CSS読み込みに関する質問です。
フルCSSでのコーディングを頼まれて
@import url("***.css");　を
使用して複数の外部CSSを読み込ませようとした時にSafariで
@importを記述してある方のCSSの一部が読み込まれないという
現象がありました。

全体の構成としては下記のようになります。

-----------------------------------------------
・common.css（共通の外部CSS）
・A.css → @import url("common.css");を記述
・B.css → @import url("common.css");を記述

・A.html（A.cssを<link href="">にて読み込み）
・B.html（B.cssを<link href="">にて読み込み）
-----------------------------------------------

この場合、A.htmlにはcommon.cssとA.cssの両方が、
B.htmlにはcommon.cssとB.cssの両方のCSSが読み込まれるはずですが
Safariで確認した場合のみ、A.cssまたはB.cssに記述してある
CSSの一部が反映されていませんでした。

動作確認を依頼されたブラウザは
■Win：IE、FireFox、N.N
■Mac：Safari、FireFox、N.N
です。
この内のSafari以外のすべてのブラウザでは
きちんと読み込みが行われており、ページを確認することができましたが
Safariのみ一部反映されていないという現象がおきました。

対策として、A.cssまたはB.cssにある反映されていない部分の
CSSをcommon.cssに移すと、読み込まれ、反映されていました。

反映されていなかったCSSはidやclass、background、marginなど
特に同じ指定の仕方のものではなく、統一性はないようでした。

@media以下に@importを置くとそれ以下の指定をすべて無視する、
という現象とはまた違うようです。

■Safariバグリスト
http://cssbug.at.infoseek.co.jp/detail/safari.html
こちらを確認しましたがそれらしいものが見当たりませんでした。
※CSSの名称に_（アンダーバー）は使用しておりません。

このような場合、製作側のなんらかのミスなのか、
それともSafariの既知のバグ、もしくは確認はとれていないがよくあるバグなのか、
今後の製作の参考にするためにも把握しておきたいと思い、
この現象についてご存知の方、また同じ現象を体験した方など
いらっしゃいましたら意見をお聞きしたいです。

コミュ内でSafari関連のトピを検索して目を通しましたが
類似の質問などはあったようですが全体的なものとしてはありませんでしたので
トピをたてさせていただきました。
参考までにコミュ内の類似トピをリンク致します。

■ブラウザごとのレイアウト崩れについて
http://mixi.jp/view_bbs.pl?id=9471752&comm_id=15544&page=all
■SafariのCSS反映について
http://mixi.jp/view_bbs.pl?id=8759460&comm_id=15544&page=all
■CSS設計のレイアウト崩れについて
http://mixi.jp/view_bbs.pl?id=8091076&comm_id=15544&page=all
■Safariのバグについて（font-weightの反映有無）
http://mixi.jp/view_bbs.pl?id=3294936&comm_id=15544&page=all
■Safariでのフロート要素の崩れについて
http://mixi.jp/view_bbs.pl?id=251112&comm_id=15544&page=all

コメント(5)

最初
全て
最新の40件

[1] mixiユーザー 11月24日 12:52

A.html は大丈夫で B.html はアウト、ということでなければ、common.css の内容自体でしょう。

common.css のどこからか先の行から反映されないのであれば、その直前の行。

common.css だけでもリンクしていただけると原因追及早いです。上記の参考サイトにたぶん書かれていないもので Safari に読み込ませないハックがあって、打ちミスで書いちゃう可能性あり。

[2] mixiユーザー 11月24日 13:35

>イチローさん

common.css内はすべて反映されていました。
A.htmlの場合、A.cssを<link href="">で読み込ませて、
さらにA.cssに@importでcommon.cssを呼び出しているのですが
A.cssの中身の一部が反映されていませんでした。
同じくB.htmlでもB.cssを同様の形で読み込ませているのですが
common.cssの中身は反映されてもB.cssの一部が反映されませんでした。
A.cssとB.cssに書かれていたCSSはそれぞれ違うものです。
ただ反映されていなかったCSSの記述してある場所が
上の方だったようです。
Safariだけに読み込ませないハックというのは勉強不足で
知りませんでしたが、現在ハックとしてつかっているのは
:rootになります。

公開前のサイトでまだネット上にアップしておらず、
個人間でのサイトでもないので全てお見せすることができなくて
申し訳ないのですが、以下CSSの反映されていなかった部分になります。

-----------------------------------------------
■A.cssに記述してあって反映されなかったもの
※反映されなかった前後のCSSも記述してあります。

@charset"Shift-JIS";

=↓反映されなかった部分==========================
#allt{
background:url(../img/header-back_all.gif) repeat-x;
width:100%;
height:100%;
}
=↑反映されなかった部分==========================

#content h1 {
width:750px;
height:222px;
}

⇒上記の反映されなかった部分をcommon.cssに
コピー＆ペーストするときちんと反映されました。
-----------------------------------------------
■B.cssに記述してあって反映されなかったもの
※反映されなかった前後のCSSも記述してあります。

@charset"Shift-JIS";

=↓反映されなかった部分==========================
#title {
margin:25px 0px;
}
=↑反映されなかった部分==========================

#main table {
width:675px;
border:1px solid #8FA7C0;
}

⇒上記の反映されなかった部分をcommon.cssに
コピー＆ペーストするときちんと反映されました。
-----------------------------------------------

他にも何個かあったのですが
色々と修正していてどの部分であったかを忘れてしまいました…
ちゃんとお答えできず申し訳ありません。

[3] mixiユーザー 11月24日 16:43

たしかプロパティのあとに＃をつけると、それ以降をSafariは読まないんじゃなかったかな。
　border:solid 1px black; #
みたいに。

読み込まないセレクタの直前を調べてみてください。

[4] mixiユーザー 11月24日 20:44

もしかして @import は反映されなかった記述より下にあるのかな？仕様書上では @import は上（@charsetより下？）になくちゃならない筈で、そーじゃなかったらどうなるかはやったことないから知らない（笑）

なんとなくカスケード順に原因がありそう。あるいは @charset 指定があるからどっかに 2バイト文字はいってて文字コードの問題かも。

link で A.css 読み込み
A.css
@charset "Shift_JIS";
@import 'common.css';

#allt{
....

とかくのは自分もよくやってるし問題ない筈。

> @media以下に@importを置くとそれ以下の指定をすべて無視する、
これは仕様書通りの動作のような気がします。@import はなによりも先。

> ginnez さん
ミスして見つけたものなんであえて使うものでもないですけど、自分の場合は #でなくて 0 って（手がすべって）書いたらそれ以降読み込んでなかったっす。

[5] mixiユーザー 11月25日 00:35

>ginnezさん
#ハックも使用していないのですが、念のため検索かけてみましたが
idの指定以外ではなかったようです。
やはり直前のセレクタで何か問題があったのでしょうか･･･

>イチローさん
@charsetより上に@importを持ってきていました。
今すぐにSafariで確認できる状態ではないので
確認できる際に試してみたいと思います。
＞2バイト文字はいってて文字コードの問題かも。
その可能性もありますね。地道に調べるしか手はありませんが･･･
やはりSafariのバグというより制作側のミスということなのかな。

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