Question

我一直在阅读有关响应式设计的内容，并将开始在我的网站上实施新的CSS设置。这让我想到了调用所有这些不同CSS文件的最佳方法。对于不同的屏幕宽度，我会有不同的CSS。

我正在讨论两个选项：

使用LINK标记连接到每个网页的所有文件。我唯一的问题是持续维护（并且必须添加所有这些链接开始）;我知道这不是世界末日，但在维护方面似乎有点密集。
另一种方式是在每个网页上只有一个LINK标记，指向“馈送”CSS。这个'feeder'CSS文件将包含使用@imports到我的其他CSS文件的所有链接。这意味着维护将是轻而易举的。我可以在整个站点的一个位置添加/重新排序/删除CSS文件。大！

然而，这会导致@import函数的兼容性[或旧浏览器中缺少它]。

我环顾四周，我看过的文章已经至少有几年了。

因此，要获得结论：现在使用的浏览器百分比[2013年7月]支持这一点，我可以安全地忘记那些无法解释@import的浏览器吗？

如果没有，我该怎么做才能将CSS文件的维护工作降到最低。（比“在当前网站上查找和替换”更优雅。）

Answer 1

您不应该担心@import，而应该只是组合并缩小所有无法通过CDN提供的CSS文件：

<link rel="stylesheet" href="styles-84e599dcbd6c60fa0af76aaa18a5d75f.css" />

它加载速度更快，占用的带宽更少，并且可以在任何支持样式表的浏览器上运行。

有很多方法可以做到这一点。如果您没有使用任何Web框架（或使用Node.js），请查看Grunt。

至于您的实际问题，除非您计划支持早于IE5.5的浏览器，@import才能正常运行。但我强烈建议采用缩小的样式表方法。

Answer 2

我实际上会说现在在2016年接受的答案不一定是正确答案 - 原因如下：

1）HTTP 2.0正在成为中国以外工业化国家中使用最多的协议版本（感谢旧IE），很快就会被视为行业标准（如果还没有）。这意味着对连接多路复用和头缓存的支持消除了将文件合并为一个的需要;事实上，在去年SFO的Fluent大会上，HTTP2主持人实际上认为，由于HTTP连接时间较长，因为HTTP能够利用更多带宽，因此将CSS和图像等内容分成多个文件实际上会更好。 / p>

2）由于CSS中的所有这些前端自动化（如SASS和LESS），您最终更有可能打破IE 5-9 4095选择器限制。这是一个鲜为人知的错误，因为直到现在人们很少在一张纸上超过这个数量的选择器;但是，在企业网站上，这已成为一种常见的事情。基本上，任何包含超过4095个选择器的工作表仍然会被读入，但是浏览器在此之后将无声地呈现任何规则。

这并不是说缩小到一个文件是坏，但是，另一种分割方法实际上不再是，实际上 ，在某些情况下，根据项目需要，必要或甚至更好。

Answer 3

以下是有关浏览器http://www.w3schools.com/browsers/browsers_stats.asp

的一些统计信息

对于响应式CSS，我会使用媒体查询，它不会影响旧浏览器，并且非常适合需要响应式css（移动设备）的设备

http://css-tricks.com/css-media-queries/

@import浏览器兼容性2013

3 个答案: