Reputation: 1043
For example, my site has 5 CSS files like this...
<link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_fleet.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_service.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_corporate.css" type="text/css" />
Every page of the site will be in one of those "categories" (i.e. marketing, gps, fleet, service or corporate). And this is indicated by a class on the HTML tag. So something like this at the top of every page...
<html class="gps">
I currently have EVERY page calling all 5 style sheets listed above, but it only NEEDS the corresponding style sheet, so I'd like to be efficient if possible.
Is there a way using PHP (or whatever makes sense) to essentially search the tag's class for "gps" or "fleet" (etc.) and if, for example, it found "gps", I could then echo only that style sheet, i.e...
echo "<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />";
Upvotes: 2
Views: 967
Reputation: 21725
This seems like a poor strategy, albeit I don't know the size of your CSS files and other parameters.
How different are these pages as far as their style goes? From the file names above it looks like you might have a lot of redundant (duplicate) CSS selectors in each file. How much of the CSS in each of those files is actually unique? Is it 5k? 10k? 50k? If it's fairly small, go ahead an put it all in one file. By placing it in one file all the CSS for all the pages of your site will be cached in the user's browser and no additional requests would be needed for subsequent pages.
If combining all files and you have a 500k file and 250k is for a single page then splitting it would make more sense.
A PHP Solution
I'm guessing that your setting the CSS class on the <html>
tag with PHP. If so, why not check the value of that variable in your PHP script and add the appropriate CSS file.
Something like this:
<html class="<?php echo $page_class; ?>">
<head>
<link href="custom_<?php echo $page_class; ?>.css">
</head>
This is advice is fairly general but hopefully it points you in the right direction.
Upvotes: 2
Reputation: 728
try something like
<?php
if($page_type = 'gps')
{
?>
<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
<?php
}
elseif($page_type = 'marketing')
{
?>
<link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
<?php
}
?>
Upvotes: 1
Reputation: 3624
This totally depends on how PHP generates your HTML. Another possibility is to do this with JavaScript. You can do it like this:
<script type="text/javascript">
var file = 'templates/purity_iii/css/custom_' + document.documentElement.className + '.css';
var link = document.createElement('link');
link.href = file;
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
You can for example place the code above between <head>
and </head>
. Not really a valid answer to your question (PHP solution), but you could consider this as an alternative.
Upvotes: 3