強力で安定性の高いツールバーで、すぐにご使用いただけます。
すべてのフロントエンド デベロッパーは、コンテナクエリの使用方法、スクロール スナップ エクスペリエンスの作成方法、グリッドでの position: absolute の使用法、カスケード レイヤの使用法、論理プロパティにより、より少ないリソースでより多くのものに到達する方法を知っておくべきです。ここでは、それぞれの期待値について簡単に説明します。
1. コンテナクエリ
10 年連続で最も多くリクエストされた CSS 機能がすべてのブラウザで安定し、2023 年には幅のクエリにご利用いただけるようになりました。
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
2. スクロール スナップ
適切にオーケストレーションされたスクロール エクスペリエンスは、他のエクスペリエンスとは一線を画します。スクロール スナップは、意味のある停止点を提供しながら、システムのスクロール UX にマッチさせるのに最適です。
.snaps {
overflow-x: scroll;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.snap-target {
scroll-snap-align: center;
}
.snap-force-stop {
scroll-snap-stop: always;
}
この CSS 機能の可能性について詳しくは、こちらの膨大な量の Codepen コレクション（約 25 のデモ）をご覧ください。
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3.グリッドパイル
単一セルの CSS グリッドに絶対位置を指定しないようにします。これらを互いに重ねて配置したら、両端揃えプロパティと位置揃えプロパティを使用して配置します。
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. クイックサークル
CSS で円を作成する方法はいろいろありますが、これが最も最小限の方法であることは間違いありません。
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. @layer でバリアントを制御する
カスケード レイヤを使用すると、後で検出または作成されたバリアントを挿入して、元のバリアント セットとともにカスケード内の適切な場所に挿入できます。
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
次に、別のランダムなタイミングで読み込まれたまったく別のファイルで、あたかも他のバリアントとともにあったかのように、新しいバリアントをボタンレイヤに追加します。
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. 論理プロパティを使用して記憶を減らし、より多くのユーザーにリーチする
この 1 つの新しいボックスモデルを覚えておいてください。国際的な書き込みモードとドキュメント方向のために左右のパディングやマージンを再度変更することについて気にする必要はありません。物理プロパティから padding-inline、margin-inline、inset-inline などの論理プロパティまでスタイルを調整すると、ブラウザが調整を行います。
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}