CODEWITHSUNDEEP
css
Pablo
Pablo

Reputation: 2052

What is this variable kind of thing in css?

I just discovered something in css, forwhat I can not find any explanations in google. I'm pretty bad with css, so I hope you can explain this to me.

outline-color: Highlight

I mean the 'Highlight'. My struggle is, I never declared this in any way and I never heard of it neither. If I use it, it is just a blueish color.

Is this any kind of system-specific variable? Are there any other things like this?

Upvotes: 0

Views: 57

Answers (4)

sjdm
sjdm

Reputation: 589

Highlight is a predefined color in css which the browser will recognise, much like your standard red, blue etc....

If you play around in devtools on chrome or another inspector you can see all these colors.

Hope that helps :)

Upvotes: 1

BoltClock
BoltClock

Reputation: 723448

Highlight is indeed a system color keyword, documented in section 18.2 of CSS2 and section 4.5.1 of css-color-3. It does vary depending on the OS or platform displaying this color. It is not the same thing as a custom property (or CSS variable) — custom property names begin with -- and are referenced using var(). It's much more akin to things like red, green and blue, also predefined colors, but not system colors.

The description is very brief but should give you a rough idea of what it represents (assuming the name "Highlight" doesn't already!):

Highlight
Item(s) selected in a control.

In any case, system colors are deprecated and should not be used in public sites.

Upvotes: 1

Sebastian Speitel
Sebastian Speitel

Reputation: 7336

Browsers have predefined color, the usual are red, yellow, coral or something like this, but they also have colornames for colors, which are part of the design scheme of the specific browser. For example buttonface is the greyish color of buttons in Chrome. So to keep safe always use the usual colors, because the OS/Browser specific ones could always change.

Upvotes: 1

Justin
Justin

Reputation: 77

If you're talking about the selection color, here is the css code:

::-moz-selection {
  background: #ccc;
}
::selection {
  background: #ccc;
}

Note that the moz prefix is for firefox. You can replace #ccc with your color. However if you're talking about using variables in css, try sass

Upvotes: 0

Related Questions