すべてのフロントエンド デベロッパーが知っておくべき 6 つの CSS スニペット（2023 年）

現在使用できる、強力で安定した優れたツールバーです。

Adam Argyle

すべてのフロントエンド開発者がコンテナの使い方を知っておくべきだと思います。 クエリ スクロール スナップ エクスペリエンスを作成する。 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

対応ブラウザ

  • Chrome: 105。 <ph type="x-smartling-placeholder">
  • Edge: 105。 <ph type="x-smartling-placeholder">
  • Firefox: 110。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

container

対応ブラウザ

  • Chrome: 105。 <ph type="x-smartling-placeholder">
  • Edge: 105。 <ph type="x-smartling-placeholder">
  • Firefox: 110。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <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

対応ブラウザ

  • Chrome: 69。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 99。 <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

ソース

scroll-snap-align

対応ブラウザ

  • Chrome: 69。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 68。 <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

ソース

scroll-snap-stop

対応ブラウザ

  • Chrome: 75。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 103。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <ph type="x-smartling-placeholder">

ソース

overscroll-behavior

対応ブラウザ

  • Chrome: 63。 <ph type="x-smartling-placeholder">
  • Edge: 18。 <ph type="x-smartling-placeholder">
  • Firefox: 59。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

3. グリッドパイル

単一セルの CSS グリッドを使う場合は、絶対位置ではなく、最初に積み重ねたら 相互に比較する場合は、 プロパティを整列して配置します

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}
grid

対応ブラウザ

  • Chrome: 57。 <ph type="x-smartling-placeholder">
  • Edge: 16。 <ph type="x-smartling-placeholder">
  • Firefox: 52。 <ph type="x-smartling-placeholder">
  • Safari: 10.1。 <ph type="x-smartling-placeholder">

ソース

4. クイック サークル

CSS で円を作る方法はたくさんありますが、これが間違いなく最もおすすめです 最小限に抑える必要があります。

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}
aspect-ratio

対応ブラウザ

  • Chrome: 88。 <ph type="x-smartling-placeholder">
  • エッジ: 88。 <ph type="x-smartling-placeholder">
  • Firefox: 89。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <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

対応ブラウザ

  • Chrome: 99。 <ph type="x-smartling-placeholder">
  • エッジ: 99。 <ph type="x-smartling-placeholder">
  • Firefox: 97。 <ph type="x-smartling-placeholder">
  • Safari: 15.4。 <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

対応ブラウザ

  • Chrome: 87。 <ph type="x-smartling-placeholder">
  • Edge: 87。 <ph type="x-smartling-placeholder">
  • Firefox: 66。 <ph type="x-smartling-placeholder">
  • Safari: 14.1。 <ph type="x-smartling-placeholder">

ソース

margin-block

対応ブラウザ

  • Chrome: 87。 <ph type="x-smartling-placeholder">
  • Edge: 87。 <ph type="x-smartling-placeholder">
  • Firefox: 66。 <ph type="x-smartling-placeholder">
  • Safari: 14.1。 <ph type="x-smartling-placeholder">

ソース

inset-inline

対応ブラウザ

  • Chrome: 87。 <ph type="x-smartling-placeholder">
  • Edge: 87。 <ph type="x-smartling-placeholder">
  • Firefox: 63。 <ph type="x-smartling-placeholder">
  • Safari: 14.1。 <ph type="x-smartling-placeholder">

ソース