Can anyone tell me if the following CSS is valid?
.class { background-color:none; } 7 Answers
You probably want transparent as none is not a valid background-color value.
The CSS 2.1 spec states the following for the background-color property:
Value: <color> | transparent | inherit
<color> can be either a keyword or a numerical representation of a colour. Valid color keywords are:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow
transparent and inherit are valid keywords in their own right, but none is not.
No, use transparent instead none . See working example here in this example if you will change transparent to none it will not work
use like .class { background-color:transparent; }
Where .class is what you will name your transparent class. 2
The answer is no.
Incorrect
.class { background-color: none; /* do not do this */ } Correct
.class { background-color: transparent; } background-color: transparent accomplishes the same thing what you wanted to do with background-color: none.
CSS Level 3 specifies the unset property value. From MDN:
The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.
Unfortunately this value is currently not supported in all browsers, including IE, Safari and Opera. I suggest using transparent for the time being.
.class { background-color:none; } This is not a valid property. W3C validator will display following error:
Value Error : background-color none is not a background-color value : none
transparent may have been selected as better term instead of 0 or none values during the development of specification of CSS.
write this:
.class { background-color:transparent; } So, I would like to explain the scenario where I had to make use of this solution. Basically, I wanted to undo the background-color attribute set by another CSS. The expected end result was to make it look as though the original CSS had never applied the background-color attribute . Setting background-color:transparent; made that effective.
