CSS ブラウザ互換性の問題に対する 4 つの解決策

フロントエンドは、技術が急速に進化するだけでなく、知っておくべき事柄が多すぎるという理由で大変な仕事です。さらに厄介なのは、さまざまな適応や互換性の問題に直面しなければならないことです。

ブラウザの互換性の問題が発生するのはなぜですか?

それはブラウザメーカーが多すぎるからではないでしょうか！

Chrome、Frirefox、Safari、Edge、IE6、IE7、IE8、IE9... 360 Safe Browser、QQ Browser、The World、TT、Sogou、Opera、Maxthon...

重要なのは、異なるメーカー、または同じメーカーの異なるバージョンであっても、同じ CSS セクションに対する解析効果が一貫していないことです。これにより、ページの表示効果が一貫しておらず、互換性の問題も発生します。

Chrome が世界を制覇できたらいいのにな〜〜

各ブラウザの現在の市場シェア

ブラウザは非常に多く、すべてのブラウザと互換性を持たせることは不可能です。平均的なユーザーベースを持つ製品の場合、主流のブラウザに適応できれば十分です。

百度交通研究所が2018年8月から2019年2月まで提供したデータによると、Chromeが46.28%を占め、IEが依然として大きな割合を占めています。まだまだ道のりは長いです。

CSSブラウザ互換性の問題に対する解決策と解決方法

今日は、どの CSS スタイルと互換性を持たせる必要があるかなど、あまり多くの詳細に焦点を当てるつもりはありませんが、主にブラウザー CSS スタイルの初期化、ブラウザーのプライベート プロパティ、CSS ハック構文、自動化プラグインの 4 つの側面を含む大きな解決策について説明したいと思います。

1. ブラウザCSSスタイルの初期化

ブラウザごとにデフォルトの CSS スタイルが異なるため、最も簡単で効果的な方法は、それらを初期化することです。多くの友人がそのようなコードを書いたことがあると思います。すべての CSS を開始する前に、marin と padding を 0 に設定して、ブラウザごとに表示効果が異なるのを防ぎます。

*{ 
 マージン: 0; 
 パディング: 0; 
}

ブラウザのCSSスタイルの初期化に関しては、経験がなければ何を初期化すればよいかわからないかもしれません。ここでは、GitHubで約34,000のスターを獲得しているライブラリNormalize.cssをお勧めします。次に、いくつかのスタイル設定を紹介します。

html{ 
 line-height: 1.15; /* すべてのブラウザで行の高さを修正します */ 
 -webkit-text-size-adjust: 100%; /* iOS で向きが変わった後にフォントサイズが調整されないようにする。 */ 
} 
 
体 { 
 マージン: 0; 
} 
 
{ 
 background-color: transparent; /* IE 10 のアクティブリンクの灰色の背景を削除します。 */ 
} 
 
画像 { 
 border-style: none; /* IE 10 のリンク内の画像の境界線を削除します。 */ 
}

一般的な互換性の問題の多くは、CSS スタイルの初期化によって解決できると思います。次に、ブラウザのプライベート プロパティを見てみましょう。

2. ブラウザのプライベートプロパティ

CSS プロパティの前に、-webkit-、-moz-、-ms- などのプレフィックスを追加することがよくあります。これらはブラウザのプライベート プロパティです。

プライベート属性が表示されるのはなぜですか?これは、HTML および CSS 標準を開発する組織である W3C の動きが非常に遅いためです。

通常、W3C 組織のメンバーが border-radius などの新しい属性を提案し、誰もがそれを良いアイデアだと考えています。ただし、W3C は標準を策定するために、レビューを含む非常に複雑なプロセスを経る必要があります。ブラウザベンダーはマーケティングにかける時間が限られているため、機能が十分に成熟していれば、ブラウザでのサポートが追加されます。

ただし、将来 W3C が標準を公開したときに変更が発生しないように、新しいプロパティを事前にサポートするための -webkit-border-radius などのプライベート プレフィックスが追加されます。 W3C が標準を公開し、border-radius の標準的な書き方が確立されると、新しいバージョンのブラウザは border-radius のこの書き方をサポートするようになります。一般的な接頭辞は次のとおりです。

• -mozはFirefoxブラウザのプライベートプロパティを表します
• -msはIEブラウザのプライベート属性を表します
• -webkitはChromeとSafariのプライベート属性を表します
• -o はOperaのプライベート属性を表します

プライベート属性の順序に注意し、標準メソッドを最後に、互換性のあるメソッドを先頭に配置します。

-webkit-transform:rotate(-3deg); /*Chrome/Safariの場合*/ 
 -moz-transform:rotate(-3deg); /*Firefoxの場合*/ 
 -ms-transform:rotate(-3deg); /*IEの場合*/ 
 -o-transform:rotate(-3deg); /*Operaの場合*/ 
 変換:回転(-3度);

各 CSS プロパティに対してこれほど多くの互換性コードを記述することは、間違いなく最大の無駄です。後ほど、自動プラグインを使用してこれを処理する方法について説明します。

3. CSSハック

場合によっては、異なるブラウザや異なるバージョン用に特定の CSS スタイルを記述する必要があります。異なるブラウザ/異なるバージョン用に対応する CSS コードを記述するこのプロセスを CSS ハックと呼びます。

CSS ハックを記述する方法には、条件付きハック、属性レベル ハック、セレクター レベル ハックの 3 つがあります。

条件付きハック

条件付きハックは主にIEブラウザに特別な設定を行います

文法：

<!--[if <キーワード>? IE <バージョン>?]> 
 コードブロック（HTML、CSS、JS のいずれか） 
<![endif]-->

価値

キーワード

if に続く条件には、6 つの選択方法 (かどうか、より大きい、以上、より小さい、以下、指定なしバージョン) が含まれます。

かどうか: IE であるか、特定のバージョンの IE であるかを指定します。キーワード: 空

より大きい: 指定したバージョンより大きい IE バージョンを選択します。キーワード: gt (より大きい)

以上: 指定したバージョン以上の IE バージョンを選択します。キーワード: gte (以上)

より小さい: 指定したバージョンより小さい IE バージョンを選択します。キーワード: lt (未満)

以下: 指定したバージョン以下の IE バージョンを選択します。キーワード: lte (以下)

指定されていないバージョン: 指定されたバージョンを除くすべての IE バージョンを選択します。キーワード: !

バージョン

IEブラウザのバージョン（6、7、8など）

条件付きコメント機能はIE10以降では削除されているので、ご利用の際はご注意ください。

例

<!--[IEの場合]> 
 <p>IE 以外では表示されません</p> 
<![endif]--> 
 
<!--[IEの場合]> 
<スタイル> 
 .test{色:赤;} 
</スタイル> 
<![endif]--> 
 
<!--[IE 9の場合]> 
 <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 
<![endif]-->

属性レベルハック

属性ハックとは、CSS スタイル属性名の前に、特定のブラウザだけが認識できるハック プレフィックスを追加することです。

文法：

セレクター{<ハック>?プロパティ:値<ハック>?;}

価値：

: IE6以下を選択してください。ハイフン (-) も使用できますが、ハイフンを含む一部のプロパティとの混同を避けるため、アンダースコア () を使用する方が適切です。

: IE7以下を選択してください。 (+) と (#) の両方を使用できますが、業界では () の方が一般的です。

9. IE6+を選択する

：IE8+、Opera15以下のブラウザを選択してください

例

異なるIEブラウザで異なる色を設定する場合は、順序に注意してください。下位バージョンの互換性を最後に置いてください。

。テスト {
 color: #0909; /* IE8+ の場合 */
 *color: #f00; /* IE7以前の場合 */
 _color: #ff0; /* IE6以前の場合 */
}

ルーンレベルハックを選択

セレクター レベルのハックは、ページのパフォーマンスが一貫していない、または特別な処理が必要なブラウザーを対象に、特定のブラウザーのみが認識できるプレフィックスを追加することで CSS セレクターをハックするために使用されます。

文法：

<hack> セレクター{ sRules }

価値: 一般的なセレクタレベルのハックには以下が含まれます

*html*プレフィックスはIE6でのみ有効です
*+html *+ プレフィックスはIE7でのみ有効です
@media screen\9{...} は IE6/7 でのみ有効です
@media \0screen {body { background: red; }} はIE8でのみ有効です
@media \0screen\,screen\9{body { background: blue; }} は IE6/7/8 でのみ有効です
@media screen\0 {body { background: green; }} はIE8/9/10でのみ有効です
@media screen および (min-width:0\0) {body { background: gray; }} は IE9/10 でのみ有効です。
@media screen および (-ms-high-contrast: active)、(-ms-high-contrast: none) {body { background: orange; }} は IE10 でのみ有効です。

例：

* html .test { color: #090; } /* IE6以前の場合 */ 
* + html .test { color: #ff0; } /* IE7の場合 */

これを見るとフロントエンドスタッフを誇りに思うしかない。これは難しすぎる～～

しかし、これらの互換性の問題を解決するために多大な労力を費やしても、テクノロジーの大きな進歩はもたらされません。それは、さまざまなブラウザメーカーの穴を埋めるに過ぎません。時間が経つにつれて、これらのテクノロジーの価値はますます小さくなります。重要なのは、CSS の互換性の問題を解決するために最小限の労力を費やし、より良い生活のためにより多くの時間を残すことです。幸いなことに、重い互換性処理を取り除くのに役立つ自動化されたプラグインがいくつかあります。

4. 自動化プラグイン

Autoprefixer は、ブラウザ プレフィックスを自動的に管理するプラグインです。Can I Use (caniuse の Web サイト) のデータを使用して必要なプレフィックスを判断し、CSS ファイルを解析して CSS コンテンツにブラウザ プレフィックスを追加できます。

アセット構築ツール (Grunt など) に Autoprefixer を追加すると、CSS プレフィックスを完全に忘れて、最新の W3C 仕様に従って通常どおり CSS を記述できるようになります。プロジェクトで古いブラウザをサポートする必要がある場合は、ブラウザのパラメータ設定を変更できます。

//書いたコード div { 
 変換: 回転(30度); 
} 
 
// 自動補完のコード。具体的な補完方法はブラウザのバージョンによって異なります。自分で設定できます。div { 
 -ms-transform:回転(30度); 
 -webkit-transform: 回転(30度); 
 -o-transform: 回転(30度); 
 -moz-transform:回転(30度); 
 変換: 回転(30度); 
}

現在、webpack、gulp、grunt にはすべて対応するプラグインがあります。まだ使用していない場合は、できるだけ早くプロジェクトに適用してください。CSS の互換性のために時間を無駄にしないでください。

これで、CSS ブラウザ互換性の問題に対する 4 つの解決策に関するこの記事は終了です。CSS ブラウザ互換性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。