すぐに使える、強力で安定した CSS をツールベルトに追加します。
すべてのフロントエンド デベロッパーは、コンテナ クエリの使用方法、スクロール スナップ エクスペリエンスの作成方法、グリッドを使用して 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 機能の可能性について詳しくは、25 件ほどのデモが掲載されている巨大で刺激的な Codepen コレクションをご覧ください。
scroll-snap-type
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. グリッドパイル
1 つのセルの CSS グリッドで絶対位置を指定しないでください。重ねて配置したら、justify プロパティと align プロパティを使用して配置します。
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. クイック サークル
CSS で円を作成する方法はたくさんありますが、これは間違いなく最もミニマルな方法です。
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
aspect-ratio
5. @layer でバリエーションを制御する
カスケード レイヤを使用すると、後で発見または作成されたバリアントを元のバリアント セットと一緒にカスケードの適切な場所に挿入できます。
/* file buttons.css */ @layer components.buttons { .btn.primary { … } }
次に、まったく別のファイルで、ランダムに読み込まれるタイミングで、新しいバリエーションをボタンレイヤに追加します。このバリエーションは、最初から他のバリエーションと一緒に存在していたように見せます。
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
@layer
6. 論理プロパティを使用して、覚える量を減らしてリーチを拡大
この新しい 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; }