MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

mobile版Firefox向けベンダープレフィックス対処方法まとめ

概要

 ベンダープレフィックス(接頭辞)付きのプロパティや値は、Firefox、Chrome等のブラウザ毎に実装が異なり、またPC版とmobile版でも異なるため、細かな配慮が必要です。
 例えば、PC版Firefoxでは有効な接頭辞-moz-がmobile版Firefoxではサポートされていません。
 本稿では、mobile版Chromeと同Firefoxとの実装方法の比較、Firefoxにて適用されないベンダープレフィックス付きプロパティの一覧、その書き換えの方法等の情報をまとめます。

 以下、PC版Firefox、mobile版Chrome向けの記述とmobile版Firefox向けの記述を比較した表です。


Mozilla CSS 拡張仕様 (-moz-)

詳細は、Mozilla 独自の CSS 拡張 をご覧ください。

<表1 : -moz-指定された値とmobile版Firefox向け対処法>

プロパティ・値 意味 PC版Firefox向け記述例 mobile版Firefox向け対処法
-moz-box 要素をボックス配置する display: -moz-box; display: inline-block;
-moz-border-radius 枠線の角丸を設定する -moz-border-radius: 10px; border-radius: 10px;
-moz-linear-gradient グラデーション装飾を付与する background: -moz-linear-gradient(top, #F0F0F0 0%, #ccc); background: linear-gradient(to top, #F0F0F0 0%, #ccc);

Webkit CSS 拡張仕様 (-webkit-)

詳細は、WebKit 独自の CSS 拡張 をご覧ください。

<表2 : -webkit-指定された値とmobile版Firefox向け対処法>

プロパティ・値 意味 mobile版Chrome向け記述例 mobile版Firefox向け対処法
-webkit-appearance ブラウザデフォルトの装飾設定を適用する -webkit-appearance: none; 代替指定が存在しないため、明示的にスタイル指定する
-webkit-background-size 背景サイズを指定する -webkit-background-size: 26px auto; background-size: 26px auto;
-webkit-border-radius 枠線の角丸を設定する -webkit-border-radius: 5px; border-radius: 5px;
-webkit-box-shadow 領域のシャドーを設定する -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-sizing 領域のサイズを設定する -webkit-box-sizing: border-box; box-sizing: border-box;
-webkit-gradient グラデーション装飾を付与する background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#f6f6f6)); background: linear-gradient(to bottom, #ffffff, #f6f6f6);
-webkit-linear-gradient グラデーション装飾を付与する background: -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%); background: linear-gradient(to top, #00397b 0%, #01afeb 100%);
-webkit-transform 要素を移動、回転、スケーリング、傾斜させる -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
-webkit-transition-duration トランジションによるアニメーションが完了するまでの所要時間を指定する -webkit-transition-duration: 100ms; JavaScriptで実装する
-webkit-transition-property トランジションさせるプロパティを指定する -webkit-transition-property: opacity; JavaScriptで実装する
-webkit-transition-timing-function トランジション実行中の値の変更速度を操作する -webkit-transition-timing-function: ease-in-out; JavaScriptで実装する

考察

 ・ベンダープレフィックスの使用は互換性を損なうため、Web標準であるCSS3での記述に統一すべきです。
  そうすることで、一つのコンテンツ記述でマルチ・ブラウザ対応が可能となります。

 ・appearanceプロパティ、transitionプロパティ等(アニメーション系のCSS指定)は代替要素がないため、JavaScriptで実装し直す方が容易で確実と考えられます。

注意:backgrouond: gradient; 系統のスタイル指定については、たびたび構文が変更されており、特に注意が必要です。
   以下のように、PC版ChromeとPC版Firefoxを比較してみても、目まぐるしく仕様変更されています。


<表3 : ブラウザとバージョンごとに異なるgradientプロパティの構文>

ブラウザ/バージョン 構文
Chrome/3-9 -webkit-gradient();
Chrome/10-25 -webkit-linear-gradient();
Chrome/26以降 linear-gradient();
Firefox/3.6-15 -moz-linear-gradient();
Firefox/16(2012.10リリース)以降 linear-gradient();

 mobile版FirefoxはCSS3準拠のため、MDN等のリファレンスを参照し、適正な設定を行うことが必要です。

参考

 ・CSS グラデーションの利用 - Web developer guide | MDN
  https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients

戻る

ドキュメントのタグと貢献者

 このページの貢献者: wtrfp
 最終更新者: wtrfp,