Why Does the Browser Try to Use an Otherwise Invalid Property Declaration When I Introduce a CSS Variable

Why does the browser try to use an otherwise invalid property declaration when I introduce a CSS variable?

This how CSS variables are meant to work. When using CSS variables the browser can only evalute the value at run-time so the value will be considered as valid (or lets say in a standby mode) until we evalute the variable and if the browser find the whole value invalid, it will fallback to initial or inherit:

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword. ^ref

A more explicit example with a clearly non valid value:

html {
  background:linear-gradient(red,blue); /* this will be used */
  background:strange-gradient(red,blue); /* this is a joke */
  
  min-height:100%;
}

Is property redeclaration in CSS selector query always equivalent to just the very last property declaration?

I suppose, in cases where you're asking for property considered as invalid by some browser.
For instance:

.some {
  background:  background: rgb(61,217,0);
  background:  linear-gradient(328deg, rgba(61,217,0,1) 0%, rgba(12,242,187,1) 100%);
}

Also, in the case you're using a fetched image, you may be able to show it along a background color, as shown there or here:

.some {
  background: var(--fallback-color)  url('https://possibly.dead.com/but/pretty_img');
}

So, if the link is dead, the background color still shows up.

Is this a browser bug? Inheritence in variables with background-color

Update: the bug seems to be corrected in the last Firefox version (68). Stil some properties aren't working fine on Chrome

---

I have simplified your code and tested with other properties and found that it's not working with height/box-shadow but it's working with other propeties. In Fiferox nothing is working. I think it's a bug.

.Xb {
  background-color: red;
  height: 100px;
  padding:0 30px;
  margin: 10px;
  box-shadow:2px 2px 20px blue;
  position:relative;
  border:1px solid green;
}

.Ybv {
  /*doesn't work*/
  background-color: var(--var,inherit);
  height:var(--var,inherit);
  box-shadow:var(--var,inherit);
  /*works on Chrome and not Fiferox */
  border:var(--var,inherit);
  padding:var(--var,inherit);
  margin:var(--var,inherit);
}

<div class="Xb">
  <div class="Ybv">inherit in var</div>
</div>

CSS — ::selection with var() fallback

The only way to obtain what you want is to make sure the value is invalid so the browser will ignore it and fall back to the default one:

::selection {
  background-color: something_invalid;
}

<p>a b c</p>
<div>
  <p>x y z</p>
</div>

how to reset a CSS variable (aka custom properties) and use the fallback one?

You can unset the value using initial to use the fallback one:

:root {  --border-width-top: 2px;  --border-width-right: 2px;  --border-width-bottom: 2px;  --border-width-left: 2px;  --border-width: 0;}div {  margin:5px;  border-color: red;  border-style: solid;  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));}

div.box {  --border-width:initial;  --border-width-top: 10px;}

<div>some content</div><div class="box">some content</div>

How do I add the same CSS property (e.g. background-image) multiple times with React?

"spassvogel" on GitHub has a clever solution using CSS variables: https://github.com/facebook/react/issues/20757#issuecomment-776191029

The idea is to set CSS variables in the style property, like

style={ "--url1": "url(1.jpg)", "--url2": "url(2.jpg)" }

and then using them from an external style sheet, like

background-image: var(--url1);

and so on.

Turns out this still wasn't enough to solve everything I wanted – this rabbit hole runs ever deeper – but that's no fault of React's, so I'll consider this a valid answer.

CSS native variables not working in media queries

From the spec,

The var() function can be used in place of any part of a value in
any property on an element. The var() function can not be used as
property names, selectors, or anything else besides property values.
(Doing so usually produces invalid syntax, or else a value whose
meaning has no connection to the variable.)

So no, you can't use it in a media query.

And that makes sense. Because you can set --mobile-breakpoint e.g. to :root, that is, the <html> element, and from there be inherited to other elements. But a media query is not an element, it does not inherit from <html>, so it can't work.

This is not what CSS variables are trying to accomplish. You can use a CSS preprocessor instead.

---

Related Topics