More than 5 years have passed since last update.

Stylesheetにバックスラッシュは要注意＼(^o^)／

Last updated at 2016-09-01Posted at 2016-09-01

「＼ほげほげ！／」←こういうやつ作りたくて、
ちょっとバックスラッシュに頼りたくて

.hoge:before {
  content: "\\";
}
.hoge:after {
  content: "/";
}

みたいな小癪なことをしようとしましたところ、
一部ブラウザにて、これ以降のスタイルを読み込まないような
（コメントアウトされちゃうような）
そんな雰囲気で表示が崩れました。

なので、

スタイルシートでバックスラッシュは使わない。

僕はそう決めました。

補足

そもそもなんでこんな小癪なことをしようとしたかというと、
バックスラッシュを使って\(^o^)/みたいな表示をしたかったからですが、
HTMLで書くとブラウザによって\が¥になっちゃうみたいな恐れがあると思ったため
スタイルに仕込んでみたらどうなのよという次第でした。

結論としては全角の＼を使うことで対応しましたが、
半角バックスラッシュを使うベストプラクティスとしては

.hoge:before {
  content: "\005C";
  font-family: arial; # <- そもそも¥がないフォント
}

か

<span lang="en" style="font-family: arial;">&#x5c;</span>

とかなのでしょうか。
複数ブラウザ未検証。

Arialにするとちょっと日本語フォントに比べて小さくなってしまうので要調整。

逆に¥を使いたい場合は、明確な実体参照があるので

<p>&yen;5,000</p>

とかでおｋです。