2015年のCSS3以来、何が新しいですか？

CSS3の影響は否定できませんでした。勾配、アニメーション、丸い角、箱の影、変換など、豊富な機能が革新化されたCSS開発。 CSS3（および関連する「HTML5」モニカー）の広範な採用により、学習リソースが洪水につながった。ただし、多くの開発者は、それ以来、CSSスキルを大幅に更新していません。この記事はそのギャップを埋めます。

スコット・ヴァンデヘイの「一言で言えば、現代のCSS」はこの学習曲線を強調しています。彼は、プリプロセッサの必要性の低下（将来の機能のためのオートプレフィクサーとポリフィルを含む）と、CSS-in-JSのコンテキスト固有の関連性（主にJavaScriptが多いプロジェクトで有用）に注目しています。彼は、カスタムプロパティ、フレックスボックス、グリッドをマスターすることの重要性を強調しています。

これに基づいて、2015年の約2015年以来、重要なCSSの進歩を探りましょう。

Post-CSS3強化

レイアウト革命：FlexBoxとグリッド

フレックスボックスとグリッドは、最新のCSSの基本です。グリッドのパワーは、サブグリッドと石積みのレイアウトによって増幅されます（ただし、クロスブラウザーの信頼性はまだ発生しています）。

 .card {
  ディスプレイ：グリッド;
  Grid-Template-Columns：150px 1fr;
  ギャップ：1rem;
}
.card .nav {
  ディスプレイ：Flex;
  ギャップ：0.5rem;
}

CSSカスタムプロパティ：デザイントークンとテーマ

カスタムプロパティは、設計トークンを管理し、一貫性を確保し、メンテナンスを簡素化するために重要です。ダークモードの実装が代表的な例です。サイト全体は、主にカスタムプロパティを使用してスタイルを整えることができます。これは、Tailwind CSS（分裂的ではあるが、アプローチがあります）などのフレームワークを補完します。

 html {
  -BGCOLOR：＃70F1D9;
   - フォントサイズベース：クランプ（1.833REM、2VW 1REM、3REM）;
  -Font-Size-LRG：クランプ（1.375REM、2VW 1REM、2.25REM）;
}

html.dark {
  -BGCOLOR：＃2D283E;
}

優先クエリ：ユーザー中心のデザイン

従来のメディアクエリを拡張し、ユーザーの好みを検出し、優先順位のクエリ（たとえば、 prefers-reduced-motion 、 prefers-color-scheme ）。これにより、よりアクセスしやすくパーソナライズされたユーザーエクスペリエンスが可能になります。

 @media（reduced-motion：reduce）{
  * {
    アニメーション期間：0.001S！重要。
  }
}

@media（より好ましい -  color-scheme：dark）{
  ：根 {
    -BG：＃222;
  }
}

強化された色の構文と新しいカラースペース

色の構文は、関数内に直接アルファ値を含めるように進化しました（例： rgb(0 0 255 / 0.5) ）。新しいカラースペースcolor() 、 lab() 、 lch() 、 hwb() - 拡張カラー表現機能。

 。ブロック {
  背景：HSL（0 33％53％ / 0.5）;
  背景：RGB（255 0 0）;
  背景：color（display-p3 0.9176 0.2003 0.1386）;
  背景：ラボ（52.2345％40.1645 59.9971 / .5）;
  背景：HWB（194 0％0％ / .5）;
}

可変フォント：拡張されたタイポグラフィ

可変フォントは、従来のWebフォントと比較して、パフォーマンスの改善と設計の柔軟性を提供します。カラーフォントは存在しますが、広範囲にわたる採用を獲得していません。

体 {
  フォントファミリー：「再帰」、sans-serif;
  font-weight：950;
  font-variation-settings： 'mono' 1、 'casl' 1;
}

パス、クリッピング、マスキングを介したSVG統合

CSSはSVGとシームレスに統合され、形状ベースのクリッピング（ clip-path ）、マスキング（ mask ）、パスベースのアニメーション（ offset-path ）、およびパス操作（ d属性）を可能にします。

 。切り取る {
  クリップパス：ポリゴン（25％​​0％、75％0％、100％50％、75％100％、25％100％、0％50％）;
}

CSSフィルター：画像と要素の操作

CSSフィルターは、広範な画像操作機能（ filter ）、バックグラウンドブレンド（ background-blend-mode ）、バックドロップフィルタリング（ backdrop-filter ）、および要素ブレンド（ mix-blend-mode ）を提供します。

 .Disable {
  フィルター：Blur（1px）Grayscale（1）;
}

Houdini：JavaScriptでCSSを拡張します

Houdiniは、ペイントAPI、プロパティと値API、レイアウトAPI、アニメーションAPIなど、JavaScriptを搭載したCSS拡張機能を提供しています。ブラウザのサポートはさまざまですが、そのモジュール性と使いやすさは有望です。

 "https://unpkg.com/extra.css/confetti.js";

Shadow DomおよびWebコンポーネントのスタイリング

Shadow Domは、Webコンポーネントのスタイリングに影響を与え、外部スタイリング技術を理解する必要があります。

私のコンポーネント{
  -BG：lightgreen;
}

CSSの未来

現在の機能に追いつくことが重要ですが、いくつかの有望な進歩が地平線上にあります。コンテナクエリ、コンテナユニット、独立変換、ネスト、カスケード層、ビューポートユニットの改善、 :has()セレクター、スクロールタイムライン。

この概要は、CSS3 ERA以来のCSSの進歩に関する包括的な更新を提供し、開発者に最新の効率的でユーザーフレンドリーなWebサイトを構築するための知識を備えています。

以上が2015年のCSS3以来、何が新しいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。