問題タブ [css-variables]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS カスタム プロパティは、リンクされた CSS ドキュメント全体でグローバルですか?
私は、CSS3 カスタム プロパティ (別名 CSS 変数) で多くの成功を収めるために実験しています。--black: #000;およびbackground: var(--black);型変数について話しています。ただし、変数が別のリンクされたドキュメントで宣言されている場合、私はうまくいきません。
CSS カスタム プロパティのブラウザー互換性は 72% を超えているため (src: https://caniuse.com/#search=css%20variables )、オーディエンスが使用していることがわかっている非常に特定のアプリでそれらを使い始めたいと思っています。互換性のあるブラウザ。
:rootこれらの CSS カスタム プロパティは、リンクされたすべての CSS ドキュメントにわたってスコープ内でグローバルなのか、ドキュメントごとに (要素で) のみグローバルなのか疑問に思っています。
答えが見つかりません（仕様でも）！
私が読んだ研究のいくつか：
- https://drafts.csswg.org/css-variables/#defining-variables
- http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml
- https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties
- https://css-tricks.com/css-custom-properties-theming
- https://www.sitepoint.com/practical-guide-css-variables-custom-properties
- https://www.toptal.com/front-end/dynamic-css-with-custom-properties
- https://googlechrome.github.io/samples/css-custom-properties/
- https://tympanus.net/codrops/css_reference/custom-properties/
私の特定の問題は、Ruby on Rails アプリケーションで発生しています。ここでは<style>、展開時にプリコンパイルされる SCSS スタイルシート インクルードの前のブロックに CSS カスタム プロパティを含めています。SCSS の先頭に変数を含めると、すべて正常に動作します。ただし、<style>ブロックにはテーマ変数が含まれるため、実行時に ERB でコンパイルする必要があります。