CSS: 【Q】-webkit-text-size-adjust の値は none? 100%? →【A】今はどっちでもいいです
こなさんみんばんわ。
ここもブログも下書きだけが溜まっていきます。放出せんと…
という訳で、惰性で何となく書いてるコードをたまには見直してみようのコーナーです。
-webkit-text-size-adjust
という Webkit 独自拡張の CSS のプロパティがあります。標準化しようという動きもあるようで、すでに Chrome / Edge ではプレフィックスのない text-size-adjust が実装されています。いずれにしてもモバイル向けに書かれてない従来の HTML ページをモバイル端末で表示した際に、小さすぎてテキストが読めないということがないように自動的に文字サイズを調整する機能の有効・無効を切り替えるためのものです。
古代の Web サイトならともかく、最近の適切にデザインされたレスポンシブなサイトでは不要なものですし、実際そういったサイトでこれが有効なままだと端末を横向きにした際に文字サイズが大きくなってしまうという副作用が出てしまうので、それを防ぐために
:root {
-webkit-text-size-adjust: 100%;
}
といったコードを書くことが多いと思います…とはいっても最近のリセット & ノーマライズ系 CSS の多くで最初から含まれているので、実際に自分で書くということは少ないかとは思いますが。涙
昔は絶対 none にしちゃダメ! と言われてました
そんな -webkit-text-size-adjust が取りうる値は auto か none, そして <percentage> 値のいずれかですが、これを none にするとデスクトップ版の Safari / Chrome でページの拡大縮小ができなくなってしまうという副作用があったため、絶対に使ってはいけない!
というのが当初の認識でした。
今でも webkit-text-size-adjust で検索すると上位に☝️が出てきますので、そのまま信じて「あぁそうなのか」と何となく思ってる人はかなりいるんじゃないでしょうかね。知らんけど。
今はもうそんなことはないです
さて、上の記事にはこの挙動に関する WebKit Bugzilla へのリンクが貼られていますが、これはその後どうなったのでしょうか? 確認してみましょう。
2013年3月7日に “All reviewed patches have been landed” としてクローズされてますね。おそらく、その後くらいにリリースされてる Safari / Chrome ではこの問題が Fix されているように思います。例の記事から1ヶ月も経ってない日付ですが、まぁそこはどうでもいいです😭
あらためて Can I Use… も確認してみたところ
Old versions of WebKit-based desktop browsers (Chrome<27, Safari<6) suffer from a bug where if -webkit-text-size-adjust is explicitly set to none, instead of ignoring the property, the browsers will prevent the user from zooming in or out on the webpage.
Chrome の v27 未満に Safari の v6 未満といいますと、今はもうかなり昔のブラウザになります。まぁ Safari の方はリリースタイミング的に早くても 6.0.3 くらいに思いますが、いずれにしても使ってる人ほぼおらんやろっていう感じですね。
そんな訳で、今ではもう -webkit-text-size-adjust: none でも全然問題なさそうな感じです。
とはいえ 100% から none に書き直すほどでもない
いちおう
-
none: テキスト自動拡大を無効にする -
100%: テキスト自動拡大は有効だけど、その倍率は100%である（つまり、拡大縮小をしない）
ということで、自動拡大が無効か有効かというのは大きな違い…のような気もしないでもないのですが😅 実際の挙動には（試してみた限り）何の違いもないので、今まで 100% にしていたところをわざわざ none に書き直すほどのことではないかと思いますし、none を指定している CSS ライブラリを使った方がいい、という訳でもないですね。どちらも4文字なので none にしたら記述が短くなる、とかもないし😅
逆に none にしたからといってタップやピンチで拡大できなくなるという訳でもありませんので、none を使うことに躊躇する必要もないかと思いますよ。どちらでも好きな方を使いましょう!
そんな訳で
-webkit-text-size-adjust に指定する値は、今は none でも 100% でもどっちでもいいんですよ、というお話でした。
ということで、とりあえず none を指定している人に対して「none にはユーザビリティーの問題がー!」とか鉞を投げつけに行くと今後は恥をかくことになりますので、そういうのは止めておいた方がいいと思います。涙
Discussion