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

すぐに使える、強力で安定した CSS をツールベルトに追加します。

すべてのフロントエンド デベロッパーは、コンテナ クエリの使用方法、スクロール スナップ エクスペリエンスの作成方法、グリッドを使用して position: absolute を回避する方法、円をすばやく作成する方法、カスケード レイヤの使用方法、論理プロパティを使用して少ない労力でより多くのことを達成する方法を知っている必要があります。それぞれの要件の概要は次のとおりです。

10 年連続で最もリクエストの多かった CSS 機能が、すべてのブラウザで安定版になりました。2023 年には幅のクエリで使用できるようになります。

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}
@container

対応ブラウザ

  • Chrome: 105。
  • Edge: 105。
  • Firefox: 110。
  • Safari: 16。

ソース

container

対応ブラウザ

  • Chrome: 105。
  • Edge: 105。
  • Firefox: 110。
  • Safari: 16。

ソース

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

対応ブラウザ

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11。

ソース

scroll-snap-align

対応ブラウザ

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 68.
  • Safari: 11。

ソース

scroll-snap-stop

対応ブラウザ

  • Chrome: 75.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 15。

ソース

overscroll-behavior

対応ブラウザ

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16。

ソース

3. グリッドの山

1 つのセルの CSS グリッドで絶対位置を指定しないでください。重ねて配置したら、justify プロパティと align プロパティを使用して配置します。

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

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

対応ブラウザ

  • Chrome: 57
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1。

ソース

4. クイック サークル

CSS で円を作成する方法はたくさんありますが、これは間違いなく最もミニマルな方法です。

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

対応ブラウザ

  • Chrome: 88。
  • Edge: 88.
  • Firefox: 89。
  • Safari: 15。

ソース

5. @layer でバリエーションを制御する

カスケード レイヤを使用すると、後で検出または作成されたバリアントが、元のバリエーション セットとともに、カスケードの適切な場所に挿入できます。

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    
  }
}

次に、まったく別のファイルで、ランダムに読み込まれるタイミングで、新しいバリエーションをボタンレイヤに追加します。このバリエーションは、最初から他のバリエーションと一緒に存在していたように見せます。

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    
  }
}
@layer

対応ブラウザ

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4。

ソース

6. 論理プロパティで覚える量を減らしてリーチを拡大

この新しいボックスモデルを覚えて、国際的な書式モードドキュメントの向きで左右のパディングや余白を変更する必要がなくなるようにしましょう。スタイルを物理プロパティから論理プロパティ(padding-inlinemargin-inlineinset-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。
  • Edge: 87。
  • Firefox: 66。
  • Safari: 14.1。

ソース

margin-block

対応ブラウザ

  • Chrome: 87。
  • Edge: 87。
  • Firefox: 66。
  • Safari: 14.1。

ソース

inset-inline

対応ブラウザ

  • Chrome: 87。
  • Edge: 87。
  • Firefox: 63.
  • Safari: 14.1。

ソース