Is -webkit-focus-ring-color a CSS variable?

Question

Browsing through default Webkit CSS here I noticed the following piece of code:

:focus {
    outline: auto 5px -webkit-focus-ring-color
}

It seems -webkit-focus-ring-color is a variable of some sort. I thought CSS could not have variables. What is going on here?

This is a vendor specific implementation detail only used by webkit — knittl, Sep 27 '11 at 20:06

score 4 · Accepted Answer · edited May 23 '17 at 11:47

4

That's called a vendor prefix. You can check out a previously answered question about a list of VPs here.

Regarding your question of variables in CSS, there is a way to use variables in CSS development. I'm sure there are other ways, but the most popular are {less css} and SASS.

edited May 23 '17 at 11:47

Community

1
1

answered Sep 27 '11 at 20:09

To be clear, those are javascript libraries that fiddle with the CSS. – Rob Sep 27 '11 at 20:12
Or one can simply parse css as php and use php variables to insert stuff in the css file serverside, based on for instance what browser is being used. Not a very good way to do it, just saying it's possible. – adeneo Sep 27 '11 at 21:09

score 1 · Answer 2 · edited May 23 '17 at 11:47

1

Just to be technically pedantic, it’s a keyword (just like auto or red), not a variable.

And as vonkly says, it’s a keyword with a vendor prefix.

Apple’s documented it e.g. here, where they describe it as a constant.

edited May 23 '17 at 11:47

Community

1
1

answered Nov 05 '11 at 20:26

Paul D. Waite

96,640
56
199
270

Is -webkit-focus-ring-color a CSS variable?

2 Answers2

Linked