【CSS】CSS3実践ガイド学習記 1_html/css_WEB-ITnose

CSS3 を使用する

プログレッシブエンハンスメント

Web ページを作成するときは、まず基本的なブラウザーやデバイスで適切に動作し、表示されるようにしてから、CSS や JavaScript 機能などのより高度ではあるがオプションの拡張機能を追加して、サポートを強化します。現在および将来のブラウザ向け。

最初から完璧を目指す開発方法に比べ、プログレッシブエンハンスメントの開発方法は、どのブラウザでも正しく表示できますが、準拠したブラウザで実行すれば可能です。強化方法により、より豊かな効果を発揮します。

パフォーマンスの向上

• CSS3 を使用すると、画像を効果的に利用できます。たとえば、画像を再設計することなく、CSS3 プロパティを通じて画像の影や丸い角を実現できます。
• CSS3 セレクターの配置を通じて、div とクラスへの依存を減らすことができます。

マークアップと画像が少ないほどページの読み込み速度が速くなり、ユーザー エクスペリエンスが効果的に向上します。同時に、Google はページ速度もランキング基準の 1 つとして使用します。

CSS3 を賢く使用する

ブラウザーのプレフィックス

• ブラウザーが新しい属性、値、またはセレクターを実装し、この機能がまだ推奨される標準ステータスの候補になっていない場合、属性の前にプレフィックスを追加する必要があります。レンダリング エンジンによって識別されます。

• 一般的なブラウザプレフィックス

  • -khtml- (現在は基本的に役に立たず、-webkit- に置き換えられます)
  • -ms- (IE ブラウザ)
  • -moz- (Firefox、Camino、Flock ブラウザブラウザなど)
  • -o- (Opera シリーズのブラウザなど)
  • -webkit- (Safari、Android、Chrome ブラウザなど)

• プレフィックスの付いたプロパティは、このプロパティが実験的なものであり、変更される可能性があることを開発者に通知します。発生することが。これにより、ブラウザーは必要に応じて変更を加える柔軟性が得られ、ブラウザーが新しいプロパティをより迅速に公開または再定義できるようになります。

• 属性が仕様になり、ブラウザーがその属性を正しく実装できる場合、この接頭辞は削除できます。接頭辞のないプロパティ定義が提供されている場合 (下位互換性)、開発されたページは最終的に定義された機能に適応できます。これを行わない場合、ページは古いプレフィックス属性で正常に動作します。

たとえば、CSS3 の角丸コードは次のように記述する必要があります:

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/-moz-transform:rotate(-3deg); /*为Firefox*/-ms-transform:rotate(-3deg); /*为IE*/-o-transform:rotate(-3deg); /*为Opera*/transform:rotate(-3deg); /*为nothing*/ 

上記のような繰り返しのコードをたくさん書くのが面倒だと感じる人もいるでしょう。その場合は、Sass、LESS、など、標準の属性を 1 行記述するだけです:

transform:rotate(-3deg); /*为nothing*/