概要
ベンダープレフィックス(接頭辞)付きのプロパティや値は、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