1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
---
title: mobile版Firefox向けベンダープレフィックス対処方法まとめ
slug: Web/Compatibility_FAQ/Tips_Vendor_Prefix.html
tags:
- Compatibility
- Vendor prefix
---
<h2 id="概要">概要</h2>
<p> ベンダープレフィックス(接頭辞)付きのプロパティや値は、Firefox、Chrome等のブラウザ毎に実装が異なり、またPC版とmobile版でも異なるため、細かな配慮が必要です。<br>
例えば、PC版Firefoxでは有効な接頭辞-moz-がmobile版Firefoxではサポートされていません。<br>
本稿では、mobile版Chromeと同Firefoxとの実装方法の比較、Firefoxにて適用されないベンダープレフィックス付きプロパティの一覧、その書き換えの方法等の情報をまとめます。</p>
<p> 以下、PC版Firefox、mobile版Chrome向けの記述とmobile版Firefox向けの記述を比較した表です。</p>
<hr>
<h3 id="Mozilla_CSS_拡張仕様_(-moz-)">Mozilla CSS 拡張仕様 (-moz-)</h3>
<p>詳細は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla 独自の CSS 拡張</a> をご覧ください。</p>
<p>＜表1 : -moz-指定された値とmobile版Firefox向け対処法＞</p>
<table>
<thead>
<tr>
</tr>
<tr>
<th><strong>プロパティ・値</strong></th>
<th><strong>意味</strong></th>
<th><strong>PC版Firefox向け記述例</strong></th>
<th><strong>mobile版Firefox向け対処法</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>-moz-box</td>
<td>要素をボックス配置する</td>
<td>display: -moz-box;</td>
<td>display: inline-block;</td>
</tr>
<tr>
<td>-moz-border-radius</td>
<td>枠線の角丸を設定する</td>
<td>-moz-border-radius: 10px;</td>
<td>border-radius: 10px;</td>
</tr>
<tr>
<td>-moz-linear-gradient</td>
<td>グラデーション装飾を付与する</td>
<td>background: -moz-linear-gradient(top, #F0F0F0 0%, #ccc);</td>
<td>background: linear-gradient(to top, #F0F0F0 0%, #ccc);</td>
</tr>
</tbody>
</table>
<hr>
<h3 id="Webkit_CSS_拡張仕様_(-webkit-)">Webkit CSS 拡張仕様 (-webkit-)</h3>
<p>詳細は、<a class="new" href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Webkit_Extensions" style="color: rgb(153, 0, 0); text-decoration: underline;">WebKit 独自の CSS 拡張</a> をご覧ください。</p>
<p>＜表2 : -webkit-指定された値とmobile版Firefox向け対処法＞</p>
<table>
<thead>
<tr>
</tr>
<tr>
<th><strong>プロパティ・値</strong></th>
<th><strong>意味</strong></th>
<th><strong>mobile版Chrome向け記述例</strong></th>
<th><strong>mobile版Firefox向け対処法</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>-webkit-appearance</td>
<td>ブラウザデフォルトの装飾設定を適用する</td>
<td>-webkit-appearance: none;</td>
<td>代替指定が存在しないため、明示的にスタイル指定する</td>
</tr>
<tr>
<td>-webkit-background-size</td>
<td>背景サイズを指定する</td>
<td>-webkit-background-size: 26px auto;</td>
<td>background-size: 26px auto;</td>
</tr>
<tr>
<td>-webkit-border-radius</td>
<td>枠線の角丸を設定する</td>
<td>-webkit-border-radius: 5px;</td>
<td>border-radius: 5px;</td>
</tr>
<tr>
<td>-webkit-box-shadow</td>
<td>領域のシャドーを設定する</td>
<td>-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);</td>
<td>box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);</td>
</tr>
<tr>
<td>-webkit-box-sizing</td>
<td>領域のサイズを設定する</td>
<td>-webkit-box-sizing: border-box;</td>
<td>box-sizing: border-box;</td>
</tr>
<tr>
<td>-webkit-gradient</td>
<td>グラデーション装飾を付与する</td>
<td>background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#f6f6f6));</td>
<td>background: linear-gradient(to bottom, #ffffff, #f6f6f6);</td>
</tr>
<tr>
<td>-webkit-linear-gradient</td>
<td>グラデーション装飾を付与する</td>
<td>background: -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);</td>
<td>background: linear-gradient(to top, #00397b 0%, #01afeb 100%);</td>
</tr>
<tr>
<td>-webkit-transform</td>
<td>要素を移動、回転、スケーリング、傾斜させる</td>
<td>-webkit-transform: rotate(-45deg);</td>
<td>transform: rotate(-45deg);</td>
</tr>
<tr>
<td>-webkit-transition-duration</td>
<td>トランジションによるアニメーションが完了するまでの所要時間を指定する</td>
<td>-webkit-transition-duration: 100ms;</td>
<td>JavaScriptで実装する</td>
</tr>
<tr>
<td>-webkit-transition-property</td>
<td>トランジションさせるプロパティを指定する</td>
<td>-webkit-transition-property: opacity;</td>
<td>JavaScriptで実装する</td>
</tr>
<tr>
<td>-webkit-transition-timing-function</td>
<td>トランジション実行中の値の変更速度を操作する</td>
<td>-webkit-transition-timing-function: ease-in-out;</td>
<td>JavaScriptで実装する</td>
</tr>
</tbody>
</table>
<hr>
<h2 id="考察">考察</h2>
<p> ・ベンダープレフィックスの使用は互換性を損なうため、Web標準であるCSS3での記述に統一すべきです。<br>
そうすることで、一つのコンテンツ記述でマルチ・ブラウザ対応が可能となります。</p>
<p> ・appearanceプロパティ、transitionプロパティ等(アニメーション系のCSS指定)は代替要素がないため、JavaScriptで実装し直す方が容易で確実と考えられます。</p>
<p class="attention">注意：backgrouond: gradient; 系統のスタイル指定については、たびたび構文が変更されており、特に注意が必要です。<br>
以下のように、PC版ChromeとPC版Firefoxを比較してみても、目まぐるしく仕様変更されています。</p>
<p><br>
＜表3 : ブラウザとバージョンごとに異なるgradientプロパティの構文＞</p>
<table>
<thead>
<tr>
</tr>
<tr>
<th><strong>ブラウザ/バージョン</strong></th>
<th><strong>構文</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome/3-9</td>
<td>-webkit-gradient();</td>
</tr>
<tr>
<td>Chrome/10-25</td>
<td>-webkit-linear-gradient();</td>
</tr>
<tr>
<td>Chrome/26以降</td>
<td>linear-gradient();</td>
</tr>
<tr>
<td>Firefox/3.6-15</td>
<td>-moz-linear-gradient();</td>
</tr>
<tr>
<td>Firefox/16(2012.10リリース)以降</td>
<td>linear-gradient();</td>
</tr>
</tbody>
</table>
<p> mobile版FirefoxはCSS3準拠のため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">MDN</a>等のリファレンスを参照し、適正な設定を行うことが必要です。</p>
<h2 id="参考">参考</h2>
<p> ・CSS グラデーションの利用 - Web developer guide | MDN<br>
<a href="https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients">https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients</a></p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p>
|
