記事本文
Safari のバグ
- 症状
-
外部スタイルシートでcontentプロパティの値に日本語などの多バイト文字を指定すると文字化けして表示される。
- 補足
-
外部スタイルシート内でバックスラッシュを用いたエスケープを行えば文字化けしません。
または、外部スタイルシートの文字コードをUCS-2にすることでも文字化けを回避できるそうです。
しかし、それ以外の文字コードを使用した場合は@charsetを明示したとしてもエスケープが必要になります。
このバグの存在は私も知りませんでした。
そして、 UCS-2 以外の charset では
@charsetを明示したとしてもエスケープが必要
ということなので、エスケープ手順をメモしておこうと思います。
バックスラッシュを用いたエスケープ方法の手順例
-
使用している外部 CSS 内で、 content プロパティの値に日本語を使用しているものをリストアップ。
-
数値文字参照用変換スクリプトにて、 16 進数の html 数値文字参照に変換。
-
例えば、
【追記
という文字を変換した場合、
【追記
という数値文字参照になるので、 &#x を \ に置き換え、各文字の最後の ; を消去。
\3010\8FFD\8A18
といった形式になるはずです。
-
前述の方法でエスケープした文字を、 content プロパティの値に日本語を使用している部分に貼り付け。
こういった感じで 16 進数のエスケープが行えます。
私が知らないだけで、このようなスクリプト + 手作業ではなく、完全にスクリプトのみで変換できるページがあるかもしれません。
http://www.eris.ais.ne.jp/~haza/css/ref というページだと、スクリプトのみの変換が可能です。
コメント欄での補足、ありがとうございます。
http://www.eris.ais.ne.jp/~hiro/css/ref にリソースが移動した模様。
重ね重ねコメント欄での補足、ありがとうございます。
:before 擬似要素 / :after 擬似要素の活用例を参考にされた方で、ブラウザのターゲットに Safari を含めている方は、この対策を行うようにしてください。
リプライ
7 件のリプライが送られています。
- 2005-02-07T22:50+09:00 - drry
-
このバグの存在は私も知りませんでした。 そして、直ぐに私もこの脅威からエスケープしました。参考になりました。
- 2005-02-08T20:25+09:00 - No beer, No Name!
-
<a href="http://www.eris.ais.ne.jp/~haza/css/ref">http://www.eris.ais.ne.jp/~haza/css/ref</a>
同サイトのこちらを紹介すべきかと>真琴さん
- 2005-02-08T22:16+09:00 - 真琴
-
<a href="http://www.eris.ais.ne.jp/~haza/html/numref">http://www.eris.ais.ne.jp/~haza/html/numref</a> の最下部からリンクが張ってあったんですね……完全に見落としていました。
- 2005-12-18T18:58+09:00 - PCとIT関連の覚え書き < PukiWiki/TrackBack 0.2
-
CSS関連 † ↑CSSのcontentに関するSafariのバグ † http://hxxk.jp/2005...
- 2005-12-19T17:49+09:00 - CSSメモ < PukiWiki/TrackBack 0.2
-
CSSのcontentに関するSafariのバグ † 下記ページでバックスラッシュのエスケープに変換すれば解決。 http://www.e...
- 2006-09-28T01:20+09:00 - ちゃんかず
-
はじめまして。いつも参考にさせてもらっています。
ところで、変換スクリプトは
<a href="http://www.eris.ais.ne.jp/~hiro/css/ref">http://www.eris.ais.ne.jp/~hiro/css/ref</a>
に移転した模様です。
お役に立てば幸いです。
- 2006-10-02T20:43+09:00 - 真琴
-
あー、ちょうど数日前にまた変換をしようと思って訪れて、 404 になっていて「えええええええええええ」と思っていたところでした !
助かりました !
この記事に対するご意見やご質問、ご感想などありましたらこのフォームに簡潔に記入して下さい。
簡潔に記入できない場合や、関連記事にてご意見をお寄せいただく場合は、ご自身の weblog にて記事を書かれた上で
あてにトラックバックとして送信してください。
