ダブルダッシュ CSS プロパティとは何ですか?またどのように機能しますか?

謎めいた二重ダッシュ CSS プロパティの探索

プロパティ名の前に二重ダッシュが付いている奇妙な CSS コードに遭遇したことがあるかもしれません。これらは通常の CSS プロパティではなく、CSS3 で導入されたカスタム プロパティです。

カスタム プロパティについて

CSS 変数とも呼ばれるカスタム プロパティを使用すると、値を定義して再利用できます。スタイルシート全体にわたって。設計要素を一元化することで、柔軟性と保守性が可能になります。

構文と使用

カスタム プロパティは、次の構文を使用してルート要素 (:root) 内で宣言されます。

:root {
  --property-name: property-value;
}

これで、var() を使用して任意の要素内のカスタム プロパティ値にアクセスできるようになります。 function:

#element {
  color: var(--property-name);
}

W3C の例:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

この例では、メイン カラーとアクセント カラーのカスタム プロパティを定義し、# 内のカラー値変数を使用します。 foo h1 セレクター。

参照とドキュメント

カスタム プロパティに関する包括的なドキュメントについては、W3C 仕様ページを参照してください:

https://www.w3.org/TR/css-variables/

以上がダブルダッシュ CSS プロパティとは何ですか?またどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。