GZIP and strip whitespace from your CSS files. Add specific CSS files to post/pages. Development of modular CSS without the making the user download several CSS files.
Description
This plugin allows developers/designers to confidently use @import inside a CSS file and not worry about what happens on the user's end. The plugin will look through your style.css file and put any @import files into it. It will also GZIP and set a cache expiry time. The ability to use other stylesheets is explained in the How it works section.
Now in version 2.0 you can add CSS files to a specific page or post and putting all of them into one file.
Version 2.0:
- Ability to add CSS files to specific page/post
- Concatenate CSS files into a single file (comma separated)
- Improved security
- Reduced URL outputted
Installation
- Upload
/wp-css/folder to the/wp-content/plugins/directory - Activate the plugin through the 'Plugins' menu in WordPress
- Set the permissions to 777 for the
/cache/folder - Default CSS file (
style.css) is automatically configured. - Use
<?php wp_css('path/to/css/file.css'); ?>to link to other CSS files.
How it works
Let's say we have the style.css file which controls main layout, typography and other generic CSS attributes across the site. Now instead of putting all your CSS code into one file - thus making it harder to maintain and further develop your site. Instead if your website's CSS was developed in a modular fashion – changing or adding new CSS would be a lot easier.
If I put 8 CSS files inside style.css using @import function and with a total file size of 33KB. We GZIP each file separately this turns the total into 4KB (88% decrease), which is a great decrease in size. However, the user would still have to download 8 files. WP CSS turns the files into a 3KB (91% decrease) size and more importantly one file download.
Tests were measured using a Firefox plugin called Firebug. Firefox was run a Mac Pro (2008) using OS X 10.5.3. Eight CSS files were include in this test: typography.css, form.css, list.css, special.css, skin.css, menu.css, other.css, sIFR-screen.css – all created to simulate an average size of a typical website.
Adding CSS files to specific page/post
The plugin new feature scans through your current theme for any CSS files. It will display the files in directory order. Its very simple to use and allows you to combine all CSS files added into a single file.
Examples
style.css
The default style.css will be automatically picked up by the plugin.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Other CSS files
i.e. <link rel="stylesheet" href="<?php wp_css('services.css'); ?>" type="text/css" media="screen" />
Admin section
The admin section will allow you:
- Turn the plugin on / off, whilst wp_css() still works.
- To specific the expiry time for caching for each CSS file
- To clear the cached CSS file if you update any of your CSS files.
