组合多个CSS文件

时间:2010-08-12 23:06:40

标签: php css

现在我使用PHP脚本将多个CSS文件合并到一个脚本中,然后使用内容类型的text / css输出它们。

他们的问题是浏览器不会缓存文件。

有更好的方法吗?

由于

4 个答案:

答案 0 :(得分:3)

如果你必须通过PHP提供CSS,你可以强制发出一个缓存标题,这样浏览器可以根据需要缓存输出:

<?php

    header('Cache-control: max-age=3600'); // cache for at least 1 hour
    header('Content-type: text/css');

    readfile('css1.css');
    readfile('css2.css');
    etc...

答案 1 :(得分:2)

为什么不在全局css文件中使用@import并将其链接到您的html文件中?

请参阅:http://www.cssnewbie.com/css-import-rule/

答案 2 :(得分:1)

“级联样式表”在CSS文件可能include其他人之前被称为。您还可以在HTML文件中指定多个CSS文件(使用LINK),而不是将它们包含在内。

使用这些工具,让您的Web服务器负责发送适当的标头,以便客户端缓存处理条件HTTP请求。

答案 3 :(得分:1)

我使用下面发布的代码。

符合Google的网页速度建议。

请注意,readfileinclude更快,因此应该使用。

<?php
#$off = 0; # Set to a reasonable value later, say 3600 (1h);
$off = 604800; # Set to 1 week cache as suggested by google

$last_modified_time = filemtime('csscompressor.php'); 
$etag = md5_file('csscompressor.php'); 

ob_start("ob_gzhandler");
ob_start("compress");
header('Content-type: text/css; charset="utf-8"', true);
header("Cache-Control: private, x-gzip-ok=''");
header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_modified_time)." GMT"); 
header("Etag: $etag"); 
header("Expires: " . gmdate("D, d M Y H:i:s", time() + $off) . " GMT");

// load css files
readfile("global.css");
readfile('jquery-theme.css');
// ...

?>

您还应该像这样服务所有CSS和JAVASCRIPT页面:

<script src="http://example.com/myjavascript.js?v=<?=$version=?>" ></script>

$version变量由您控制。应在站点范围的配置文件中设置。每次推送更新时,您都可以在一个地方更改版本,每个看到新内容的人都会推送它而不依赖于缓存。