Unformed Building

quotesプロパティがWebkitで無視される場合の対処法

公開：
更新：

パーマリンク

SafariなどのWebkit系ブラウザで、q要素などに使われるquotesプロパティが無視されてしまいます。
なぜ対応していないのか分かりませんが、対策はできるのでやり方を説明します。

とりあえずデモページをご覧ください。

CSS quotes property test

Safariで見ると、最初のデモで引用符が全て"（ダブルクオート）になっているのが分かるかと思います（Safari 5.0.5で確認しました）。
同じくWebkitのGoogle ChromeではChrome 12.0.742.30 dev-mの時点で正しく適用されています。

最初のデモのCSSは以下のようになっています。

#test1 q {
  quotes: "「" "」" "『" "』";
}

#test1 q:before {
  content: open-quote;
}

#test1 q:after {
  content: close-quote;
}

本来ならこれでいいはずなんですが、できません。
Webkit付属の検査ツールで見てみると、指定していることすら無視されているようです。
検査ツールのユーザー・エージェント・スタイルシートでは、:before, :afterにダブルクオートが指定されているのが確認できます。

そこで、対策方法ですが、2番目のデモ「対策済みの指定 1」をご覧ください。
ここではちゃんとかぎ括弧が表示されていると思います。

CSSは以下のようになっています。

#test2 {
  quotes: "「" "」" "『" "』";
}

#test2 q:before {
  content: "「";
  content: open-quote;
}

#test2 q:after {
  content: "」";
  content: close-quote;
}

#test2 q q:before {
  content: "『";
  content: open-quote;
}

#test2 q q:after {
  content: "』";
  content: close-quote;
}

簡単に説明すると、quotesプロパティとその指定open-quote/close-quoteが無視されるのを利用して、:before, :after擬似要素の部分にcontentプロパティで使いたい引用符を指定しています。
その次に他のブラウザ用に本来の指定であるopen-quote/close-quoteで上書きします。
ネストされている場合の指定も同様にします。

これで対策完了ですが、こういう指定するなら「quotesとかopen-quote, close-quoteはいらないんじゃない？」と思われそうなので、そういう指定を「対策済みの指定 2」でやってみました。

#test3 q:before {
  content: "「";
}

#test3 q:after {
  content: "」";
}

#test3 q q:before {
  content: "『";
}

#test3 q q:after {
  content: "』";
}

……結果は同じですね。

でも、本来の方法を考えると、2番目のを使っておいて対応したらいらない部分を削除するほうがいいかなーと思います。
「そもそもqなんて使わないよ」とか「そういうのは標準でいい」っていうのなら気にしなくていいです。ただ、リセットCSSなんかには引用符を消す指定が入っていたりするのでそこは注意したほうがいいかもしれませんね。