Login

07-28-2008, 10:00 AM

[eluser]dcheslow[/eluser]
Here's a little ditty I wrote to help me manage css links. Basically it allows you to add css links from anywhere in your code (controller/libraries/views/etc), it makes sure that you never link the same css file twice and, when configured properly it compresses multiple css files into one file and then caches it. This can speed up your page loads because browsers will only make a limited number of connections to the server at one time and CSS files are generally smallish.

I use this with my handy site library (posted elsewhere in the forums) to keep track of paths and urls, but you can override in the config file. I don't use the Ellis Labs function naming conventions because I hate underscores.... personal thing, sorry.

One word of caution: If you break your CSS into too many files and then combine them in lots of different ways, caching will actually INCREASE the overhead because the library creates a cache for each combination of CSS files on your site. I generally try to have one combination for admin pages, one for public pages and one for public pages with forms (just because forms require so much extra css). If there is a seldom accessed page that has unique CSS, then I'll create a combination for that. This does not mean that you cannot break your CSS into small chunks... just that the small chunks should be added in consistent combinations.

Using it is pretty simple...
1) install and modify the config file
2) install and auto-include the library
3) modify your template(s) like this:

Code:
&lt;?php

    $ci=&get;_instance();

    $css=$ci->css->getlinks();

?&gt;

&lt;head&gt;

... other HTML code

&lt;?= $css ?&gt;

... other HTML code

&lt;/head&gt;

4) start linking css files like this:

Code:
$this->css->addlink('forms');

That's it.

07-28-2008, 09:13 PM

[eluser]RaZoR LeGaCy[/eluser]
I added to my config file
// these are css files included on EVERY page of the site
$config['links']=array('new_style');
// this is the relative path that you use for images in your css
// it will be replaced with an appropriate path when css is cached
// I use:
// -application
// -assets
// -cache
// -css
// -siteimages
$config['relativeimageurl'] = '../../images/';

// if you are using the site library, set the items below to empty strings, anything else overrides

// this is the full url to the images directory (points to the same directory as the relativeurl above)
$config['absoluteimageurl'] = 'http://www.mysite.com/images/';
// assetcachepath is the full path to the main cache directory, make sure this directory has write permission
// a directory named 'css' will be created in this directory
// cached css is stored in the 'css' directory
$config['assetcachepath']='';
// url to the assetcachepath above
$config['assetcacheurl']='';
// valid values: '', TRUE, FALSE
$config['cacheassets']=TRUE;
// complete URL to css files, used when cacheassets==FALSE
$config['cssurl']='';
// complete path to css files, used to create cache
$config['csspath']='';

Then I added this to my template
<?php
$ci=&get;_instance();
$css=$ci->css->getlinks();
$this->css->addlink('superfish');
?>
<head>
<title><?=$ptitle?></title>
<?=$css?>
<link rel="stylesheet" href="<?=base_url();?>public/shared/css/new_style.css" type="text/css" media="screen" />
</head>

I get errors like
Missing argument 1 for Css::__construct()
Undefined variable: config

I think I screwed up my config setting but I am a little unsure what to do. Please help me out.
Thanks ALL

07-29-2008, 09:32 AM

[eluser]dcheslow[/eluser]
Hi Raz,

I'm surprised how many folks don't know about this cool feature of CI...

If you have a config file with the same name as your library, then CI will load it and pass it to the library constructor automagically.

So... you should have a file
application/config/css.php
and a file
application/libraries/css.php

Also, there is a typo in my post...

Code:
&get;_instance()

should be

Code:
&get;_instance()

Note: the semi-colon should not be there.

Just after I first posted, I found I posted the wrong version (isn't it always the way?) and immediately updated the posting. The bad code was only there for a few minutes, but you should probably re-download... just in case.

Next, you need to call:

Code:
$this->css->addlink('superfish');

before you call:

Code:
$css=$ci->css->getlinks();

and you do not need:

Code:
&lt;link rel="stylesheet" href="&lt;?=base_url();?&gt;public/shared/css/new_style.css" type="text/css" media="screen" /&gt;

at all because you linked that file via the config.

The links will be generated in this order: new_style, superfish

Note: my library does not deal with the "media" attribute. I just never got to that... it's on my TODO list.

Next, if you are not using my site library, then you need to set more of the config values in config/css.php (all of the paths and urls need to point to the right places)

Here's an executive summary of how it works - the library maintains a queue (as opposed to a stack) of links to add to the page. The first links in the queue come from the config file. More links are added from your controller/models/views as they execute. Duplicate entries are discarded. Finally, when you put your page together in your template, the call to

Code:
css->getlinks()

builds the appropriate HTML link tags based on the contents of the queue; either a link to a single compressed-and-cached file or a bunch of links to all the original css files, depending on the config setting cacheassets == TRUE/FALSE.

Things already on my TODO list:
1) add support for media attribute
2) add more "smarts" so that caching does not degenerate when you have lots of css files combined in different ways. I'd be really happy to hear suggestions on good ways to do this. It's sort of a combinations-and-permutations problem... really needs to have some knowledge about the CSS linked to ALL the pages on your site in order to find the most efficient combinations to cache... hmmmmmmm.

As always, constructive criticism is welcome.

Hope that helps...

Cheers,

=dave=

07-29-2008, 09:33 AM

[eluser]dcheslow[/eluser]
Grrrrr... looks like it's the CI Forum that is adding the semicolon to get_instance. What up with THAT?

=dave=

07-29-2008, 12:55 PM

[eluser]Pascal Kriete[/eluser]
It's a side-effect of the xss cleaning. All you need is a space after the & :

Code:
$CI =& get_instance();

07-29-2008, 02:13 PM

[eluser]RaZoR LeGaCy[/eluser]
So i edited it and now I get errors because of my config. Please review my config and tell me where I am going wrong.

Thanx

$config['links']=array('new_style');
// this is the relative path that you use for images in your css
// it will be replaced with an appropriate path when css is cached
// I use:
// -application
// -assets
// -cache
// -css
// -siteimages
$config['relativeimageurl'] = $_SERVER['DOCUMENT_ROOT'].'images/';

// if you are using the site library, set the items below to empty strings, anything else overrides

// this is the full url to the images directory (points to the same directory as the relativeurl above)
$config['absoluteimageurl'] = 'http://www.site.com/images/';
// assetcachepath is the full path to the main cache directory, make sure this directory has write permission
// a directory named 'css' will be created in this directory
// cached css is stored in the 'css' directory
$config['assetcachepath']= $_SERVER['DOCUMENT_ROOT'].'tmp/';
// url to the assetcachepath above
$config['assetcacheurl']='http://www.site.com/tmp/';
// valid values: '', TRUE, FALSE
$config['cacheassets']=FALSE;
// complete URL to css files, used when cacheassets==FALSE
$config['cssurl']='http://www.site.com/public/shared/css/';
// complete path to css files, used to create cache
$config['csspath']=$_SERVER['DOCUMENT_ROOT'].'public/shared/css/';

07-30-2008, 09:42 AM

[eluser]dcheslow[/eluser]
I don't think that relativeimageurl can be a path... it is whatever you pre-pend your image files with in your css. I use url("../siteimages/filename.jpg"); in my css so I set this config value to "../siteimages/".

I don't think that is your problem though because you have cacheassets set to FALSE and the relativeimageurl only comes into play when caching..., sooo...

Can you post the error that you are getting?

07-30-2008, 09:49 AM

[eluser]dcheslow[/eluser]
Oh yeah, one more thing... my notes indicate that a 'css' directory will be created in the cache directory ('tmp' in your case). Not true. You need to create the 'css' directory and give it write permissions. Sorry about that.

07-31-2008, 09:10 AM

[eluser]dcheslow[/eluser]
They say you learn more from mistakes than successes... if that's true, then I must be getting pretty smart (*LOL*).

What I've learned in the last couple days... at least I THINK this is what's happening: If your browser (I'm talking Firefox here, but I suspect other browsers do something similar) finds an error in your CSS, it ignores everything to the end of the line. This seems reasonable.... we should all validate our CSS, and the browser should forgive us some sins. But...

My 'compress' function removes line breaks, so if you have an error in your CSS, then ALL the CSS to the end of the file is ignored. This is still sort of OK... we should all validate our CSS (we probably don't deserve forgiveness anyway). But...

Although I don't do it, some people intentionally use invalid CSS that is only 'correctly' interpreted by one browser (you know the one I'm talking about). This means that the compressed CSS may work fine in the non-compliant browser and totally fail in a compliant browser!

Suddenly, not OK at all!

Sooo... the library is still handy for collecting CSS links, but you should leave cacheassets==FALSE ... it's bad mojo.

I have a couple ideas on how to fix this by using gzip compression and I've also had an idea for how to handle the combinations and permutations problem... I'll post an update in about 10 days (Canadian holiday coming up, eh?).

Thanks to all who responded,

=dave=

08-09-2008, 10:12 AM

[eluser]dcheslow[/eluser]
A new and improved version of the CSS Library has been added to the wiki here:
CSS Library

Enjoy,

=dave=