diff options
Diffstat (limited to 'files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html')
| -rw-r--r-- | files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html | 198 |
1 files changed, 0 insertions, 198 deletions
diff --git a/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html b/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html deleted file mode 100644 index cb1475537f..0000000000 --- a/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -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> |