将 CSS 放在中会好吗?对于手机网站?
在移动网站的 中使用 CSS 是否合适?因为不会有太多的css需要编写和维护。
像这样http://www.emirplicanic.com/uploaded/tutorials/mobile/
<head>
<style type="text/css">
css here...........
</style>
</head>
它将保存一个 HTTP 请求。我们可以为站点保留一个通用的header.php
。
或者在移动网站上将 css 保留在 中仍然是一个坏主意?
Is it good to have CSS in <head>
for mobiles site? because there will be not much css to write and maintain.
Like this http://www.emirplicanic.com/uploaded/tutorials/mobile/
<head>
<style type="text/css">
css here...........
</style>
</head>
It will save one HTTP request. We can keep one common header.php
for site.
Or keeping css in <head>
is still a bad idea on mobile websites?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
不推荐它。
您可能一开始会保存一个 HTTP 请求(记住 CSS 文件已被缓存),但从长远来看,我认为您会发现增益很小(如果有的话),并且您添加了额外的文本以通过每一个请求。维护也很重要。
根据移动设备上的 CSS 量/页面加载频率与 ajax 加载的数据,如果您内联包含 CSS,您可能能够节省一些加载时间,但这是具体情况判断 - 安全的答案是把它放在一起在一个由浏览器自动缓存的文件中。
查看该页面上 HTML 的大小,其中一半以上是 CSS。
Wouldn't recommend it.
You might save one HTTP request initially (remember a CSS -file- is cached), but in the long run clicking around I think you'll find the gain is minimal if any, AND you're adding extra text to be sent through with every request. Maintenance is important to consider too.
Depending on the amount of CSS/frequency of page loads on mobile versus ajax loaded data you might be able to sneak in some load time savings if you include the CSS inline, but that's a case by case judgement - the safe answer is to put it in one file that is cached automatically by the browser.
Check out the size of the HTML on that page, more than half of it is CSS.
我最近刚刚在我们的团队中进行了这个讨论。我们的结论是内联 CSS(反对将它们单独下载并依赖过期标头在手机上缓存)。我们的一些关键考虑因素是:
建立连接有很多延迟,因此内联 CSS 对于不支持使用 过期标头。
对于支持过期的手机,一般也支持有效负载压缩,所以使用压缩补偿每次下载中的额外 CSS。
此策略在支持过期但不支持压缩的手机上会失败。我们认为这只是我们用户的一小部分。
针对 @Bob 的维护点,我们将所有 css 保存在服务器上的单独文件中,并在生成时将其注入到 HTML 中(服务器端是 JSF)。如果你没有这个选项,那么我同意鲍勃的观点——这将成为维护的噩梦。
注:我们同时满足使用 WIFI 的智能手机用户 (20%)、使用 3G/Edge 的智能手机 (40%) 以及使用 3G/Edge 的功能手机用户 (40%)。
I've just recently had this discussion within our team. Our conclusions were to inline the CSS (against having them as separate downloads and relying on expires headers to cache on the phone). some of our key considerations were:
There is a lot of latency establishing a connection, so inlining the CSS has a big advantage on feature phones that do not support caching the files locally with expires header.
For phones that support expires generally also support payload compression, so using compression compensates for the additional css in each download.
This strategy loses out on phones that support expires, but do not support compression. We figure this is a pretty small % of our users.
Addressing @Bob's maintenance point, we keep all the css in separate files on the server, and it is injected into the HTML as this is being generated (serverside is JSF). If you don't have this option, then I agree with Bob - it will become a maintenance nightmare.
Note: We cater to both smartphone users with WIFI (20%), smartphone over 3G/Edge (40%) and feature phone users over 3G/Edge (40%).
外部CSS节省了bw,但我遇到过一些手机无法处理外部CSS的情况。如果您想覆盖广泛的设备,这可能是个好主意。
External css saves bw but i came across situations where some phones were unable to process external css. If you want to cover broad range of devices it may be good idea.