CSSのベンダープレフィックスを再考する時間

キーポイント

CSSの
• プレフィックスの-webkit-プレフィックスを広く使用すると、一部のWebサイトがそれなしでは適切に機能しなくなり、Mozillaが非標準-webkitプレフィックスをサポートして、-webkit-プレフィックスを使用してFirefoxの互換性を向上させるように強制します。これは、Microsoft EdgeとOperaのアプローチと一致しています。
• 開発者は、プレフィックスの使用を再考し、ウェブサイトの互換性、特に新しい変更がFirefox 46または47のパフォーマンスのWebサイトに影響を与える可能性があるため、-moz-プレフィックスを省略するものをテストすることをお勧めします。
• Chrome/Blink、Firefox、Microsoft Edgeチームがより良いソリューションを求めているため、ベンダープレフィックスは徐々に消えています。ベンダーのプレフィックスをあきらめることは、エレガントなダウングレードにそれらを使用することは実行可能なアプローチではないことを意味し、開発者はプレフィックスの使用が非ウェブキットブラウザーで予期しない結果を生成しないことを確認する必要があります。

-webkit-プレフィックスはネットワーク上のCSSを支配しているため、一部のWebサイトはそれなしでは適切に機能しません。これは明らかに、開発者のアプローチが過去数年で理想的ではないという兆候ですが、Mozillaによるかなり不幸ですが、ほとんど必要な尺度につながっています。 Firefox 46または47（2016年4月または5月にそれぞれリリース）まで、MozillaはFirefoxを改善し、-webkit-プレフィックス（通常はモバイル）のWebページの互換性を使用するための標準以外のプレフィックスの範囲のサポートを実装する予定です。 -webkit

これは新しいアイデアではなく、Microsoft Edgeは、互換性のための

プレフィックスの範囲もサポートしています。 Operaは、2012年に-webkit-プレフィックスの実装を開始し、その後WebKitベースのBlink Engineに移動しました。 -webkit-

W3Cおよびブラウザメーカーは、製造業者のプレフィックスを生産Webサイトで使用するつもりはありません。

「W3Cの公式ポリシー声明では、実験コードで実験属性を使用すべきではありませんが、人々はウェブサイトをクールに見せてテクノロジーの最前線にとどまることを望んでいます。」

しかし、どこでも開発者は、できるだけ早くそれらを使用して最新の機能にアクセスしたいと考えています。接頭辞はWebKitの優位性のためにある程度の混乱を引き起こしましたが、ネットワークが急速に成長するのをうまく支援したと思います。 MozillaとMicrosoftのアプローチは、ほとんどのWebサイトにとって無害かもしれません。ほとんどのオンラインサイトには

プレフィックスが既に含まれている場合があります。または、Mozillaの更新には、Webサイトの互換性を向上させるためのアクションが必要ないことがわかります。ただし、プロのWeb開発者として、徹底的であり、一部の設計には異常な結果が得られる可能性があることを理解する必要があります。どの作品のどれがアップデートによって中断されるかをすでに知っているかもしれません。

-moz-開発者、プレフィックスの使用方法を再考し、これらのサイトをテストする時間です。

関係する接頭辞

Mozillaは、一連の-webkit-プレフィックスを含める必要がある場合があります。私が理解している限り、MozillaはEdgeでサポートされている-webkit-プレフィックスリストと一致しません。これがすべて、MozillaのGecko Layout Engineがより広いネットワークと互換性があることを保証する必要があるわけではないためです。

互換性/モバイル/非標準の互換性に関するWikiページの声明によると、Mozillaが採用する可能性のあるプレフィックスには以下が含まれます。

• -webkit-flexbox
• プレフィックスの勾配-webkit-
• -webkit-transforms
• -webkit-transitions
• -webkit-appearance
• -webkit-background-clip
• -webkit-device-pixel-ratio
• -webkit-animation
• -webkit-border*

など、他のいくつかの機能も影響を受ける可能性があります。 @-webkit-keyframes

クロスブラウザーテストは非常に重要です

あなたがFirefoxで新しいCSS機能をテストする必要性を回避するために

プレフィックスを省略しているWeb開発者である場合、あなたが急いでいると仮定し、あなたの顧客はあなたに強制的にそうするように強制します - あなたは再テストする必要がありますFirefox 46または47のサイト。 Firefoxのこれらのバージョンは4月または5月にリリースされるため、前もって計画する時間があります。 -moz- これらの変更がFirefox 46/47に到着する前にWebサイトをテストするには、の設定を通じて毎晩アクセスできます。最新の夜間バージョンをインストールしている場合は、デフォルトで

に設定する必要があります。 Firefoxのすべてのabout:config>プレフィックスの変更が毎晩表示されているわけではありませんが、ここでサイトの現在の外観をテストできます。 3月頃まで、より徹底的なテストのために毎晩Firefoxを使用するのを待つことをお勧めします。 layout.css.prefixes.webkit より緊急に、Microsoft Edgeはこのようにtrueプレフィックスを解釈して表示しました。これは、あなたのウェブサイトに含まれるWebKit固有のスタイルは、期待できなかったブラウザに既に表示されている可能性があることを意味します。そうしていない場合は、Windows 10のMicrosoft Edgeにアクセスして、これらのサイトをテストしてください！ -webkit-

メーカーのプレフィックスが消えています-webkit-

幸いなことに、ブラウザチームがより良いソリューションを探していると、ベンダーのプレフィックスが消えているようです。 Chrome/Blinkチームはアプローチを微調整しました：

「楽しみにして、ベンダープレフィックスを使用してデフォルト機能を有効にすることはなくなりますが、代わりに、実験的なWebプラットフォームが有効になるまでデフォルトにする準備ができるまで、実験的なWebプラットフォーム機能を

の[再リフス化されていない）機能を残します。 」 - クローム/ブリンクチーム

Firefoxチームは同様のアプローチに向かっています：

"独自の用語では、Mozilla内の現在の傾向は、リリースまたは公開されているプレフィックスなしで機能を十分に安定させない場合、ベンダーのプレフィックスを避けることです。少なくとも一般的な戦略として、特定のケースには例外が必要になる場合があります。 。」 - モジラのボリス

Microsoft Edgeは、プレフィックスのサポートを完全に削除することを目指しています：

"MicrosoftもEdgeのベンダープレフィックスを取り除いています。これは、開発者が特別なHTML5またはCSS機能を利用するために、特定のEdgeプレフィックスを使用する必要はないことを意味します。 Web標準に

プレフィックスメーカーのプレフィックスから離れるこの動きは、1つの側面を意味します - メーカーのプレフィックスを介したエレガントなダウングレードは明らかに実行不可能です。

特定のブラウザ（たとえば、Chromeのみの特定のコンテンツ）を見つけるためにベンダープレフィックスを使用することは、ベンダーのプレフィックスの意図ではありません。プレフィックス属性に依存している機能を使用している場合、プレフィックスを使用して他のブラウザのデザインをエレガントに低下させると、これは機能しなくなります。

結論-webkit--o-

時間は変化しています。 WebKitの優位性は、ネットワークの分割と非互換性に誤って導かれ、他のブラウザは

プレフィックスを実装することでペースを維持するための互換性を向上させようとしています。ベンダーのプレフィックスが段階的に廃止されると、この問題は消えますが、開発者はプレフィックスの使用が非ウェブキットブラウザーで予期しない結果を生成しないことを確認する必要があります。

有用なリンク

-webkit-

これらの変更に関するMozilla Intent Documentation

Bugzillaのこの問題のMozillaのバグ追跡 Microsoft Edgeの最新バージョンは、WebKit API

をサポートしています

オンラインライフの標準に
• プレフィックスを導入するためのドキュメント
• firefox webkit互換性に関するレジスタのレポート
• CSSのメーカープレフィックスに関するよくある質問-webkit-
• CSSのベンダープレフィックスとは何ですか？なぜそれらを使用するのですか？

ベンダープレフィックスは、ブラウザメーカーが公式のCSS仕様の一部になる前に新しいCSS機能を追加する方法です。これらは、これらの新機能が他のブラウザの既存の機能を妨げないようにするために使用されます。これにより、開発者は新しい機能を実験し、CSS仕様プロセスにフィードバックを提供できます。

ベンダープレフィックスは、現代のWeb開発でまだ必要ですか？

ベンダープレフィックスの必要性は、常にWeb開発者の間で議論のトピックとなっています。彼らはかつてクロスブラウザーの互換性を確保するために重要でしたが、Modern Webでは、異なるブラウザー間でCSS機能の重要な標準化が見られました。したがって、ベンダーのプレフィックスの需要は大幅に削減されますが、場合によっては実験機能に使用されます。

いくつかの一般的なベンダーのプレフィックスは何ですか？

いくつかの一般的なベンダーのプレフィックスには、-webkit-（Chrome、Safari、新しいオペラバージョン）、-moz-（firefox）、-o-（古い、プレワブキットオペラバージョン）、および-ms-（インターネットエクスプローラーとマイクロソフトが含まれます。角）。

CSSコードでベンダープレフィックスを使用する方法は？

ベンダープレフィックスを使用するには、StyleSheetのCSSプロパティの前に追加するだけです。たとえば、Firefoxベンダーのプレフィックスを使用してborder-radius属性を使用するには、-moz-border-radius: 10px;を書くことができます。

メーカーのプレフィックスを使用することの欠点は何ですか？

ベンダープレフィックスを使用する主な欠点は、CSSコードをより複雑で維持しにくくすることです。各ブラウザには独自のベンダープレフィックスがあるため、単一のCSSプロパティの複数のコードを記述する必要があります。さらに、ベンダーのプレフィックスは、公式のCSS仕様の一部ではないため、コード検証の問題を引き起こす可能性があります。

メーカーのプレフィックスの問題を回避する方法は？

ベンダープレフィックスの問題を回避する1つの方法は、SASS以下のようなCSSプリプロセッサを使用することです。これにより、ベンダーのプレフィックスがコードに自動的に追加されます。別のオプションは、サポートするブラウザに基づいてベンダープレフィックスを追加できるAutoprefixerなどのポストプロセッサを使用することです。

メーカーのプレフィックスを使用する代替手段はありますか？

はい、ベンダーのプレフィックスを使用する代替手段があります。別の方法は、Modernizrのような機能検出ライブラリを使用することです。これにより、特定のCSS機能をテストし、それらをサポートしていないブラウザーにフォールバックソリューションを提供できます。もう1つの選択肢は、CSSグリッドまたはFlexBoxを使用することです。これは現在広くサポートされており、ベンダーのプレフィックスを必要としません。

CSSにおけるメーカーのプレフィックスの将来は何ですか？

CSSにおけるメーカーの接頭辞の将来は不確かです。それらはまだ使用されていますが、傾向は、ベンダーのプレフィックスではなく、機能的検出の標準化と使用に向けて移動することです。ただし、近い将来、CSS環境の一部であり続ける可能性があります。

ベンダープレフィックスはウェブサイトのパフォーマンスにどのように影響しますか？

ベンダーのプレフィックスは、CSSコードのサイズが大きくなるため、Webサイトのパフォーマンスに影響を与える可能性があります。ただし、特にCSSコンプレッサーを使用してコードを圧縮する場合は、通常、影響は小さくなります。

メーカーのプレフィックスの最新の開発に追いつく方法は？

Web開発の性質が急速に変化しているため、ベンダーのプレフィックスの最新の開発に遅れないようにすることは困難です。ただし、CSS関連のブログ、フォーラム、ソーシャルメディアアカウントをフォローすると役立ちます。さらに、CSSワーキンググループのWebサイトとMozilla Developer Networkは、最新情報を最新の状態に保つための優れたリソースです。

以上がCSSのベンダープレフィックスを再考する時間の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。