为什么这个背景属性会多次覆盖？

Question

我仍在尝试清理CSS并尝试理解作者的意思。我总是试图理解某人的所作所为，因为我认为人们很聪明，如果他们以某种方式做事，必须有理由。

通常情况下，属性的名称会发生变化（-webkit-box-shadow，-moz-box-shadow，box-shadow等），但这里是值，我从来没有之前见过。

似乎他试图多次覆盖这个background属性。我以前从未见过这个。这是一个好的或坏的做法，如果这是一个不好的做法应该是写这个CSS的干净方法：

.nav.side-menu> li.active > a {
    color: #ff0000;
    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b6479), color-stop(100%, #4c5566)), #686e78;
    background: -webkit-linear-gradient(#334556, #2C4257), #2A3F54;
    background: -moz-linear-gradient(#334556, #2C4257), #2A3F54;
    background: -o-linear-gradient(#334556, #2C4257), #2A3F54;
    background: linear-gradient(#334556, #2C4257), #2A3F54;
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
}

以下是PyCharm如何看待CSS：只知道background: -moz-linear-gradient(#334556, #2C4257), #2A3F54; ......

Answer 1

这些是vendor prefixes，开发人员并没有尝试多次覆盖属性，他这样做是因为浏览器兼容某些css属性，这些属性对css来说是实验性的或不常见的浏览器支持开发人员使用的版本。

所以-moz-适用于Mozilla Firefox，-webkit-适用于Chrome，Safari和Opera（较新版本），-ms-是Microsoft Explorer和Edge，-o-适用于Opera旧版本。

当你遇到这样的事情时，就像代码对浏览器说的那样＃嘿嘿，我知道也许你知道这个属性，我知道它的名字是x，但也许你知道它的名字-vendor -x＆＃34;

但请参阅链接以获取更多信息。希望它有所帮助：）