全角スペースハック(Em Space Hack)
スタイルシートの全角スペースハック（Em Space Hack）というのを知っていますか？
プロパティを全角スペースでインデントできない事を利用したCSSハックです。
自分で思い付いた後に歓喜し、Googleの検索結果を見て、現実を知りました……。
ハックの仕組み
スタイルシートを記述する際、コード内に全角スペースを入力する事は文法違反です。
これはCSS Validatorを使えば確認できます。
しかし、ウェブブラウザではエラーとして扱うものと、扱わないものが、存在します。
そのブラウザごとの処理の違いを利用して、スタイルシートの振り分けを行っているのです。
ハックの使い方
使い方は簡単で、スタイルシート内で対象としたいプロパティの直前に全角スペースを置くするだけです。
つまり、全角スペースによるインデントです。
body {
color: #ff0000; /* 全ブラウザに適用 */
color: #0000ff; /* IE&Operaに適用 */
}
見た目に特徴がないのでコメントの併用をおすすめします。
ハックの適用ブラウザ
主なブラウザだと、全角スペースハックはIEとOpera8～9で適用されます。
FirefoxやSafariでは適用されません。
使用上の注意
先に説明しました通り、スタイルシート内で全角スペースを使う事は文法違反です。
なので全角スペースハックを使用したスタイルシートはCSS Validatorでは文法エラーを発生します。
CSS Validatorで文法エラーとなるスタイルシートの危険性が分からない人は、全角スペースハックを使わない方が良いと思います。
余談：ハックを思い付いたきっかけ
知り合いから、スタイルシートが動作しないという救援要請が届いた。
調べるのは後にしても、とりあえず軽く目を通すだけはしておこうと開いて……一目でわかった。
（プロパティが全角スペースでインデントされている）
私が愛用しているTeraPadでは全角スペースを表示する設定にしてある。
知り合いにはすぐにメールを返した。
全角スペースは空白に非ず、全角スペースは文字也。
コメント[0]
コメント投稿フォーム
コメントを投稿するにはJavaScirptが必要です。ブラウザのJavaScriptを有効にしてください。
トラックバック[0]
トラックバックはまだありません。
コメントはまだありません。