Strange "initial" values in d3.js

Question

By executing code that is similar to this (`d3.select(..).append("div")`), I get `div`s with such style properties: ```

5

``` Questions: - a) Where does `initial` comes from? b) Is it possible to redefine "defaults"? - Is it Ok that d3 litters in the properties with unnecessary values? - Chrome says that `background-position: initial initial;` and `background-repeat: initial initial;` are `Invalid property value`s. Is it a bug of d3? How can we deal with this error?

Accepted Answer

This has nothing to do with D3, but with the implicit nature of CSS. When you specify the CSS background property, you are actually specifying multiple properties in shorthand. For example,

```
background: url(chess.png) gray 50% repeat fixed;
```

Is actually shorthand for

```
background-image: url(chess.png);
background-color: gray;
background-position: 50% 50%;
background-repeat: repeat;
background-attachment: fixed;
```

So, when you set the style "background", your browser automatically expands this shorthand to the full form. That's why you see all of these additional styles; they represent the computed values.

Strange "initial" values in d3.js

Solution

Problem