CSS_html/css_WEB-ITnose での変数の使用方法の詳細な説明-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose での変数の使用方法の詳細な説明

WBOY

リリース： 2016-06-24 11:42:52

オリジナル

1013 人が閲覧しました

CSS の変数は、利便性、コードの再利用、より信頼性の高いコードベース、エラー防止機能の向上など、多くの利点をもたらします。

例

基本

CSS 変数を使用する場合、次の 3 つの主要なコンポーネントを知っておく必要があります:

カスタムプロパティ

var() 関数

:root 擬似クラス

カスタムプロパティ

もう知っている色、マージン、幅、フォントサイズなどの CSS の標準プロパティ。

次の例では、CSS color プロパティを使用しています。

:root { --base-font-size: 16px; --link-color: #6495ed; }p { font-size: var( --base-font-size ); }a { font-size: var( --base-font-size ); color: var( --link-color ); }

ログイン後にコピー

カスタムプロパティ は、単に私たち (CSS ファイルを作成した人) がプロパティの名前を定義することを意味します。 属性名をカスタマイズするには、プレフィックスとして -- を使用する必要があります。
黒の値を持つ text-color という名前のカスタム属性を作成したい場合は、次のようにすることができます:

body { color: #000000; /* The "color" CSS property */ }

ログイン後にコピー

var() 関数

カスタム属性を適用するには、

var() を使用する必要があります。 関数、それ以外の場合、ブラウザーはそれらが何を表しているのか分かりません。 p、h1、h2 のスタイルで --text-color を使用したい場合は、次のように var() 関数を使用できます:

:root { --text-color: #000000; /* A custom property named "text-color" */ }

ログイン後にコピー

これは次と同等です:

:root { --text-color: #000000; }p { color: var( --text-color ); font-size: 16px; }h1 { color: var( --text-color ); font-size: 42px; }h2 { color: var( --text-color ); font-size: 36px; }

ログイン後にコピー

:root pseudo-class

カスタム属性を配置する場所が必要です。カスタムプロパティは任意のスタイルルールで指定できますが、あらゆる場所にプロパティを定義することは得策ではありません。これは CSS の保守性と可読性にとって課題となります。

:root 疑似クラスは、HTML ドキュメントのルート要素を表します。これは、他のより具体的なセレクターを通じてカスタム属性値をオーバーライドできるため、カスタム属性を配置するのに適しています。

CSS 変数の利点

保守性

Web 開発プロジェクトでは、特定の CSS プロパティ値を再利用することがよくあります:

p { color: #000000; font-size: 16px; }h1 { color: #000000; font-size: 42px; }h2 { color: #000000; font-size: 36px; }

ログイン後にコピー

特定のプロパティ値を変更する必要がある場合、問題が明らかになります。

特に CSS ファイルが大きい場合にプロパティ値を手動で変更すると、時間がかかるだけでなく、エラーが発生する可能性があります。同様に、バッチ検索と置換を実行すると、他のスタイルルールに誤って影響を与える可能性があります。
CSS 変数を使用して書き換えることができます:

h1 { margin-bottom: 20px; font-size: 42px; line-height: 120%; color: gray; }p { margin-bottom: 20px; font-size: 18px; line-height: 120%; color: gray; }img { margin-bottom: 20px; border: 1px solid gray; }.callout { margin-bottom: 20px; border: 3px solid gray; border-radius: 5px; }

ログイン後にコピー

現在の顧客が、テキストの色が明るすぎて読みにくいため、テキストの色を変更したいと言っているとします。現時点では、更新する必要があるのは 1 行だけです。 CSS ルールの説明:

:root { --base-bottom-margin: 20px; --base-line-height: 120%; --text-color: gray; }h1 { margin-bottom: var( --base-bottom-margin ); font-size: 42px; line-height: var( --base-line-height ); color: var( --text-color ); }p { margin-bottom: var( --base-bottom-margin ); font-size: 18px; line-height: var( --base-line-height ); color: var( --text-color ); }img { margin-bottom: var( --base-bottom-margin ); border: 1px solid gray; }.callout { margin-bottom: var( --base-bottom-margin ); border: 1px solid gray; border-radius: 5px; color: var( --text-color ); }

ログイン後にコピー

CSS の可読性の向上

カスタム属性により、スタイルシートがより読みやすくなり、CSS プロパティ宣言がよりセマンティックになります。

このステートメント

--text-color: black;

ログイン後にコピー

を次のステートメント

background-color: yellow;font-size: 18px;

ログイン後にコピー

と比較してください。 yellow や 18px などの属性値は有用なコンテキスト情報を提供しませんが、--base-font-size や -- などを読むと、属性名はhighlight-colorと同じなので、他の人のコードでもこの属性値が何をしているのかすぐに分かります。

注意事項

大文字と小文字を区別します

カスタム属性は大文字と小文字が区別されます(通常のCSSルールとは異なります)

background-color: var( --highlight-color );font-size: var( --base-font-size );

ログイン後にコピー

カスタム属性値の解析

カスタム属性が繰り返し宣言される場合、その割り当ては通常のCSSカスケードに従いますそして継承ルール。たとえば、次の例:

HTML

:root { --main-bg-color: green; --MAIN-BG-COLOR: RED; }.box { background-color: var( --main-bg-color ); /* green background */ }.circle { BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */ border-radius: 9999em; }.box,.circle { height: 100px; width: 100px; margin-top: 25px; box-sizing: padding-box; padding-top: 40px; text-align: center; }

ログイン後にコピー

CSS

<body>  <div class="container">    <a href="">Link</a>  </div></body>

ログイン後にコピー

.container ルールが削除されると、リンクの色の値は緑色になります。

フォールバック値

var() 関数を使用する場合、最初のパラメーターから , で区切られた追加パラメーターとしてフォールバック属性値を割り当てることができます。次の例を見てください:

HTML

:root { --highlight-color: yellow; }body { --highlight-color: green; }.container { --highlight-color: red; }a { color: var( --highlight-color ); }

ログイン後にコピー

CSS

<div class="box">A Box</div>

ログイン後にコピー

フォールバック値パラメータが var() に渡されるため、div の背景色は赤でレンダリングされます。

無効な値

CSS プロパティに間違ったタイプの値を割り当てないように注意してください。

以下の例では、カスタム属性 --small-button に長さの単位が割り当てられているため、.small-button スタイルで使用すると無効になります (翻訳者注: color 属性の型の値が間違っているため)

div { --container-bg-color: black; }.box { width: 100px; height: 100px; padding-top: 40px; box-sizing: padding-box; background-color: var( --container-bf-color, red ); color: white; text-align: center; }

ログイン後にコピー

Aこれを回避する良い方法は、わかりやすいカスタムプロパティ名を付けることです。たとえば、上記のカスタム属性に --small-button-width という名前を付けます

CSS 変数のブラウザサポート

CSS 変数は非常に使いやすいですが、ブラウザのサポートはあまり良くありません:

または、ここをクリックしてリンク: var support

この記事は @Jacob Gube の「 Introduction to CSS Variables 」をもとに翻訳したものであり、翻訳内容に個人的な理解や考えが含まれておりますので、翻訳が良くない場合や間違っている点がございましたら、同業者の方にアドバイスをお願いいたします。この翻訳を転載する場合は、英語のソースを明記してください: http://sixrevisions.com/css/variables/。