ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose での変数の使用方法の詳細な説明
CSS_html/css_WEB-ITnose での変数の使用方法の詳細な説明
- WBOYオリジナル
- 2016-06-24 11:42:52998ブラウズ
CSS の変数は、利便性、コードの再利用、より信頼性の高いコード ベース、エラー防止機能の向上など、多くの利点をもたらします。
例
基本
CSS 変数を使用する場合、次の 3 つの主要なコンポーネントを知っておく必要があります:カスタム プロパティ
もう知っている色、マージン、幅、フォントサイズなどの 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 ドキュメントのルート要素を表します。これは、他のより具体的なセレクターを通じてカスタム属性値をオーバーライドできるため、カスタム属性を配置するのに適しています。
保守性
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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。