search

cssmagic / CSS-Secrets

📖 《CSS 揭秘》这本书的大本营。
2.45k stars 329 forks source link

《CSS 揭秘》 Page7 #46

Closed yihouzenmeban closed 8 years ago

yihouzenmeban commented 8 years ago

background: #58a linear-gradient(#77a0bb, #58a); 请问这种写法是为了提供回退机制吗？ 但是根据我的测试。。因为 IE7 8 9 不识别 linear-gradient 会导致整行的 background 属性失效。。从而失去背景色。。但是在 IE5 下面的有效的。。所以很奇怪这种写法是什么意思。。 谢谢魔法哥的解答。。

cssmagic commented 8 years ago

谢谢反馈。稍后会确认你提到的这个问题。

也欢迎其他读者参与讨论 :smiley:

jimyuan commented 8 years ago

呵呵，貌似。要安全回退的话貌似还是单独写一行background-color吧

cssmagic commented 8 years ago

暂不提技术上的实际作用，单看代码本身，这样写有一种为设计意图分层的感觉（#58a 为底层，linear-gradient(...) 为高层）。以画画来打比方的话，这行代码有一种从块面到细节的刻画过程，甚至可以感受到设计和代码的演化过程。

不过，它乍看起来似乎有回退的功效，但实际上并没有。因此，为了确保实现回退，应该把这一行拆成 background-color 和 background-image 两条声明。

cssmagic commented 8 years ago

更新

经测试发现，对于支持 linear-gradient 的浏览器来说，这样写是有回退效果的。

比如在 Firefox 中安装 Web Developer 扩展，选择菜单 “图片 → 隐藏背景图片”，就可以看到回退效果（只有纯色背景，没有渐变背景）。

因此我认为这行代码有其合理性，不属于技术错误。

这个 issue 我先关了。如有不同意见，大家可以继续讨论。