2022年に期待される新しいCSS機能

公開: 2022-07-07

あまり知られていないスクロールスナッププロパティから見事な新しいカラーパレットまで、見逃したくないカスケードスタイルシートの更新をいくつか紹介します。

CSS（Cascading Style Sheets）は1996年にデビューし、今でもWeb開発スタックの重要で進化しているコンポーネントです。 CSSは、他の生きている言語と同様に、実際の慣習に応じて常に新しい機能を追加しています。急速な進化のため、熱心な開発者でさえ新機能を見逃す可能性があります。近い将来CSSに登場する最も便利な機能のいくつかをチェックしてください。

サブグリッド

CSSは、その発足以来、多くのひどい欠陥について批判されてきました。 CSSで何かを中央に配置するなど、いくつかの単純なタスクでは、過度に複雑な回避策と手間がかかります。
もう1つの重要な問題は、少なくともCSSグリッドレイアウトモジュールが介入するまでは、合理的なグリッドレイアウトを実現することでした。

グリッドレイアウトは、display：grid宣言によって示され、2次元でグリッドを制御しながら、長方形のレイアウトを定義できるという点でFlexboxに似ています。
調査によると、ほとんどのCSS開発者はグリッドレイアウトを認識しており、私たちの多くはそれを使用しています。（まだ試していない場合は、試してみることを忘れないでください！）

サブグリッドは、グリッドレイアウトモジュールのまったく新しい非常に便利な機能です。サブグリッド機能を使用すると、親グリッドのレイアウトを継承する子グリッドを作成できます。

グリッド表示を別のグリッド内にネストするのとは対照的に、子グリッドは独自の寸法とギャップを定義します。親のレイアウトは、サブグリッドを使用するときにサブグリッドに適用されますが、必要に応じて、サブグリッドはレイアウトの側面をオーバーライドできます。

サブグリッドは現在Firefox71以降でのみ使用できますが、Safari WebKit、Google Chrome、およびMicrosoftEdgeで使用できるようになる予定です。サブグリッドは、将来的に非常に便利なレイアウト機能になります。

アクセントの色

それらの人気にもかかわらず、いくつかの表示要素はスタイリングが難しいことで有名です。たとえば、チェックボックスとラジオボタンは、ブラウザの実装を非表示にしながら、それらの動作を模倣するカスタムウィジェットに置き換えられることがよくあります。新しいCSSアクセントカラーオプションを使用して、これらの要素をターゲットにできます。

たとえば、リスト1に示すように、ページのすべてのラジオボタンにマゼンタ色を適用できます（このライブの例も参照してください）。

リスト1：ラジオボタンのCSSカラーコントロール

<style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

スクロールスナップ

CSSは、Webブラウザでスクロールスナップアクションを制御するための便利なプロパティセットを提供します。これらの機能の多くは、最近のブラウザバージョンですでに利用可能ですが、他の機能はまだ展開されています。

CSSユーザーの3分の1以上がまだスクロールスナップに気付いていないことは注目に値します。

scroll-snap- *プロパティコマンドは、コンテナでのスクロール位置の動作を微調整するためのいくつかのオプションを提供します。開発者は精度の向上から恩恵を受け、エンドユーザーはよりスムーズでより制御されたユーザーエクスペリエンスから恩恵を受けます。

リスト2は、divのスクロールスナップを制御する方法の簡単な例を示しています（このライブの例も参照してください）。

リスト2は、単純なスクロールスナップの例です。

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

リスト3のyスクロール位置は、スクロール移動をどこで離しても、自動的に子要素に移動します。これは、スクロールコンテナのscroll-snap-typeプロパティがyに設定されており、子要素がscroll-snap-align：start宣言を持っているためです。

この動作も変更できます。たとえば、scroll-snap-typeプロパティをy近接に設定できます。これは期待どおりに機能し、スクロールが要素に近い場合にのみスナップします。

さらに、関連するoverscroll-behaviorプロパティは、ネストされたスクロールコンテナの動作を制御します。

論理CSSプロパティ

コンテナの境界線を左右、または下部に設定したい場合は、border-leftとborder-right、またはborder-top、border-bottomのプロパティを逐語的に書き出す必要があるという煩わしさを経験したことがあるでしょう。上。問題は、変更したくない境界線に影響を与えずにショートカットプロパティを使用する方法がないことです。これは、パディングやマージンなどの要素にも当てはまります。

CSS論理プロパティモジュールを使用すると、インラインキーワードとブロックキーワードを使用して、抽象的な方法で物事を参照できます。左右を参照するときは、インラインを使用してください。上と下を参照するときは、ブロックを使用します。たとえば、divの左側と右側に境界線を追加するには、リスト3のコードを使用します（ここで実際の例も参照してください）。

リスト3：インラインロジックによる左右のパディング

div { border- inline : 10px dashed seagreen; }

これらは境界線の便利なショートカットですが、インラインおよびブロック論理キーワードは他のさまざまなプロパティにもあります。

開発者の大多数は、これらのショートカットを使用して、テキストの方向と書き込みモードの問題に対処します。このような場合、padding-inline-endのようなプロパティを使用すると、テキストの方向に関係なく、末尾のパディングをターゲットにすることができます。

基本的に、インラインとブロックへの抽象化により、さまざまな状況に適用できる一般化されたスタイルの作成が可能になります。詳細については、CSSの論理プロパティと値を参照してください。

コンテナ検索

コンテナクエリはCSSでまだ完全に安定していませんが、まもなく安定します。それらは、レスポンシブデザインについての考え方に大きな影響を与えます。基本的な考え方は、ビューポートとメディアだけでなく、親コンテナのサイズに基づいてブレークポイントを設定できるようになるということです。

構文の明確な定義はありませんが、おそらくリスト4のようになります。

@containerリスト4。

 @container (max-width: 650px){ … }

UIのネストされたレイヤー全体に表示されるさまざまなコンテナーのサイズに基づいて、レイアウトを微調整することがどれほど強力になるかを検討してください。これはかなり重要な変更であり、ほぼ確実にインターフェイスの革新の波を引き起こします。

3つの新しい配色

CSSの実践者は、太古の昔からデバイスディスプレイを美しくし、活気づけるためにRGB、HEX、および名前付きの色を使用してきました。最近、HSLスタイルの色宣言が導入されました。 CSS仕様では、新しいカラー記述子、つまりhwb、lab、およびlchが導入されています。

HWBは、色相、白色度、および黒色度の略語です。人間が読みやすいことで際立った素敵なタッチです。色を選択してから、白と黒を追加します。 Chrome、Firefox、Safariの最新バージョンと互換性があります。（Microsoft Edgeの機能リファレンスは、このテーマについては奇妙なことに耳をつんざくほど静かです。）HWBの詳細については、hwb（）–人間の色の表記法を参照してください。 RGBやHWLと同様に、透明度のためのアルファチャネルがあります。

明度、彩度、色相を表すLCHは、利用可能なカラーパレットを拡張することで注目に値します。 CSSでLCH色は何、なぜ、どのように使用されますか？これは、CSSの色彩理論に関する目を見張るような議論を含む優れた概要です。現在、SafariのみがLCHをサポートしています。

新しい色空間の最も理論的なものはLABであり、これはCIELAB色理論から派生しています。ラボカラー記述子は、人間が知覚できる色のスペクトル全体をカバーすると主張していますが、これは大胆な主張です。 LCHと同様に、現在Safariでのみサポートされています。 LAB for CSSの詳細については、MozillaCSSのドキュメントを参照してください。