将CSS用于移动网站会不会很好?

时间:2010-09-17 19:03:59

标签: css xhtml mobile-website

在移动网站的<head>中使用CSS是否合适?因为编写和维护的CSS不会很多。

喜欢这个http://www.emirplicanic.com/uploaded/tutorials/mobile/

<head>
<style type="text/css">

css here...........

</style>
</head>

它将保存一个HTTP请求。我们可以为网站保留一个共同的header.php

或者在<head>中保留css在移动网站上仍然是一个坏主意?

3 个答案:

答案 0 :(得分:7)

不推荐它。

您最初可能会保存一个HTTP请求(请记住CSS文件已缓存),但从长远来看,我认为您会发现增益很小(如果有的话),并且您要添加额外的文本通过每个请求发送。维护也很重要。

根据CSS上的数量/移动页面加载的频率与ajax加载的数据,如果你包含CSS内联,你可能会节省一些加载时间,但这是一个案例判断 - 安全的答案是将它放在一个由浏览器自动缓存的文件中。

查看该页面上HTML的大小,其中一半以上是CSS。

答案 1 :(得分:2)

外部css节省了bw,但我遇到了一些手机无法处理外部css的情况。如果你想覆盖广泛的设备,那可能是个好主意。

答案 2 :(得分:2)

我最近刚刚在我们的团队中进行了这次讨论。我们的结论是内联CSS(反对将它们作为单独的下载并依赖于过期标题来缓存在手机上)。我们的一些关键考虑因素是:

  • 建立连接有很多延迟,因此在不支持使用expires header本地缓存文件的功能手机上内联CSS有很大的优势。

  • 对于支持过期的手机,通常也支持payload compression,因此使用压缩可以补偿每次下载中的额外css。

  • 此策略在支持过期的手机上丢失,但不支持压缩。我们认为这只是我们用户的一小部分。

解决@Bob的维护点,我们将所有css保存在服务器上的单独文件中,并在生成时将其注入HTML(serverside是JSF)。如果你没有这个选项,那么我同意鲍勃 - 它将成为维护的噩梦。

注意:我们为智能手机用户提供WIFI(20%),3G / Edge智能手机(40%)和3G / Edge功能手机用户(40%)。