代码片段 → CSS → 使用PHP压缩CSS

使用PHP压缩CSS

Avatar of Chris Coyier
Chris Coyier 于

以这段PHP代码开始你的CSS文件（并将其命名为style.php）

<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>

body { color: red; }

然后使用PHP文件名调用你的CSS

<link rel='stylesheet' type='text/css' href='css/style.php' />
嘘！ 创建一个DigitalOcean账户并获得$200免费信用额度用于基于云的托管和服务。

评论

  1. Ben
    评论永久链接#

    一些旧版本的浏览器在CSS文件没有.css扩展名时会出错。Javascript文件也是如此。

    也许可以使用.htaccess将其重命名为style.css

    回复
    • elandy2009
      评论永久链接#

      无论如何，在开发网站时，没有人关心旧浏览器。

  2. TeMc
    评论永久链接#

    @Ben: 或者将文件重命名为.css，并使用.htaccess将其解释为PHP ;-)

    回复
  3. TeMc
    评论永久链接#

    @Ben: 或者将文件重命名为.css，并使用.htaccess将其解释为PHP ;-)

    回复
  4. Roflo
    评论永久链接#

    我相信在脚本末尾调用ob_flush();是一个好的实践。

    回复
  5. DougS
    评论永久链接#

    你怎么知道这么多东西

    回复
  6. Jacob McDonald
    评论永久链接#

    我很高兴看到我的提交出现在网站上。

    回复
  7. Hassan
    评论永久链接#

    我得到了“无法修改头信息”错误。有什么想法吗？

    回复
    • David
      评论永久链接#

      你可能在调用header()之前输出了一些内容。

      通常这是因为在第一个<?php标签之前有一个换行符或空格

    • Praveen Kumar
      评论永久链接#

      检查文件中的UTF8字节顺序标记。这会导致此问题。

  8. Bloggerschmidt
    评论永久链接#

    感谢代码片段。这一行

    <pre>header(“Content-type: text/css; charset: UTF-8”);</pre>

    应该是

    <pre>header(“Content-type: text/css; charset=UTF-8”);</pre>

    回复
  9. cpWicked
    评论永久链接#

    如果我压缩CSS有什么优势？:)

    回复
  10. Michelle John
    评论永久链接#

    我认为如果你使用的是Apache服务器，你也可以使用gzip或defalte mod选项。

    回复
    • VR
      评论永久链接#

      使用ob_gzhanlder()回调。
      ob_start(‘ob_gzhandler’);
      从PHP 4.0.4开始可用

  11. Keshav Naidu
    评论永久链接#

    有什么用途？
    -提前感谢.. :)

    回复
  12. Ahmad Awais
    评论永久链接#

    它的优势是什么？我正在使用Minify工具？

    回复
  13. Peter
    评论永久链接#

    你可以像这样使用它

    <?php
$base_color = "#COFFEE";
?>

a {
color: <?=$base_color?>;
}
    回复
  14. Dalibor Sojic
    评论永久链接#

    这个脚本有缺点。主要的缺点是缓存。

    在第一次访问时，php会将过期日期设置为“未来”，但是……如果你对CSS进行了更改，则不会反映给返回的访问者，因为他们已经缓存了CSS。

    回复
    • BAM5
      评论永久链接#

      确实，但是还有其他缓存方法，例如设置ETag头并在每次更改php输出内容时更改它以更新浏览器的缓存。或者更好的是，对输出缓冲区进行校验和并将其设置为ETag，这样你就不需要触碰php代码了，尽管这样做有缺点，因为你必须渲染css并每次都对其进行哈希以比较来自客户端的ETag。

      http://en.wikipedia.org/wiki/HTTP_ETag

      <?php ob_start ('ob_gzhandler'); ?>

body { color: red; }

<?php
$output = ob_get_clean();
$etag = md5($output); // or crc32($output) which is faster but not as unique
$headers = getallheaders(); // May not work on non Apache Servers
foreach($headers as $header => $value)
	if($header == 'If-None-Match' && $etag == $value){
		header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');
		exit();
	}
header('ETag: '.$etag);
header('Content-type: text/css; charset: UTF-8');
echo $output;
?>
    • BAM5
      评论永久链接#

      快速说明，我没有测试以上代码，所以它可能有效也可能无效。

    • MorningCoffee
      评论永久链接#

      或者你可以使用一个非常快速和常见的缓存修复方法，time()或类似的东西。我个人使用style.php?r=md5（2012-01-13_09-51pm）

      对css的修订日期进行md5哈希，因此如果有新的md5哈希，它将重新缓存css，因为time()会强制不停地访问，这不是你想要的。

  15. Syed Shah
    评论永久链接#

    但无论如何，这很好且非常重要，尤其是在谷歌机器人访问时，它也会检查你的网站速度。我不认为这是一个缺点。这完全取决于你如何使用它。

    回复
  16. Mark Kachel
    评论永久链接#

    你好，
    我无法使用v2.1验证让上面的脚本通过CSS验证。
    它一直给我这个内容类型错误。谁能帮忙解决一下？谢谢！

    确切的错误
    URI：http://www.tsmgroup2.biz/css/dropdown/themes/default/dropdowncomb.php
    -1 未知错误 org.w3c.www.http.HttpInvalidValueException: 无效的内容类型。
    随意使用w3.org的验证服务

    回复
  17. mAnisH
    评论永久链接#

    我认为它每次页面加载时都会加载CSS

    回复
    • Helly
      评论永久链接#

      mAnisH，你能告诉我你做了什么来每次页面加载时都加载CSS吗？我真的很需要一些帮助:(

  18. Dan
    评论永久链接#

    在这个行业，我从未停止学习。我不知道CSS压缩可以通过这种方式实现。

    谢谢！

    回复
  19. 网站建设
    评论永久链接#

    我正在使用带有gzip的joomla，但CSS文件没有压缩。我没有使用.htaccess，因为服务器是freebsd，所以我想问一下你的教程是否可以帮助压缩我的CSS文件，或者它是否会损坏网站？

    谢谢

    回复
  20. John Louie
    评论永久链接#

    我目前使用此选项在你的assets中创建css.php并按照以下代码

    并将其粘贴到你的header中

    <link href="/css.php" rel="stylesheet" type="text/css"/>

    它有效…

    <?php

header("Content-type: text/css");// First of all send css header

$css = array(// Array of css files
    'style.css',
);

foreach ($css as $css_file) {// Loop the css Array
       // Load the content of the css file
    $css_content = file_get_contents($css_file);
    echo $css_content;
     // print the css content
}
?>
    回复
  21. Maher
    评论永久链接#

    你好。
    当我这样使用代码

    ob_flush();<br>
//ob_start ("ob_gzhandler");<br>
header("Content-type: text/css; charset: UTF-8");<br>
header("Cache-Control: must-revalidate");<br>
$offset = 60 * 60 ;<br>
$ExpStr = "Expires: " .<br>
gmdate("D, d M Y H:i:s",<br>
time() + $offset) . " GMT";<br>
header($ExpStr);<br><hr>

    然后我有一个压缩文件，但是CSS文件（style.php）在我的页面上不起作用！有什么建议吗？

    回复
  22. Micha
    评论永久链接#

    我个人喜欢获取php文件哈希的方式。

    例如：style.php?r=md5(file_get_contents(style.php))将其写入header。
    因此，如果文件相同，并且用户已将其缓存，则无需再次加载。
    但如果只有一个字节发生变化，每个用户都必须重新下载文件

    回复
  23. Iliya
    评论永久链接#

    哦！

    非常棒的想法！

    回复
  24. January
    评论永久链接#

    为什么要用PHP压缩CSS文件？

    原因是什么？

    回复
    • Shubham Mathur
      评论永久链接#

      压缩CSS将缩短页面的加载时间，
      例如
      一个 10kb 的 CSS 文件加载需要更多时间，如果加载相同的压缩 CSS 文件，则肯定会花费更少的时间。

  25. HenryNugraha
    评论永久链接#

    生产环境下的不良实践。
    压缩你的 CSS 文件并保存，而不是每次页面加载时都压缩它。
    你的 CSS 文件到底有多大，需要压缩？999 GB 吗？

    回复
  26. Hazem
    评论永久链接#

    非常有帮助！:D

    回复
  27. Farshad H.
    评论永久链接#

    太棒了！
    另一种方法是在发布后运行一个 PHP 文件（开发者知道的某个彩蛋 URL），来压缩 .css 或 .js 文件。
    这有助于调试过程，当设计师需要在开发者控制台中查看行号时。

    回复

发表评论

您的电子邮件地址不会被公开。 必填字段标有 *

© 2024 . All rights reserved.