読者です 読者をやめる 読者になる 読者になる

Mozilla Flux

Mozilla関係の情報に特化したブログです。

Firefox 49でChrome・Safariを基準に作成されたコンテンツの表示精度が向上

Firefox 49では、既存のコンテンツとの互換性を高めるため、-webkit-のベンダープレフィックス(以下「webkit接頭辞」)がついたCSSプロパティや属性を多数サポートしている。layout.css.prefixes.webkitが初期設定で有効化される(Bug 1259345)ことによるもので、ベータ版リリースノートには掲載されていないが、Chrome・Safariを基準に作成されたコンテンツの表示精度が向上するため、一般ユーザーにとっても重要な変更といえるだろう。

サポート対象となる具体的なプロパティや属性については、MDNのFirefox 49 for developersにまとめられている*1。が、初期設定で無効のものが混じっているなど若干煩雑なので、改めて整理しつつ列挙しておこう。

-webkit接頭辞がついていても動作するプロパティ

  1. -webkit-align-items
  2. -webkit-align-content
  3. -webkit-align-self
  4. -webkit-animation
  5. -webkit-animation-delay
  6. -webkit-animation-direction
  7. -webkit-animation-duration
  8. -webkit-animation-fill-mode
  9. -webkit-animation-iteration-count
  10. -webkit-animation-name
  11. -webkit-animation-play-state
  12. -webkit-animation-timing-function
  13. -webkit-backface-visibility
  14. -webkit-background-clip
  15. -webkit-background-origin
  16. -webkit-background-size
  17. -webkit-border-bottom-left-radius
  18. -webkit-border-bottom-right-radius
  19. -webkit-border-image
  20. -webkit-border-top-left-radius
  21. -webkit-border-top-right-radius
  22. -webkit-border-radius
  23. -webkit-box-shadow
  24. -webkit-filter
  25. -webkit-flex
  26. -webkit-flex-basis
  27. -webkit-flex-direction
  28. -webkit-flex-flow
  29. -webkit-flex-grow
  30. -webkit-flex-shrink
  31. -webkit-flex-wrap
  32. -webkit-justify-content
  33. -webkit-order
  34. -webkit-perspective
  35. -webkit-perspective-origin
  36. -webkit-text-size-adjust
  37. -webkit-transform
  38. -webkit-transform-origin
  39. -webkit-transform-style
  40. -webkit-transition
  41. -webkit-transition-delay
  42. -webkit-transition-duration
  43. -webkit-transition-property
  44. -webkit-transition-timing-function
  45. -webkit-user-select

同等の接頭辞つきプロパティに紐づけられてサポートされるプロパティ

  1. -webkit-box-flex
  2. -webkit-box-ordinal-group
  3. -webkit-box-orient
  4. -webkit-box-align
  5. -webkit-box-pack

同等の接頭辞つきプロパティに紐づけられずにサポートされるプロパティ

  1. -webkit-text-fill-color
  2. -webkit-text-stroke-color
  3. -webkit-text-stroke-width
  4. -webkit-text-stroke

CSSグラデーション関係

  1. -webkit-linear-gradient()-webkit-radial-gradient()-webkit-repeating-linear-gradient()および-webkit-repeating-radial-gradient()の各関数は接頭辞なしの同等物に紐づけ
  2. 旧式の-webkit-gradientをサポートし、正規のグラデーションに変換

displayプロパティの値を変換

  1. -webkit-box-moz-boxに変換
  2. -webkit-flexflexに変換
  3. -webkit-inline-box-moz-inline-boxに変換
  4. -webkit-inline-flex-moz-inline-flexに変換

その他

  1. WebKitCSSMatrixインターフェイスをDOMMatrixの別名(エイリアス)として設定
  2. メディアクエリのメディア特性に-webkit-transform-3dを追加


(16/09/22追記)
本記事の掲載後、Firefox 49のリリースに合わせて、Firefox 49 fixes sites designed with WebKit in mind, and more ★ Mozilla Hacks – the Web developer blog(和訳:Webkit を念頭に作成されたサイトで起きるブラウザ互換性問題に対する Firefox の対応 | Mozilla Japan ブログ)が公開されている。

*1:該当するBugzilla@Mozillaのバグについては、mozilla.dev.platformのスレッド"Update on WebKit prefix support in Gecko."が詳しい。