CSS内でも実は変数が使えます。 書き方は
セレクタ {
--好きな名前:値;
}
使う時
var(--好きな名前)
◆具体例１
宣言
p {
--haba:300px;
}
使う時
p{
width:var(--haba);
}
◆具体例２
宣言
p {
--fname:Huiji;
}
使う時
p{
font-family:var(--fname);
}
セレクタを「:root」という疑似セレクタにすると、どこでも使えるようになります。 （基本的には常時「:root」で使うことになると思われます。）
宣言
:root {
--haba:300px;
}
これを使って作り込むと、一箇所変数を修正するだけで、全体のデザインを変えるような事ができます。 ※ただし、IEには非対応 未だにWindows8.1は現役で使われていますので－－－Win8ではIE11が標準です。 と言う事は、使うのはWindows8.1のサポート期限が終わってからのほうが良いかも知れませんね。。。 （※Windows8.1の延長サポート期限は2023年1月10日） 非対応だとどうなるか－－－多分、無視されるので、指定しなかったのと同じ扱いになるのではないでしょうか。
実験
ソース
p.test56875 {
--fname:Huiji;
--fcolor:deeppink;
font-family:var(--fname);
color:var(--fcolor);
}
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
これをIE11で見てみると・・・？
↓ ↓ ↓ ↓
こうなりました（IE11のキャプチャ画像です） 非対応ですので無視されるわけですね。
コメント