@import浏览器兼容性2013 [英] @import browser compatibility 2013
问题描述
我一直在阅读有关响应式设计的文章，并将开始在我的网站上实施新的CSS设置.这使我开始思考调用所有这些不同CSS文件的最佳方法.我将针对不同的屏幕宽度使用不同的CSS.
I've been reading up about responsive design and am going to start implementing a new CSS set-up on my site. This has lead me to thinking about the best way to call all these different CSS files. I'll have a different CSS for different screen widths.
我正在辩论两个选择:
-
使用LINK标签连接到每个网页上的所有文件.我唯一的问题是持续的维护(并且必须添加所有这些链接开始)；我知道这不是世界末日，但在维护方面似乎有点紧张.
connecting to all the files from each web page with LINK tags. My only problem with this is the ongoing maintenance (and having to add all these links to start with); I know this isn't the end of the world but seems a little bit intensive on the maintenance side.
另一种方法是在每个网页上只有一个LINK标记，指向一个供稿器" CSS.这个馈送" CSS文件将包含使用@imports指向我其他CSS文件的所有链接.这意味着维护将变得轻而易举.我可以在整个站点的一个位置添加/重新排序/删除CSS文件.伟大的！
the other way would to have just one LINK tag on each web page, pointing at a 'feeder' CSS. This 'feeder' CSS file would include all the links to my other CSS files using @imports. This would mean maintenance would be a breeze. I could add/re-order/delete the CSS files in just one place for the entire site. Great!
但是，这会导致@import函数的兼容性(或在较旧的浏览器中缺少此功能).
However this leads on to compatibility of the @import function [or lack of it in older browsers].
我环顾四周，所见文章至少已有两年之久.
I've looked around and the articles I've seen have been at least a couple of years old.
因此，要弄清一个话题:[2013年7月]现在正在使用的浏览器中有多少支持此功能，我可以放心地忘记那些无法解释@import的浏览器吗?
So, to get to the nub: what percentage of browsers that are being used now [July 2013] support this and can I safely forget about the browsers that wont be able to interpret @import?
如果没有，该怎么办才能将CSS文件的维护降至最低.(比在当前站点上查找并替换"更为优雅.)
If not, what can I do to keep maintenance of CSS files down to a minimum. (Something more elegant than "find and replace on current site").
推荐答案
您不必担心 @import s，而只需合并并缩小所有CDN无法提供的CSS文件:
Instead of worrying about @imports, you should just combine and minify all of your CSS files that cannot be served via a CDN:
<link rel="stylesheet" href="styles-84e599dcbd6c60fa0af76aaa18a5d75f.css" />
加载速度更快，占用的带宽更少，并且可以在任何支持样式表的浏览器上使用.
It'll load faster, use up less bandwidth, and will work on any browser that supports stylesheets.
有很多方法可以做到这一点.如果您不使用任何Web框架(或使用Node.js)，请查看 Grunt .
There are many ways to do this. If you're not using any web framework (or are using Node.js), take a look at Grunt.
对于您的实际问题，除非您打算支持IE5.5之前的浏览器，否则
As for your actual question, unless you're planning to support browsers older than IE5.5, @import will work just fine. But I strongly recommend the minified stylesheet approach.
这篇关于@import浏览器兼容性2013的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
