Variables in CSS

[durangod]

Just  wondering how to work with variables in css

Here is what i tried (change from red to green)
its not changing and i have cleared all the cache files and browser cache as well.
Can i address just the var and not have to go through the root to do it?

Code: [Select]

root: {
--link-color-hover: green;
}

Here is the original css

Code: [Select]

:root {
    --chart-line-radius: 1rem;
    --chart-line: solid gray thin;
    --link-color-hover:  red;
    --link-color: #369;
    --link-decoration-hover: underline;
    --link-decoration: none;
    --sex-f-bg: #fdd;
    --sex-f-fg: #f88;
    --sex-m-bg: #ddf;
    --sex-m-fg: #88f;
    --sex-u-bg: #dfd;
    --sex-u-fg: #8f8;
    --sex-x-bg: #fceaa1;
    --sex-x-fg: #ffab57;
}

Thanks

[Jason Knight]

There's no such thing as root:, it's :root

NOT that I would waste time targeting :root since said custom properties (their proper name, not "variables") only would work on body/inwards. That's why I target "body", not ":root". I honestly thing the whole "root" bullshit is from the shadow dom nutters who insist on making everything take more steps and be harder to work with for... reasons?

I don't know why they started up with that root crap, but I ignore it. Particularly when you can set custom properties on ANY element and they cascade to its children.

[durangod]

I dont understand how its working then because i copied that root: code right from the application css file they created.   And it shows root: in the console.   Maybe they are using something that processes it as :root but displays root: i have no idea, really strange man...  way beyond my skill level...

OK so your saying i should be able to something like

Code: [Select]

   link.color:hover {
       color: green;
}

or rather

body.link.color:hover {
    color: green;
}


UPDATE:  yeah this worked thanks.. 

Code: [Select]

:root {
 --link-color-hover: #103cdd;
}


[Jason Knight]

What is said in the console -- especially in chrome-likes -- has almost nothing to do with what the actual proper code is. It's one of the more annoying parts is that rather than using the terminology and syntax of HTML and CSS, they report the syntax / naming conventions of the C code used to build the browser. :/

It's like the mistake of thinking that the inspector view of the DOM is the same as the written source. Whilst the markup is turned into the DOM, things can be added to the DOM after-the-fact. DOM methods and properties are not HTML attributes even if attributes are turned into or aliased by properties.

Same as the difference between Element.value, Element.initialValue, and Element.getAttribute("value") -- which can return entirely different values.

See the mistake I'm seeing a lot lately where people are declaring attributes in their HTML that are not valid HTML attributes, but exist as Element or Node properties in JavaScript. Just because it exists in JS on the DOM does not mean it exists in HTML!

https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/fetchPriority

For example. It exists on the HTMLLinkElement in JavaScript. That does not mean:

<link fetchpriority="low">

Is valid HTML. That's gibberish.

</rant>

Anyhow, do NOT trust that what the document inspector or browser console is telling you is the correct CSS syntax. It's usually just whatever the browser engine maker feels like saying and NOT all that helpful.

Yeah, it sucks.

[durangod]

thanks, yes it does suck, but it is what it is.