CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Variables in CSS  (Read 80 times)

durangod

  • Sr. Member
  • ****
  • Posts: 415
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Variables in CSS
« on: 24 Apr 2024, 07:17:04 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 1060
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Variables in CSS
« Reply #1 on: 25 Apr 2024, 11:40:57 am »
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.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durangod

  • Sr. Member
  • ****
  • Posts: 415
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Variables in CSS
« Reply #2 on: 25 Apr 2024, 07:33:56 pm »
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;
}
« Last Edit: 25 Apr 2024, 09:01:27 pm by durangod »

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1060
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Variables in CSS
« Reply #3 on: 25 Apr 2024, 11:11:34 pm »
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.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durangod

  • Sr. Member
  • ****
  • Posts: 415
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Variables in CSS
« Reply #4 on: 27 Apr 2024, 02:27:35 am »
thanks, yes it does suck, but it is what it is.  ;D

 

SMF spam blocked by CleanTalk

Advertisement