What does semi-transparent CSS properties mean in Google Chrome Dev Tools?
I believe they are semi-transparent because they're not explicitly defined.
Consired following sheet:
selector1 {
margin: 20px;
}
selector2 {
margin: 20px;
margin-top: 10px;
}
selector3 {
margin: 10px 20px 30px;
}
In first example (selector1
) all margin-*
properties will be semi-transparent because non is explicitly defined - shortcut is being used.
In second example (selector2
) only margin-top
will be fully opaque, as it's defined in its own property.
In last example (selector3
), margin-top
and margin-bottom
are defined explicitly, therefore the will be fully opaque. However margin-left
and margin-right
are defined by a single value, so they will be semi-transparent.
Semi-transparent color is also applied to default values, for instance:
background: red url(...) no-repeat;
This property defined background-color
, background-image
and background-repeat
explicitly, however background-position
, background-clip
, background-size
etc. are not defined (default values are used) so they will be seen as semi-transparent.