「テキスト周りのスタイリングに使えるCSSプロパティやスニペット」のブラウザ対応状況の整理

20151126.md

テキスト周りのスタイリングに使えるCSSプロパティやスニペット | NxWorldがいい感じだったのでざっくりCanIuseでしらべてみた。

※ 「基本問題なし」と書いているのはIE8以降/Android4.1/iOS8以降なら大体問題無いでしょうという意味です。

1. アンチエイリアスを設定する

http://caniuse.com/#search=font-smoothing

• MacOSのFirefox/Chromeのみ
• 要prefix

2. テキスト選択時のハイライトカラーを変更する

http://caniuse.com/#search=%3A%3Aselection

• iOSのSafari以外OK
• Firefoxは要prefix
• IEは10以降（要prefix）

3. テキスト選択を無効にする

http://caniuse.com/#search=user-select

• 全て要prefix（IEは10以降）

4. 文字間隔を調整する

http://caniuse.com/#search=letter-spacing

• 基本問題なし
• IE8は一部対応（バグあり）

5. 先頭の文字を字下げする

• 基本問題なし

6. 2行目以降を字下げする

• 基本問題なし

7. 先頭の文字を○○する

• 基本問題なし

8. 最初の行だけ○○する

• 基本問題なし

9. 文字を折り返させない（改行させない）

• 基本問題なし

10. 文字を折り返させる（改行させる）

http://caniuse.com/#search=word-wrap

• 基本問題なし

11. テキストを両端揃え

• 基本問題なし
• 最近は日本語でもOK

12. テキストを省略する

• 基本問題なし

13. 長体や平体で表示する

• IE8以外基本問題なし
• IE9は要prefix、Safariも現行のひとつ前が要prefix

14. テキストに縁取りをつける

※ text-shadow

http://caniuse.com/#search=text-shadow

• IE10以降
• 他は問題なし

15. ブラーテキストを表示する

• おそらくIE9以下はなにも表示されないかと
• 他は基本問題なし

16. テキストにグラデーションをかける

• デスクトップのChromeとSafari向けと割り切るぐらいがいいかと（iOS9のSafariは大丈夫っぽいですが）

17. 強調文字をより目立たせる

• http://caniuse.com/#search=linear-gradient

• IEは10以降、他は問題なし

16.英テキストの大文字・小文字・スモールキャップス表示を指定する

• 基本問題なし

19. 段組表示を実装する

http://caniuse.com/#search=column

• IE10以降問題なし
• 要prefix

20. テキストを縦書きにする

http://caniuse.com/#search=writing-mode

• IEは8以降対応済み（ただし、指定の記述に注意）
• webkit,blink系は要prefix