Combining CSS into a single request

Question

Does anyone know how to achieve something like TypeKit when combining multiple CSS requests? Maybe I don’t know about this, but when you list some fonts, the site will generate (possibly dynamic) CSS, for example 567,568,569.css lo download the font file. I thought of it as dynamic, as it would change if you used a different combination (in this case, the font identifier).

Answer 1

I use the technique described by Carpetsmoker, but I did not like the fact that the PHP script is called every time. In Apache, you can set the following rewrite rule (in .htaccess):

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

So, say the request comes for / css / cache / file 1.css-file2.css, Apache will check for its existence. If it does not exist, the request will be redirected to the csscacher.php script with the file name passed as the value of the "files" parameter. csscacher.php will download and combine several files, send the result to the browser, and write the result to / css / cache / file 1.css-file2.css. All subsequent requests will be executed as a static file.

To clear the cache, you simply delete everything in the / css / cache folder. csscacher.php will recreate them from the source files as requests become available. More details here .

Answer 2

You can also just use

@import url ('reset.css');

at the top of the main css field to import other css files on the fly.

Answer 3

Check out Google minify . It offers a good solution for combining and compressing your JavaScript or CSS files. This is a PHP library that you can configure on your web server using a script that accepts a list of JS or CSS files and displays a concatenated version. It also caches the result.

Answer 4

Implementation can be divided into three stages. First, the control definition wraps all referenced JS files.

Secondly, during the rendering of this control, using any type of algorithm (e.g. encoding / encryption) for all file paths for the string, and generate a script tag with src that points to a specific handler with the one generated as querystring .

eg. We have two files: a.js and b.js, we have a control that wraps them and generates a script tag, for example:

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

Thirdly, when the client side displays the html page and sends a request for this script tag, a certain server-side handler (js.php in the above case) will decode / decrypt this sequence of requests into the list of included files, and then read their contents, are combined and are output to the stream.

Hope this helps.

Answer 5

You can do something close by invoking a dynamic JS file: start with the php file and then in it:

 <?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 title just:

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

Hope this helps.

Answer 6

Be careful when using dynamic js or css files, as you may accidentally force the user to load them on every page (instead of using browser caching).

You can include multiple javascript / php files in one file, and then give it a javascript type header:

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

The same is true for CSS.

Resources: http://www.javascriptkit.com/javatutors/externalphp.shtml http://www.webmasterworld.com/php/4239826.htm

Answer 7

You can use something line by line:

 <?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 extend it to allow javascript files. Another good optimization is setting the last modified headers based on mtime .css files (use stat() ) ... But the general idea should be clear.

BEWARE , to be honest, I'm not sure if escaping $ _GET ['files'] is enough. Please research this topic to be sure it can be a very dangerous security issue :-)

I hope this is enough to get you in the right direction.