Safariでのバグめいた動き

http://www.ichiro.to/CSS仕様書から外れているわけではないので、極めて正しい動きなんだけど、はまって結構苦労したのでメモ。

CSSのコードに

/* CSS Document */
@charset "UTF-8";

などと記述すると、Safari環境にて最初の宣言のみ無視されて適用されません。

全てのCSSではなく、直後の宣言一つのみが適用されないのがくせ者です。

CSS仕様書によると、文字コード宣言は何よりも最初に宣言されなければならず、その前にコメントや改行を含めていかなる文字も入ってはいけないので、safari環境で崩れたところでそれはバグではないのですが、Dreamweaver8を使っていた自分としては、
無意識に一行目にCSSですよって宣言しちゃってたわけです。

CSS Validatorはもちろん通らないし、エラーを吐くのですが常日頃から表示が崩れて困ったらValidator通す癖を付けた方が良さそうです。

Webインスペクタをにらめっこするだけじゃダメだってことですね。反省。


ちなみに同様のことを書いてくださっていて大変お世話になったページ「The Trap of Web Design」さんの「Dreamweaver 使ってて Safari チェックしてない方へ注意」ですが、

Chromeではこの現象は起こりません。
少なくとも自分が使っている4.0環境では。


参考にさせていただいたので、少しでもプラスアルファの情報提供が出来れば幸いです。


ちなみに、解決を手伝っていただいた先輩が「DW使っててSafariでCSSが効かないトラブルに遭ってる人へ」として、まとめてくれています。ありがとうございます。