2022年にどのようなCSSが絶対に知っておく必要がありますか？

CSSは、ますます強力な機能があり、学習曲線が急速に発展しています。この記事では、今日のフロントエンド開発において、どのCSS知識が絶対に必要かを調べます。

Sacha Greifは、CSSが大きすぎるかどうかを公に疑問視しています。近年、ブラウザは、コンテナクエリ、相対色の構文、カスケードレイヤー、論理プロパティ、メディアクエリスコープ、独立した変換など、多くの新機能を追加しています。これは間違いなく、初心者とシニアフロントエンドエンジニアの両方に新しい学習の課題をもたらします。

すべてのCSSプロパティとそれらがどのように機能するかを完全に把握することは、過去緊張になりました。それで、どのCSS知識が絶対に必要ですか？

Vincas StonysとChrisは、それぞれ関連リストをそれぞれリストしようとしました。 5つの最も重要なCSSプロパティとセレクターをリストする必要がある場合、私のリストは次のとおりです。

属性writing-mode 特に学習に関しては、

属性が重要です。包括的設計の原則を習得し、ユーザーの言語に関係なく適切なレイアウトを作成するのに役立ちます。 writing-modeを理解すると、論理的な特性と価値を理解し、文書の流れを理解し、物理的方向ではなくブロック、インライン、開始と終了などの論理的方向から考えるように導きます。 writing-mode

属性display

固体属性の知識がなければ、優れたCSSコードを記述することは困難です。これは、レイアウトを作成するためのプロパティとフレームワークの両方です。それがなければ、FlexBoxまたはCSSグリッドはありませんので、これらの重要な機能を理解するための鍵です。

さらに、display属性と

属性は相互に補完します。ドキュメントの流れと論理的方向のアイデアを提供すると、

属性はまさに必要なものです。これを使用して、要素の通常のフローを変更し（たとえば、ブロック要素をインライン要素に変更する）、レイアウトを開始する（たとえば、柔軟なレイアウトコンテキストを作成する）ことができます。 display writing-modewriting-mode、display、

プロパティ

marginこれらの3つのプロパティはボックスモデルの一部であり、間隔とスタイルを制御するために使用され、すべてCSS長ユニットの理解が必要です。これらのプロパティの機能を理解し、それらが計算された要素のサイズにどのように影響するかは、スタイルコントロールを大幅に改善し、要素サイズが期待と一致しない一般的なCSSの問題を排除します。 padding border

および

pseudo-elements

::beforeおよび::afterは、通常一緒に学習される2つの擬似要素です。それらを使用して、さまざまなUI効果、さらには完全な単一のDivイラストを作成し、CSSの力を示すことができます。

::beforequery::after

クエリは、柔軟なレスポンシブレイアウトとさまざまな表示コンテキストを作成するための鍵です。コンテナクエリが成熟すると交換される可能性がありますが、現時点では、@mediaクエリは、学習レスポンシブデザインの優れた紹介です。

さらに、

クエリは、CSSの条件付き特性についての予備的な理解を提供します。デバイスの種類（例：画面または印刷）またはブラウザビューポートの条件（幅＆gt; = 768pxなど）に基づいていても、@media構文は、さまざまな条件に最適化されたレイアウトを作成するのに非常に役立ちます。 @mediaクエリは、ユーザーの好みに応じてスタイルを適用できるため、アクセシビリティにも関連しています（例：@media）。 prefers-reduced-motion

言及する価値のある他の属性とセレクター

もちろん、次のような他の多くの重要なCSSプロパティやセレクターがあります。

• calc()
• has()
• color
• font
• overflow（特に重要）
• position
• z-indexCSSの学習は、rote属性リストよりも重要です。これは段階的なプロセスであり、私が選択した5つのプロパティとセレクターは、あなたが良い基盤を築き、CSSのより深い学習に備えるのに役立ちます。

以上が2022年にどのようなCSSが絶対に知っておく必要がありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。