CSS/@starting-style

@starting-style

@starting-styleは、ページの初期状態（ロード時や初期レンダリング時）に適用されるスタイルを指定するためのCSS at-ruleです。このルールは、特定のインタラクションやスクリプトによるスタイルの変更が発生する前のデフォルトスタイルを設定する目的で使用されます。

基本的な@starting-styleの構文は以下の通りです：

@starting-style {
  <CSSルール>;
}

@starting-style {
  body {
    background-color: white;
    color: black;
  }

  h1 {
    font-size: 2em;
    margin-bottom: 20px;
  }
}

この例では、ページのロード時に背景色を白、文字色を黒に設定し、h1要素には初期サイズと余白が適用されます。

@starting-style {
  button {
    background-color: lightgray;
    border: 1px solid gray;
  }
}

button:hover {
  background-color: darkgray;
}

ここでは、@starting-styleを使ってボタンの初期状態を設定し、ユーザーのホバーアクションによってスタイルが変更されるようにしています。

ブラウザサポート: @starting-styleは実験的な機能であり、現在一部のブラウザでのみサポートされています。使用時にはフォールバックを用意してください。
スコープの明確化: このルールは、すべてのスタイルを初期化するのではなく、特定の要素の初期状態を設定するために使用します。

最新のブラウザ対応状況はCan I Useで確認してください。