2009年11月08日

外部 css での文字コード

文字コードが Shift_JIS では扱えない文字が出てきた。仕方がないのでそのページだけ UTF-8 にしたら表示できた。メデタシ・メデタシ。

それは解決したが、外部 css での after や before で content の中身の2バイト文字が文字化けした。そこで css に @charset 'utf-8'; としたら、解決。メデタシ・メデタシ。

そうしたら、既存のページで文字化け。Opera ではなんと言うことなく表示されるのだが、少なくとも Firefox と IE では化けた。css 冒頭の @charset を解釈していないようだ。

調べてみると割合と有名なバグらしく色々と出ていた。サイトに依っては"数値文字参照"で書けば解決する、などと書いてあった。冗談でしょう。なんせ可読性 0 ですもん。もっとスマートな方法はないのですか?????

で、結局

外部 CSS ファイルを読み込んでいる link 要素の charset 属性に CSS ファイルの文字コードを明示する

というわけで、例えば UTF-8 なページで Shift_JIS な css を使う時は(本体と css で文字コードが異なる場合は)

<link rel="stylesheet" href="main200907-3.css" type="text/css" charset="Shift_JIS" />

などとしましょう、という備忘。

link 要素は charset 属性をサポートしている
のでこれが一番スマートかと(a 要素もだが、これから参照する文書の charset をあらかじめユーザーエージェントに教えることになる)

とはいえ、ユーザーエージェントがcss 冒頭の @charset をちゃんと見れば済むことなのだ。結構悩んだ。

posted by ふう at 20:31 | Comment(0) | css

2007/02〜 ここに移動したのは 2010/04/02 by huu