Skip to content

Instantly share code, notes, and snippets.

@maepon maepon/20151126.md
Last active Sep 4, 2018

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

テキスト周りのスタイリングに使える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. 強調文字をより目立たせる

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

  • 基本問題なし

19. 段組表示を実装する

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

  • IE10以降問題なし
  • 要prefix

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

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

  • IEは8以降対応済み(ただし、指定の記述に注意)
  • webkit,blink系は要prefix
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.