The Trap of Web Design

かなり以前に気づいて、最近もたまーに普通にネット見てて「スタイルシート効いてねーな」ということがありまして、十中八九、以下の状況の模様。

バージョンとか関係してるかもしれませんが、Dreamweaver で CSS 作ると、デフォルトで、

/* CSS Document */

…というコメントアウトテキストがついてきます。ソレを削除せずに、それより下に

@charset "UTF-8";

と、charset 指定をいれた場合、Safari ではスタイルシートが全く効きません。他のブラウザは、効かないということはないです。

---

仕様書に charset 指定は「何よりも先」に記述する、とあり、CSS Validator でもエラーを出します。ですので「Safari のバグ」とか、そういう話ではございません。

Cascading Style Sheets, Level 2, Forwrd 4 CSS2の構文及び基本データ型 4.4 CSS 文書表現

外部スタイルシートには，@charset規則が多くとも一つ現われてよい。すなわち，@charset規則は，埋込みスタイルシートに現われてはならない。さらに，@character規則は，文書の真に最初に現われなければならず，いかなる文字も先行してはならない。"@charset" の後で，文書作成者は，文字符号化の名前を指定する。その名前は，IANAレジストリに記述されているとおりの文字集合名でなければならない。

です。

ちなみに、自分は手元の作業マシンに Adobe Dreamweaver CS3 はいってますが、試しに新規空白 CSS メニューを選択したら、

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

となってました。自分で設定した覚えは無いので、修正されたのだと思います。新規でマッサラだと間違って HTML 書いちゃうことなんかを避けるため、みたいな理由だと思いますが、最初からこんなコメント、無くても良いんじゃないの？と思います。

Dreamweaver よりも、ルールを知らない、はたまた、そりゃあ IE よっか利用者は少ないとはいえ、現在利用者が確実に存在するブラウザチェックをしてない、となると、やっぱり制作者にシッカリして欲しいと思います。あと、モノによっては自分もエラー出して、分かっててソノママ（いわゆるハック利用時）ってこともありますが、Validator でエラーになったら、普通は修正するでしょ。

ま、カッコ悪くても情報みれてますから、別に平気っていや平気ですけどね。

ちなみに、予測できなくちゃいけませんが、Safari でアウトということは、Google Chrome も、ってことです。