css-variables

Set css variable with HTML5 color picker in Angular 5?

由 狂风中的少年 提交于 2019-12-13 04:04:27
问题 I have an Angular 5 application with items styled in CSS with CSS variables, as in --color-links: #0000ff; a { color: var(--color-links); } So, I was trying to wire up an HTML5 color picker to allow changing this variable on the fly. I saw this article which showcases this pen where the author is using some simple JS to do something like I am trying to do, but with document.addEventListener . I was trying to come up with a pure Angular/HTML5 method. So, I created a picker: <div class="form

Is it possible to use CSS variables to change the the TITLE (description on hover) contents of SVG objects?

由 孤者浪人 提交于 2019-12-11 16:43:00
问题 Is it possible to use CSS variables (analogue to e.g. opacity in style="opacity:var(--QQQ_SOMETHING_AAA, 1)" and .ZZZ_RECTANGLES{--QQQ_SOMETHING_AAA: 0.7;} to tweak the SVGS's TITLE (description on hover <title></title> ) contents? I'm looking for something that will use only SVG1.1 features and SMIL/CSS, so no other plug-ins that might worsen cross-browser compatibility. Here's a MWE code snippet: .HIDDEN_LAYER{ visibility:hidden; opacity:0; } .CLICKME_TICKBOX{ fill:white; stroke:black; }

Css display property set to inherit with variable doesn't work

由 一个人想着一个人 提交于 2019-12-11 03:07:27
问题 I set the display property for divs to in line-block . I then created four classes: no-var, which sets display to inherit var, which sets display to a variable set to inherit var-none, which sets display to a variable set to none var-default, which sets display to a variable set to inherit and a default of grid The actual style that is used by each class doesn't seem to be correct, though: The no-var class correctly inherits display to block The var class doesn't get the inherit value from

Using CSS Variables in Chrome 29+

由 半腔热情 提交于 2019-12-10 15:41:33
问题 My Chrome browser just switched from version 28 to version 29. Once it switched over, my css3 code stopped working in the new version and I was wondering if anyone knew how to resolve the issue, without having to set my browser back to version 28? UPDATE Chrome 30 transitioning from Chrome 29 to Chrome 30 killed CSS Variables as well. The Enable experimental WebKit features flag is no longer an option. I have been using experimental WebKit features, specifically CSS Variables. The following

Are periods allowed in CSS variable names?

由 僤鯓⒐⒋嵵緔 提交于 2019-12-10 07:13:05
问题 For example could I have a css variable named like this: --Button.onHover ? Note that CSS variables are different from CSS selectors (I have to explain this because someone marked this as a duplicate). Here's an example from the module superfly-css-variables-colors: :root { --percentage-lightest: 91%; --percentage-lighter: 78%; --percentage-light: 65%; --percentage-median: 52%; --percentage-dark: 39%; --percentage-darker: 26%; --percentage-darkest: 13%; --percentage-low: 25%; --percentage

How to force integer in CSS Variable?

由 旧巷老猫 提交于 2019-12-08 18:14:25
Forgive me if this is simple question, but I am fighting with this on CodePen and have no clue what's going on. I have in code: :root { --ile: 10; } @for $i from 0 to (var(--ile)) { } The problem is Codepen claims var(--ile) is not an integer (huh?) even if obviously it is (it has no unit and because it is not 10.0 it cannot be a float). What Am I missing? I tried to look in CSS specs and various examples on the web and using number as variable is legit so how to force conversion to integer if the 10 is not integer? The spec allows using custom property values as numeric values. But the

Are periods allowed in CSS variable names?

由 陌路散爱 提交于 2019-12-05 12:13:00
For example could I have a css variable named like this: --Button.onHover ? Note that CSS variables are different from CSS selectors (I have to explain this because someone marked this as a duplicate). Here's an example from the module superfly-css-variables-colors : :root { --percentage-lightest: 91%; --percentage-lighter: 78%; --percentage-light: 65%; --percentage-median: 52%; --percentage-dark: 39%; --percentage-darker: 26%; --percentage-darkest: 13%; --percentage-low: 25%; --percentage-high: 50%; --percentage-link-hover: 25%; } In CSS, property names are idents, and idents cannot contain a

How to list all css variables names/values pairs from element

由 风流意气都作罢 提交于 2019-12-05 04:34:00
I have JS library and I have this issue: I'm creating temporary element for calculating size of character using monospace font. Right now I'm copying inlie style, but I need all styles from original including css variables. I don't want to clone the element, because there are elements, that are inside, that I don't need. Also element may have id set by the user, not sure how this will behave when there will be two elements with same id, so it would be better (I think) to just copy each style to new temporary element. I have code based on these: Accessing a CSS custom property (aka CSS variable

Using CSS @Variables [duplicate]

由 China☆狼群 提交于 2019-12-04 18:19:16
问题 This question already has answers here : How can I define colors as variables in CSS? (19 answers) Closed last year . I am trying to use CSS Variables. I look online for tutorials and all of them worked so far. Here's my CSS: @variables { defaultColor: #8E5050; defaultBackGround: #E1DBC3; } body { background: var(defaultBackGround); } a { color: var(defaultColor); } I also tried: body { background: @defaultBackGround; } a { color: @defaultColor; } None of them works, What am I doing wrong?

Get computed value of CSS variable that uses an expression like calc

由 时光总嘲笑我的痴心妄想 提交于 2019-12-04 01:34:57
问题 In JavaScript, you can get the value of a CSS variable using getPropertyValue(property). This function is useful for retrieving variables declared in the :root block. :root { --example-var: 50px; } However, if this variable expression contains a function like calc , the getPropertyValue call returns the expression as text rather than computing it, even when using getComputedStyle . :root { --example-var: calc(100px - 5px); } How can I get the computed value of a CSS variable that uses a CSS
订阅 css-variables