CSSプロパティのカスタム値 - CSS

私はYouTubeでいくつかの動画をストリーミングしていました。突然、私はYouTubeのHTML構造をチェックすることに興味がありました。そして、クールなことに気づいた。CSSプロパティのカスタム値 - CSS

使用されるHTMLタグのほとんどは標準タグではありませんが、私は独自のHTMLタグを定義できるAngularに関する知識があります。しかし私が理解できなかったのは、CSSプロパティにカスタム値を渡すことでした。このような

：

background: var(--yt-dialog-background);

いずれかは、これらのものがどのように動作するかのように知っていますか？私はちょうどそれについて知りたいと思うだけで、それは単なる背景ではありません。いくつかのプロパティでは、その下にカスタム値があることがわかります。そして私も、インスペクタ内の要素の下var(--yt-dialog-background)を見つけるように、少し深く行くことを試みたが、私はあなたが見ている何var(--yt-dialog-background)

出典

2017-11-10 Unknown User

この質問は非常に広範な私見ですが、これはあなたが始めるかもしれません：https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus –

しかし、これらの私が間違っていない限り、プリプロセッサは独自の構文を通常のCSSに変換します。どのように変数名自体がインスペクタに入りましたか？ – Kyrre

MDNドキュメントhttps://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables – Batman25663

ものはCSS variables次のとおりです。

:root { 
 
    --main-bg-color: green; 
 
} 
 

 
div { 
 
    color: var(--main-bg-color); 
 
}

<div> 
 
    Some text 
 
</div>

出典

2017-11-10 13:45:53 Nisarg

Manをチェックする必要があるかもしれません。私はCSSに変数があることは知らなかった。 CSSでSASSを使用しています。しかし、これらの変数は、私がSASSで使用する変数よりも利点がありますか？ –

@UnknownUserうん、あなたはJavascriptでこれらの変数の値を変更することができます。私がリンクしたMDNの記事の最後の例を参照してください。 – Nisarg

クール、回答者のおかげで！ +1 –

に対応する任意の値が理由であるネイティブcss variables.Browser support is actually pretty good、ある見つけることができませんでしたあなたはそれらがYouTubeのようなウェブサイトによってプロダクションで使用されているのを見ています。

基本的な使用は、次のようになります。

:root { 
    --main-color: red; 
} 

h1 { 
    color: var(--main-color); 
}

出典

2017-11-10 13:44:05

カスタム値が、ネイティブCSSの変数が存在していないあなたが見ています。

サポートは、最近のブラウザのためにかなり良いです：

https://caniuse.com/#search=css%20variable

出典

2017-11-10 13:44:43 Iulius

CSSプロパティのカスタム値 - CSS

答えて

関連する問題