CSS カスタム プロパティ (二重ダッシュ付き) とは何ですか?また、それらはどのように機能しますか?

二重ダッシュを使用した CSS カスタム プロパティの探索

CSS の領域では、複雑なコード構文が登場しています。二重ダッシュが接頭辞として付けられたプロパティを含む CSS コードは、多くの人を悩ませてきました。この記事は、これらのユニークなプロパティの背後にある謎を解き明かし、CSS におけるその重要性を掘り下げることを目的としています。

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

CSS の先頭に付く二重ダッシュ (--)プロパティはカスタム プロパティを示します。 CSS3 で導入されたこれらのプロパティを使用すると、開発者はスタイルシート内または Web サイト全体にわたって独自の再利用可能な変数を定義できます。これらにより、柔軟性とコードの保守性が強化されます。

W3C 仕様:

カスタム プロパティの公式 W3C 仕様では、構文が --[custom-property-name] として定義されています。カスタム プロパティは 2 つのダッシュで始まり、その後に有効なプロパティ名が続く必要があります。

カスタム プロパティの追加:

カスタム プロパティの追加は簡単です。 :root 要素またはその他の有効なスコープ内でそれらを定義し、 -- 接頭辞を使用して値を割り当てます。

例:

次の CSS コードを考えてみましょう。

:root {
  --color-link: #04b;
  --color-greenurl: 13px;
}

この例では、--color-link と --color-greenurl はカスタム プロパティです。開発者は、var() 関数を使用して、CSS コード全体でこれらのプロパティを参照できます。

カスタム プロパティの利点:

• 再利用性: カスタム プロパティにより、複数のスタイルシート間で共通のデザイン要素をシームレスに再利用できます。コンポーネント。
• 集中管理: サイト全体の設計値を管理するための集中的な場所を提供し、不一致のリスクを軽減します。
• 動的スタイリング: 変数をカスタム プロパティに割り当てることで、開発者はユーザーの好みやメディアに基づいて動的なスタイルを実装できます

より包括的なドキュメントと例については、[w3.org/TR/css-variables/](https://www.w3.org/TR) にある W3C カスタム プロパティ仕様を参照してください。 /css-variables/).

以上がCSS カスタム プロパティ (二重ダッシュ付き) とは何ですか?また、それらはどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。