Question

在组合多个CSS请求时，是否有人知道如何实现TypeKit之类的内容？也许我不知道这一点，但当你列出一些字体时，网站会生成（可能是动态的）像567,568,569.css这样的CSS加载字体文件。我认为它是动态的，如果你使用其他组合（在这种情况下是字体ID）它会改变。

Answer 1

我使用Carpetsmoker描述的技术，但我不喜欢每次都调用PHP脚本的事实。在Apache上，您可以设置以下重写规则（在.htaccess中）：

RewriteCond %{REQUEST_URI} ^/css/cache
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^css/cache/(.*)$ /css/csscacher.php?files=$1 [L]

所以说一个请求来自/css/cache/file1.css-file2.css，Apache会测试它的存在。如果它不存在，请求将被转发到csscacher.php脚本，文件名作为“files”参数的值传递。 csscacher.php将加载并组合多个文件，将结果发送到浏览器，还将结果写入/css/cache/file1.css-file2.css。所有后续请求都将作为静态文件提供。

要清除缓存，您只需删除/ css / cache文件夹中的所有内容。当请求进入时，csscacher.php将从源文件中重新创建它们。更多细节here。

Answer 2

您也可以使用

@import url（'reset.css'）;

在你的主要css领域的顶部，即时导入其他css文件。

Answer 3

查看Google minify project。它提供了一个很好的解决方案来组合并压缩您的JavaScript或CSS文件。它是一个PHP库，您可以在Web服务器上设置一个脚本，该脚本获取JS或CSS文件列表并输出连接版本。它还会缓存结果。

Answer 4

实施可分为三个步骤。首先，定义一个控件包装所有引用的JS文件。

其次，在呈现该控件期间，对字符串的所有文件路径使用任何类型的算法（例如编码/加密），并使用src生成脚本标记，该src指向使用生成为查询字符串的特定处理程序

e.g。我们有两个文件：a.js和b.js，我们有一个控件包装它们并生成脚本标记，如：

<script type='text/javascript' src='/js.php?include=encodeab'></script>

第三，当客户端显示html页面并发送对该脚本标记的请求时，某个服务器端处理程序（上面的js.php）会将该查询字符串解码/解密为包含文件的列表，然后读取内容它们，汇集在一起并输出到流。

希望这有帮助。

Answer 5

您可以通过调用动态JS文件来做一些事情：从一个php文件开始，然后在其中：

<?php
    if(isset($_GET['jsOne'])){
        include'example.com/js/one.js'; // points to some .js file 
    } 
    if(isset($_GET['jsTwo'])){
        include'example.com/js/two.js'; // points to some other .js file
    }
    if(isset($_GET['jsThree'])){
        include'example.com/js/three.js'; // points to yet a another .js file
    }
?>

并在标题中只有：

<script type="text/javascript" src="js/allScripts.php?jsOne=yes&jsThree=yes"> and so on

希望这有帮助。

Answer 6

要小心使用动态js或css文件，因为您可能会意外强迫用户在每个页面上下载它们（而不是使用浏览器缓存）。

你可以在一个文件中包含多个javascript / php文件，然后给它一个javascript类型的标题：

header("Content-type: text/javascript");
include('javascript1.php');
include('javascript2.js');

CSS也是如此。

资源： http://www.javascriptkit.com/javatutors/externalphp.shtml http://www.webmasterworld.com/php/4239826.htm

Answer 7

您可以使用以下内容：

<?php
  header('Content-Type: text/css');

  if (isset($_GET['files']))
  {
    $files = explode(',', $_GET['files']);
    foreach ($files as $file)
    {
      # BEWARE!
      # What happens if the file is ../../../../../../../../etc/passwd?
      $file = str_replace('..', '', ltrim($file, '/'));
      include($file);
    }
  }
?>

test.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css.php?files=style1.css,style2.css" />
  </head>

  <body>
    <h1>This should be red</h1>
    <p>red border</p>
  </body>
</html>

style1.css

p { border: 1px solid red; }

style2.css

h1 { color: red; }

这是一个简单的例子，您可以轻松扩展它以允许javascript文件。另一个很好的优化是根据.css文件的mtime设置Last修改的头文件（使用stat()）......但是一般的想法应该是明确的。

BEWARE ，说实话，我不确定$ _GET ['files']的转义/解析是否足够......请研究这个主题以确定，这可以一个非常危险的安全问题： - ）

希望这足以让你朝着正确的方向前进。

在单个请求中组合CSS

7 个答案: