Is -Webkit-Link a Valid Color for Any HTML Element or CSS Property for Which Color Is Relevant

Why color appears as HTML attribute on a div?

Styled components has a set of HTML attributes that it allows to be passed down to the resulting element. The color attribute is not technically valid for a div element, however it is a HTML attribute, and this is the criteria it follows.

From the docs:

If the styled target is a simple element (e.g. styled.div), styled-components passes through any known HTML attribute to the DOM. If it is a custom React component (e.g. styled(MyComponent)), styled-components passes through all props.

The documentation does not explicitly state that they accept any attribute on any element, however it seems to be the case given this example:

<Div color="red" foo="foo" value="value" name="name" bar="bar">My div</Div>

Results in:

<div color="red" value="value" name="name">My div</div>

Notice how the non HTML attributes are removed, but the others remain.

Is this a proper use case for the CSS !important rule?

Not judging if it would be an appropriate use of !important here or not, one way around in your case would be to split your animation and transition on two different elements. Note that it's quite common to do so when you want to animate and transition the same properties.

background-color even has the advantage that you can use pseudo-elements instead of a plain one.

Less talk, more code:

div{
  position: absolute;
  width: 100px;
  height: 100px;
  animation: animate 4s forwards;
}
div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 2s;
}
div:hover::after{
  background-color: blue;
}

@keyframes animate{
  from {
    background-color: transparent;   
  }
  to {
    background-color: maroon;
  }
}

<div></div>

Is background-color:none valid CSS?

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.

Is it possible for the color to 'erase' the background in CSS?

Yes, it IS possible in CSS with mix-blend-mode.

Answer's update in April 2021: Currently it have a very solid support (95% globally) although Safari doesn't have hue, saturation, color, and luminosity blend modes. Of course, IE isn't a considerable thing if you expect to use it (like many of other cool CSS features of the last years).

.ghost-button {
  /* Important part */
  mix-blend-mode: screen;
  background: #000;
  color: #fff;

  /* Button cosmetics */
  border: .125em solid #fff;
  font: 2em/1 Cursive;
  letter-spacing: 1px;
  outline: none !important;
  transition: all .8s;
  padding: .5em 1em;
  cursor: pointer;
}

.ghost-button:hover {
  /* Important part */
  background: #fff;
  color: #000;
}

#container {
  background: url('http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg') center/cover;

  /* Also works with background-color or gradients: */
  /* background: linear-gradient(to right, red, yellow); */

  /* Container positioning */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

html, body {
  margin: 0;
}

<div id="container">
  <button class="ghost-button">Hover Here</button>
</div>

Javascript - check if string is valid CSS color?

Here's a simple function that checks color name support in the current browser:

function isColor(strColor){
  var s = new Option().style;
  s.color = strColor;
  return s.color == strColor;
}

// try it out
isColor("red");   // true
isColor("reds");  // false

Since an invalid CSS property value will not persist, we can compare an attempted set value with the value we meant to set, and if they match, we know the color/property is valid.

Note this will also approve hex, RGB, etc. You can screen those out with a RegExp or two if that's an issue for your application.

What is the difference between applying css rules to html compared to body?

There is no real difference (if you're just talking about where to apply background, otherwise BoltClock's answer to this other question is a better fit). html is an element, just like body is.

Both are valid choices, and both will both work in all common browsers.

The YUI Reset for instance, chooses to set a background on the html element instead of body:

http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css

This requires that you set your background on html, for instance see: can't change body background color using CSS reset

See: http://dev.w3.org/csswg/css3-background/#special-backgrounds

The background of the root element becomes the background of the
canvas and its background painting area extends to cover the entire
canvas, although any images are sized and positioned relative to the
root element as if they were painted for that element alone. (In other
words, the background positioning area is determined as for the root
element.) If the root's ‘background-color’ value is ‘transparent’, the
canvas's background color is UA dependent. The root element does not
paint this background again, i.e., the used value of its background is
transparent.

And:

For documents whose root element is an HTML HTML element [HTML401] or
an XHTML html element [XHTML11]: if the computed value of
‘background-image’ on the root element is ‘none’ and its
‘background-color’ is ‘transparent’, user agents must instead
propagate the computed values of the background properties from that
element's first HTML BODY or XHTML body child element. The used values
of that BODY element's background properties are their initial values,
and the propagated values are treated as if they were specified on the
root element. It is recommended that authors of HTML documents specify
the canvas background for the BODY element rather than the HTML
element.

What that wall of text is saying is demonstrated here:

background on just body: http://jsfiddle.net/hhtzE/
background on html and body: http://jsfiddle.net/hhtzE/1/
background only html: http://jsfiddle.net/hhtzE/2/

Why an inline style for an element cancels a `:hover` for the same?

You are right the but if need to make the color change while hovering the text you must do like this(just Added The Important Tag):

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a:hover {
  color: yellow !important;
}

<a href="/" style="color: tomato">Home</a>

Why does HTML think “chucknorris” is a color?

It’s a holdover from the Netscape days:

Missing digits are treated as 0[...]. An incorrect digit is simply interpreted as 0. For example the values #F0F0F0, F0F0F0, F0F0F, #FxFxFx and FxFxFx are all the same.

It is from the blog post A little rant about Microsoft Internet Explorer's color parsing which covers it in great detail, including varying lengths of color values, etc.

If we apply the rules in turn from the blog post, we get the following:

Replace all nonvalid hexadecimal characters with 0’s:
```
chucknorris becomes c00c0000000
```
Pad out to the next total number of characters divisible by 3 (11 → 12):
```
c00c 0000 0000
```
Split into three equal groups, with each component representing the corresponding colour component of an RGB colour:
```
RGB (c00c, 0000, 0000)
```
Truncate each of the arguments from the right down to two characters.

Which, finally, gives the following result:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

Here’s an example demonstrating the bgcolor attribute in action, to produce this “amazing” colour swatch:

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>