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

Category : CSS

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 なんかには引用符を消す指定が入っていたりするのでそこは注意したほうがいいかもしれませんね。

Leave a Reply