CSS 【詳しい解説】カスタムプロパティ（CSS変数ともいう）

CSS 【詳しい説明】カスタムプロパティ（CSS変数とも呼ばれます）

2024-07-12

変数を宣言する - -

変数の命名規則

数値命名をサポート
ダッシュとスペースを使用した名前付けをサポート
中国語およびその他の CJK テキストをサポート
$、[,]、^、(,)、%、" などの特殊文字を含む名前はサポートされていません。これらの特殊文字を使用するには、バックスラッシュエスケープを使用する必要があります。

変数

任意の値または表現

 --direction: to top;
 --gradientColor: deeppink, deepskyblue;
 --gradient: to top, deeppink, deepskyblue;
 --linear-gradient: linear-gradient(to top, deeppink, deepskyblue);
1
2
3
4

変数スコープ

子孫要素は、祖先要素によって設定された CSS を変更せずに継承できます。カスタムプロパティ価値。

body {
    --color: deepskyblue;
}
.box {
    background-color: var(--color);
}
1
2
3
4
5
6

グローバル変数

:root {
  --borderColor: #ccc;
}
1
2
3

変数の特性

変数値を相互に受け渡すことができます

body {
    --green: #4CAF50;   
    --successColor: var(--green);
}
1
2
3
4

CSS変数はそれ自体に値を割り当てることはできません

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);
1
2

CSS 変数は @media メディア機能の値として使用できません

:root {
    --maxWidth: 640px;
}
/* 不合法，语法无效 */
@media (max-width: var(--maxWidth)) {}
1
2
3
4
5

コンテンツのプロパティ値としての CSS 変数は効果がありません

/* 无效 */
.bar::before {
    content: var(--percent);
}
1
2
3
4

変数 var() を使用する

p {  
   background-color: var(--any-what, deepskyblue); 
}
1
2
3

ディープスカイブルーはデフォルト値、 –any-what が無効な場合は deepskyblue を使用します

var()関数のパラメータが不正な場合

body {
    --color: 20px;
    background-color: deeppink;
    background-color: var(--color, deepskyblue);
}
1
2
3
4
5

背景色の初期値が透明なので、ボディの最終的な背景色は透明になります。

var() 関数の最初のパラメータ値が有効である限り、パラメータ値が混乱していても、正常に解析されます。最初のパラメーター値が不正な場合、var() 関数は、現在の CSS プロパティの初期値または継承された値 (継承がある場合) に解決されます。つまり、unset グローバルキーワードの規則に従ってレンダリングされます。 (レンダリングルールは類似しており、unset キーワードを直接設定することと同等ではないことに注意してください。)

var() 関数の末尾のスペース機能

html {
    font-size: 14px;
}
body {
    --size: 20;
    font-size: 16px;
    font-size: var(--size)px;
}
1
2
3
4
5
6
7
8

最終的な本文のフォントサイズは 14px です

原則: ここで、font-size:var(–size)px は font-size:20 px と同等です。20 の後にスペースがあり、これは無効な font-size 属性値であることに注意してください。 var(-size)px は文法的に正しいため、font-size:16px はリセットされ、親要素によって設定されたフォントサイズ 14px が最終的に使用されます。

改善計画は次のとおりです。

body {
    --size: 20;   
    font-size: calc(var(--size) * 1px);
}
1
2
3
4

または

body {
    --size: 20px;   
    font-size: var(--size);
}
1
2
3
4

jsはCSSグローバル変数の値を取得します

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");
1

// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值，结果是deepskyblue 
console.log(cssVarColor);
1
2
3
4

jsでCSSグローバル変数の値を変更する

document.documentElement.style.setProperty("--borderColor","green");
1

jsはCSSローカル変数の値を設定します

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>
1
2
3

box.style.setProperty('--color', 'deepskyblue');
1

実践例

CSSカウンターを利用してページ内のCSS変数の値を表示します。

/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}
1
2
3
4
5

プログレスバー

https://blog.csdn.net/weixin_41192489/article/details/121007837

複数の場所で使用される SVG 画像

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 16px;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

効果を見る https://demo.cssworld.cn/new/8/1-3.php

ボタンクリック効果

効果を見る https://demo.cssworld.cn/new/8/1-1.php

button {
    /* 这里的空格很重要 */
    --open: ;
    color: #2a80eb;
    -webkit-text-fill-color: #fff;
    border-radius: 4px;
    padding: 9px 20px;
    border: 1px solid var(--open, rgba(0,0,0,.1));
    box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
    background: var(--open, linear-gradient(#0003, transparent)) currentColor;
    text-shadow: var(--open, -1px -1px #0003);
    transition: .15s;
}
button:active {
    /* 任意全局关键字都可以 */
    --open: inherit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

実施原則

-open:; の前にスペースがあります。つまり、-open 属性値はスペースであり、構文的には有効である可能性があります。ただし、box-shadow、background などの CSS プロパティにはスペースは無効です。そのため、box-shadow、background などの CSS プロパティは初期値に解決されます。
ボタンをクリックして :active 疑似クラスをトリガーすると、CSS ステートメント –open:inherit が実行されます。グローバル CSS キーワードは CSS カスタム属性値として無効である必要があるため、var() 関数はバックアップ CSS 属性を使用します。レンダリングの値。

カスタム CSS 関数のキーワード()

https://blog.csdn.net/weixin_41192489/article/details/121021277

attr() 関数をシミュレートする

https://blog.csdn.net/weixin_41192489/article/details/121022170

技術共有