😈

CSS カスタムプロパティを使ってみた（IE11対応、ただし現時点ではちょっと注意）

2020/11/01に公開1件

CSS

Sass っぽさが魅力の「CSS カスタムプロパティ」

CSS カスタムプロパティ。長い名前ですね〜長いので CSS変数 と呼びましょうか。
よく使う値を定義しておけるから Sass（Scss）の変数みたいに使えて便利。しかも環境構築不要！👏
Sassと違うのはmixinが使えないところでしょうか😇
　
一般的には色の定義に使われてますね。
あとはスペースの定義にも使われたりします。
この2つだけでも使えば幸せになれます。
　
CSS変数について、詳しくは以下を読んでくださいネ。

よく使う使用例

お作法としては、先頭に--をつけて定義。呼び出す時はvar()で呼び出しです。
:rootに定義するのが一般的のようですネ。

/* CSS変数を定義 */
:root {
    --color-brand: #ff0000;
    --black: #111111;
    --white: #fefefe;
    --space: 1rem;
}
/* CSS変数を呼び出し */
.box {
    background: var(--white);
    border-top: 3px solid var(--color-bland);
    color: var(--black);
    padding: var(--space);
    margin: calc(var(--space) * 3) 0;
}

IE11非対応だけど使えるよ（ただし注意点あり）

Can I use によると IE11 は非対応！いつものことですネ。
ところが今は専用の Polyfill が登場しています！その名も CSS Variables Polyfill for IE11👏

利用方法は以下のコードをコピペ。

（バージョンは最新のを使ってくださいネ！現時点 '20/11/01 では v4.1.0）
IE11の時だけ Polyfill を発動させてる感じですね！

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>

Polyfill を使う時の注意点

現時点（v4.1.0）では、!importantがつく物には使えません！（重要）
なので!importantは避けましょう〜
例えばこんな感じ。

/* 絶対に上書きされたくな要素ってあるよね */
/* -- NG --------- */
.btn-brand{
    color: var(--white) !important;
    background: var(--color-brand) !important;
}
/* -- OK --------- */
html .btn-brand{
    color: var(--white);
    background: var(--color-brand);
}

!importantを使わずに書く方法は他にもいろいろあるので頑張って避けましょう〜
それにこの問題もそのうち解決するかもしれません😇応援しましょう〜

おまけ：色をアレンジするのにも使えちゃったりする

CSS変数ではrgbやhslを使うと色をアレンジすることもできます。参考記事: Creating Color Themes With Custom Properties, HSL, and a Little calc()
⬇️こんな感じ。
--color-base: 200; /*青*/
ここの数字を変えるだけで全ての色が一気に変わるのが楽しいですね！やってみてね😇
余程のことが無い限りめんどくさいからやらないけど😇

いかがでしたか？？
コメントお待ちしてます😇では！

Discussion

bissy 2020/11/01

＼＼\ ٩( 'ω' )و //／／