その他

10個のプロパティ

CSS変数 (--property)

その他

CSS内で変数を定義・使用できる機能です。--variable-name: valueで定義し、var(--variable-name)で参照します。テーマ切り替えや保守性の向上に大きく貢献し、デザインシステムの構築に不可欠です。

Example

:root {
  --primary-color: #3b82f6;
  --spacing: 1rem;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

will-change

その他

要素がどのプロパティを変更する予定かをブラウザに事前通知し、最適化を促すプロパティです。transform、opacity等を指定できますが、過剰な使用はパフォーマンスを悪化させるため注意が必要です。

Example

.animated-element {
  will-change: transform, opacity;
}

contain

その他

要素の影響範囲を制限し、ブラウザの最適化を助けるプロパティです。layout、paint、size、styleなどの値で、要素が外部に与える影響を制限します。大規模なアプリケーションのパフォーマンス改善に有効です。

Example

.widget {
  contain: layout style paint;
}

@media

その他

画面サイズ、デバイスタイプ、印刷状況などの条件に基づいてスタイルを適用するルールです。レスポンシブデザインの基礎となる機能で、モバイル、タブレット、デスクトップなど様々なデバイスに対応できます。

Example

@media (max-width: 768px) {
  .container {
    padding: 1rem;
    font-size: 14px;
  }
}

table-layout

その他

テーブルのレイアウトアルゴリズムを制御するプロパティです。セルの幅をどのように計算するかを決定し、テーブルの描画パフォーマンスや見た目に影響します。大きなテーブルでの表示速度向上にも効果的です。

Example

.table-auto {
  table-layout: auto;
  width: 100%;
}

/* セル内容に応じて幅が自動調整される */
th, td {
  padding: 8px;
  text-align: left;
}

color-scheme

その他

要素がどのカラースキーム（ライト/ダーク）で表示されるかを示します。ブラウザのフォーム要素などのデフォルトスタイルに影響します。

Example

color-scheme: light dark;

CSSネスティング

その他

Sassなどのプリプロセッサなしで、セレクタを入れ子（ネスト）にして書けるネイティブCSS機能です。親子関係のスタイルをまとめて記述でき、&で親セレクタを参照します。ビルドツール不要でSass風の書き心地を実現します。

Example

.card {
  padding: 1rem;

  .title {
    font-size: 1.2rem;
  }

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }
}

@property

その他Baseline 新しく利用可能

CSS変数（カスタムプロパティ）に型・初期値・継承の有無を登録できるアットルールです。型を登録した変数はtransitionやanimationで補間可能になり、グラデーションのアニメーションなど従来不可能だった表現がCSSだけで実現できます。

Example

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.gradient-border {
  background: conic-gradient(from var(--angle), #2563eb, #ec4899, #2563eb);
  transition: --angle 0.5s;
}

.gradient-border:hover {
  --angle: 180deg;
}

@layer

その他

スタイルの優先順位を詳細度ではなく「レイヤーの宣言順」で管理するカスケードレイヤーです。reset・base・components・utilitiesのような層に分ければ、詳細度バトルや!importantの乱用を根本から解消できます。

Example

/* 先に優先順位を宣言（後ろほど強い） */
@layer reset, base, components, utilities;

@layer base {
  a { color: #2563eb; }
}

@layer components {
  .button { color: white; }
}

@scope

その他Baseline 新しく利用可能

スタイルの適用範囲を特定の要素の部分木に限定するアットルールです。下限（to）も指定でき、「カードの中だけ、ただし埋め込みウィジェットの中は除く」のような範囲指定が可能。BEM的な命名規則に頼らないスコープ管理を実現します。

Example

@scope (.card) {
  img {
    border-radius: 8px;
  }
  :scope {
    padding: 1rem;
  }
}