現在使用できる、強力で安定した優れたツールバーです。
すべてのフロントエンド開発者がコンテナの使い方を知っておくべきだと思います。
クエリ
スクロール スナップ エクスペリエンスを作成する。
position: absolute
と
グリッド
素早く円を出し、カスケード
レイヤ、
少ない労力で多くのユーザーにリーチできる論理的アプローチ
こちらが
それぞれの期待の概要を説明します
1. コンテナクエリ
10 年連続で最も要望の多かった CSS 機能は今 ブラウザ間で安定しており、 (2023 年)をご覧ください。
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
@container
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
container
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
2. スクロール スナップ
適切に連携されたスクロール体験は 他と一線を画します スクロール snap は、 システムのスクロール 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
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
scroll-snap-align
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
scroll-snap-stop
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
overscroll-behavior
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
3. グリッドパイル
単一セルの CSS グリッドを使う場合は、絶対位置ではなく、最初に積み重ねたら 相互に比較する場合は、 プロパティを整列して配置します
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
4. クイック サークル
CSS で円を作る方法はたくさんありますが、これが間違いなく最もおすすめです 最小限に抑える必要があります。
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
aspect-ratio
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
5. @layer でバリアントを制御する
Cascade レイヤ バリエーションの挿入に役立つ 保存するために使われたカスケード内の適切な場所に パターンの元のセットを返します。
/* file buttons.css */ @layer components.buttons { .btn.primary { … } }
次に、読み込み済みのまったく別のファイルに、 新しいバリエーションがあたかもボタンレイヤにあるかのように、 ずっと。
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
@layer
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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; }
padding-inline
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
margin-block
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
inset-inline
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">