図解 CSS3 読書メモ --Foreword_html/css_WEB-ITnose

注：本文来自本人阅读大漠前辈的图解CSS3后的个人总结。

CSS3 で改善された点

セレクター

新機能: リレーションシップ セレクター (E ～ F のみ、E 要素 F 以降のすべての兄弟と一致するために使用)。属性セレクター、構造擬似クラスセレクター: 名前が示すように、E:first-child などの dom ノードの構造関係に使用されるセレクター。ui 要素のステータス擬似クラス セレクター: 主にフォーム要素のステータスに使用されるセレクター。その他の新規セレクター。

ボーダー

新しく追加されたのは、border-radius (角丸)、border-image、box-shadow です。
改善: 境界線の色。

Background

新しく追加されたもの:background-origin (背景の原点)、background-clip (背景のクリッピング)、background-size (背景のサイズ); 複数の背景属性とインライン要素の背景画像モード。

Text

新規追加: text-shadow (テキスト シャドウ); text-overflow (テキスト オーバーフロー処理メソッド): 通常、white-space:nowrap および word-wrap、word とともに使用されます。 -break、空白 (テキスト区切り)

Color

改良: CSS カラー モード (新しい HSLA、RGBA モード); 新しい: 不透明属性。

Gradient

要素の色のグラデーション効果を練習するために、新しい gradients 属性が追加されました。

ボックス モデル定義

新しく追加されたボックス モデルのボックス サイズ設定属性、overflow-x、overflow-y コンテンツ オーバーフロー処理メソッド、サイズ変更フリー アウトライン属性。

レイアウト ボックス モデル

レイアウトには Flexbox モデルを使用します。複数列レイアウト用の columns 属性を追加しました。

変形、トランジション、アニメーション

新しい 2D および 3D 変換機能、@keyframes とアニメーションを併用して、複雑なアニメーション効果を実現します。

メディア プロパティ

主に、メディアの識別と対応するスタイルのマッチングのためのメソッドを提供します。

font-face および icon fonts

アイコン メソッドを再定義するために新しい @font-face モジュールが追加されました。写真の紹介を減らします。

プログレッシブエンハンスメントとグレースフルデグラデーション

プログレッシブエンハンスメントとグレースフルデグラデーションは、Web サイト実装の 2 つの異なる方法です。

段階的な拡張

ローエンドのブラウザでもサイトのコンテンツを表示できるように、最もコアな機能を確実に実装し、次のような高度ではあるが必須ではない拡張機能の使用を検討します。 CSSとjs関数。
このアプローチでは、主要なブラウザーの利点が完全に表示されなくなる可能性があります。

グレースフル デグラデーション

まずローエンド デバイスのユーザーがすべてのコンテンツを表示できるかどうかを検討し、これに基づいてハイエンド ユーザー向けに設計します。
ハイエンド デバイス ユーザーに完璧なアプリケーションを提供するとともに、パフォーマンス レベルが異なるデバイス ユーザー向けに、さまざまなレベルの完璧ではないアプリケーションを設計します。

プログレッシブエンハンスメントとグレースフルデグラデーションに関するスタックオーバーフローマスターの説明を引用

それらはほぼまったく同じものですが、
コンテキストが異なります。 「A グレード ブラウザ」と呼ばれるブラウザのクラスです。これらは、(おそらく) 訪問者の大部分を占める典型的なユーザー メンバーです。
を呼び出します。

FF3.6 や Safari 4 などの優れた開発者用のナイトリー Web キットを使用する人たちのエクスペリエンスを向上させたい場合は、

素晴らしいことを試してみてください。

CSS のシャドウ付きテキストによる角の丸めなど (ただし、あまりやりすぎないでください) ドロップ シャドウ (上記の括弧内を参照) これらにより、サイトは素晴らしい見た目になりますが、
壊れるわけではありません。
ベスト プラクティスの点から未来を受け入れる

一方、あなたのニッチな Nintendo サイトにはかなりの数の
IE5 ユーザーが集まっています。かわいそうなあなたですが、あなたもそれを望んでいます。確実に戻ってくるようにするには、
外部ファイルに ajax スクリプトを含めることで、Ajax の動作に代わる手段を提供できます。

JS が有効になっていない場合は、リンクが更新される可能性があります。ページ全体など。

現代のベストプラクティスの観点からは、特定の
歴史的な市場が機能的な
サイトに対応していることを確認することになります。
これは優雅な劣化です。


自分で大まかに翻訳してください:

実際、これら 2 つのメソッドは同じ概念ですが、異なる背景で使用されます。第一レベル ブラウザと呼ばれるタイプのブラウザがあり、これらはおそらく Web サイトの閲覧者のほとんどが使用するブラウザであり、このタイプのより高度なブラウザに基づいて Web サイトを設計および構築することになります。このアプローチは、最新の最良の実装と呼ばれます。

次に例を示します。FF3.6 や Safari 4 などのブラウザのユーザーが Web サイトにアクセスしたときのユーザー エクスペリエンスを向上させたい場合は、CSS の角丸、テキストの影などの効果を追加できます。これらの機能は Web ページの見栄えを良くしますが、元の基本機能を破壊するものではありません。これがプログレッシブ・エンハンスメントです。

しかし現時点では、あなたの Web ページにはかなりの数の ie5 ユーザーがいます。 。これらを失いたくない場合は、Web ページにファイルを追加して、IE5 で js が Ajax スクリプトを開けない問題を解決し、Ajax 動作を実装するための別のオプションを提供できます。または、リンクを含むページ全体を直接開きます。最新のベスト プラクティスの観点から見ると、特定の歴史的市場を持つローエンド ブラウザーと互換性のある同様の機能が Web ページにあることを確認する必要があります。これは優雅な劣化です。