在单个请求中组合CSS
[英]Combining CSS in a single request
问题描述
Does anyone know how to achieve something like TypeKit when combining multiple CSS request? 
有没有人知道如何在组合多个CSS请求时实现类似TypeKit的东西？ Maybe I'am not aware of that but when you list some fonts the site would generate (maybe dynamic) CSS like 567,568,569.css lo load the font-file. 也许我不知道这一点，但当你列出一些字体时，网站会生成（可能是动态的）CSS，如567,568,569.css加载字体文件。 I thought of it as dynamic as it would change if you use other combination (in this case font ID). 我认为它是动态的，如果你使用其他组合（在这种情况下是字体ID）它会改变。
7 个解决方案
解决方案1
2 2011-03-22 16:15:38
I use the technique described by Carpetsmoker, but I didn't like the fact that the PHP script is invoked every time. 我使用Carpetsmoker描述的技术，但我不喜欢每次都调用PHP脚本的事实。 On Apache, you can set the following rewrite rule (in .htaccess): 在Apache上，您可以设置以下重写规则（在.htaccess中）：
RewriteCond %{REQUEST_URI} ^/css/cache
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^css/cache/(.*)$ /css/csscacher.php?files=$1 [L]
So say a request comes in for /css/cache/file1.css-file2.css, Apache will test for its existence. 因此，对于/css/cache/file1.css-file2.css的请求，Apache将测试它的存在。 If it doesn't exist, the request will be forwarded to the csscacher.php script with the filename passed as the value of the "files" param. 如果它不存在，请求将被转发到csscacher.php脚本，文件名作为“files”参数的值传递。 csscacher.php will load and combine the multiple files, send the result to the browser, but also write the result to /css/cache/file1.css-file2.css. csscacher.php将加载并组合多个文件，将结果发送到浏览器，还将结果写入/css/cache/file1.css-file2.css。 All subsequent requests will be served as a static file. 所有后续请求都将作为静态文件提供。
To clear the cache, you'd just delete everything in the /css/cache folder. 要清除缓存，您只需删除/ css / cache文件夹中的所有内容。 csscacher.php will recreate them from the source files as requests come in. More detail here . 当请求进来时，csscacher.php将从源文件中重新创建它们。 这里有更多细节。
解决方案2
1 2011-05-20 22:27:53
You could also just use 你也可以使用
@import url('reset.css'); @import url（'reset.css'）;
at the top of your main css fiel to import other css files on the fly. 在您的主要css领域的顶部，即时导入其他CSS文件。
解决方案3
1 2011-05-27 16:35:39
Have a look at the Google minify project . 看看Google minify项目 。 It offers a good solution to combine and also compress your JavaScript or CSS files. 它提供了一个很好的解决方案来组合并压缩您的JavaScript或CSS文件。 It is a PHP library that you can set up on your webserver with a script that takes a list of JS or CSS files and outputs a concatenated version. 它是一个PHP库，您可以在Web服务器上设置一个脚本，该脚本获取JS或CSS文件列表并输出连接版本。 It also caches the result. 它还缓存了结果。
解决方案4
0 2010-11-25 14:36:38
The implementation could be separated into three steps. 实施可分为三个步骤。 Firstly, define a control wraps all the reference JS files. 首先，定义一个控件包装所有引用的JS文件。
Secondly, during the rendering of that control, using any kind of algorithm (eg encoding / encrypting) for all file paths to a string, and generate the script tag with a src which points to a certain handler with that generated as querystring. 其次，在呈现该控件期间，对字符串的所有文件路径使用任何类型的算法（例如编码/加密），并使用src生成脚本标记，该src指向使用生成为查询字符串的特定处理程序。
eg Image we have two files: a.js and b.js, we have a control wraps them and generates the script tag like: 例如，Image我们有两个文件：a.js和b.js，我们有一个控件包装它们并生成脚本标记，如：
<script type='text/javascript' src='/js.php?include=encodeab'></script>
Thirdly, when client side displays the html page and sends request for that script tag, a certain server side handler (js.php in above case) will decode / decrypt that querystring to a list of included files, then read content of them, combile together and output to stream. 第三，当客户端显示html页面并发送对该脚本标记的请求时，某个服务器端处理程序（上面的js.php）会将该查询字符串解码/解密为包含文件的列表，然后读取它们的内容，组合一起输出到流。
Hope this helps. 希望这可以帮助。
解决方案5
0 2011-03-16 18:50:12
You can do something close by calling a dynamic JS file: start with a php file and then in it: 您可以通过调用动态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
}
?>
and in the header just have: 在标题中只有：
<script type="text/javascript" src="js/allScripts.php?jsOne=yes&jsThree=yes"> and so on
Hope this helps. 希望这可以帮助。
解决方案6
0 2011-03-16 18:59:26
Be wary using dynamic js or css files as you may accidentally force the user to download them on each page (instead of using browser caching). 请谨慎使用动态js或css文件，因为您可能会意外强制用户在每个页面上下载它们（而不是使用浏览器缓存）。
You can include multiple javascript/php files into one file, then give it a header of type javascript: 你可以将多个javascript / php文件包含在一个文件中，然后给它一个javascript类型的标题：
header("Content-type: text/javascript");
include('javascript1.php');
include('javascript2.js');
The same holds true for CSS. CSS也是如此。
Resources: http://www.javascriptkit.com/javatutors/externalphp.shtml http://www.webmasterworld.com/php/4239826.htm 资源： http ： //www.javascriptkit.com/javatutors/externalphp.shtml http://www.webmasterworld.com/php/4239826.htm
解决方案7
0 2011-03-16 20:23:44
You can use something along the lines of: 您可以使用以下内容：
<?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; }
This is a simple example, you can easily expand it to allow javascript files. 这是一个简单的例子，您可以轻松地将其扩展为允许javascript文件。 Another good optimisation would be setting the Last modified headers based on the mtime of the .css files (use stat() ) ... But the general idea should be clear. 另一个很好的优化是根据.css文件的mtime设置Last修改的头文件（使用stat() ）......但是一般的想法应该是清楚的。
BEWARE , to be honest, I'm not sure if the escaping/parsing of the $_GET['files'] is enough ... Please research this topic to be sure, this can a very dangerous security problem :-) 请注意 ，说实话，我不确定$ _GET ['files']的转义/解析是否足够......请研究这个主题以确定，这可能是一个非常危险的安全问题:-)
Hope this is enough to get you in the right direction. 希望这足以让你朝着正确的方向前进。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.