Re: [WSG] My Style Switcher... (CSS Caching)
Again no disrespect - I too am all for easier maintenance on the server side, but don't fall into the trap of thinking that your files will be cached just because the URL doesn't change. I have just made several requests to your site all the (index page) and each time your CSS was downloaded (while your images cached). I have had this problem in the past (but with a different SSI language) and came to the conclusion that the HTTP headers are missing details which makes the browser cache the page (eg. Last-Modified, Etag, Content-Length). Files which are built on the fly (eg. ASP, PHP) do not cache well as the file is always new. You maybe able to get around this by forging the HTTP headers your server sends but this can be a difficult task. A simple solution, which the www.optusnet.com.au website uses, is to break the large dynamic stylesheet up into smaller static ones and use the cascading ideal of the language to make your skin changes. A handy tool to check how well your site caches is at http://www.web-caching.com/cacheability.html I know this is way off topic for this list but I wanted to alert the many designers of this problem as it is a common mistake. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] My Style Switcher...
Sorry if the last part of that didn't make sense.
When it echos the default CSS to the browser - I just meant.
It is irrelivant what page you are on.
Becuase its global CSS...
This is what the CSS looks like in the PHP:
body
{
margin: 0;
padding: 0 0 150px 0;
background: #?=$BODY_COLOUR?
url(/styles/default_background_?=$BODY_STYLE?.gif) repeat;
color: #?=$BODY_TEXT?;
font-family: ?=$BODY_FONT?;
font-size: ?=$BODY_FONT_SIZE?;
text-align: center;
}
#cont
{
background-color: #?=$CONT_COLOUR?;
text-align: left;
width: ?=$CONT_WIDTH?;
?=$CONT_BORDER?
margin: ?=$CONT_MARGIN?;
}
#header
{
?=$HEAD_BORDER?
height: ?=$HEAD_HEIGHT?;
background: #?=$HEAD_COLOUR? ?=$HEAD_IMAGE? no-repeat;
color: #?=$HEAD_TEXT_COLOUR?;
}
#nav
{
padding: ?=$NAV_PADDING?;
width: ?=$NAV_WIDTH?;
?=$NAV_BORDER?
float: left;
margin: ?=$NAV_MARGIN?;
background-color: #?=$NAV_COLOUR?;
color: #?=$NAV_TEXT_COLOUR?;
}
below all that is the:
switch($PAGE)
case 'contact':
?
CONTACT PAGE CSS HERE etc...
?
break;
case 'resume':
?
RESUME CSS HERE etc...
?
Hope that helped explain it a bit more...
:)
Chris Stratford wrote:
*Hey WSG,*
I have just begun re-development of neester.com once again.
This time because my server switched Magic Quotes on... Which is good!
But all my old scripting had addslashes etc... and it just became
really dodgy etc...
It was a good excuse to redevelop it again.
If you goto www.neester.com you will see a grey page.
I have used my own styleswitcher which I think is very efficent and
well - its pretty cool how it all works.
I will explain it here now - and I will write an article when I am
finished with the site...
BTW I know I could of used Lorium Ipsum - but Google will get annoyed
and think its /latin/, happened before.
Ok.
What happens is, once you load the page - the PHP inside index.php
sets the stylesheet location in the HEADER to:
link rel=stylesheet href=/styles/d_index_default.css
title=Neester.Com | Default Style media=all type=text/css
See how the location is d_index_default.css
Well, that basically means, it loads the default stylesheet, for the
index page, with the colour: default...
If you click on a different style on the page, say Green...
that will then become:
link rel=stylesheet href=/styles/d_index_green.css
title=Neester.Com | Default Style media=all type=text/css
Each page also changes the link...
eg - if i had the contact page working.
The link inside that would be:
link rel=stylesheet href=/styles/d_contact_default.css
title=Neester.Com | Default Style media=all type=text/css
or if you are still using green
link rel=stylesheet href=/styles/d_contact_green.css
title=Neester.Com | Default Style media=all type=text/css
Now I dont actually have 100,000 stylesheets for all these.
I am using .htaccess to redirect these connections to a single PHP CSS
file...
I cant include the whole file here, but here is an algorithm of how it
works is below...
The PHP loads with about 100 variables (colours, margins, paddings,
background images, fonts etc...)
Then the PHP has a switch function - which deterimines WHICH colour
you are loading...
Then it resets some of the 100 variables - to suit that style...
THEN it echo's the DEFAULT styles to the browser...
Then it has another SWITCH, which it echo's only that PAGES RELEVANT
styles...
eg:
contact page would have:
#contact_form input,#contact_form select,#contact_form textarea
{
blah...
}
SOO
In effect.
The browser sees 4 stylesheets per page if you go through each of the
styles...
And it will cache them too - because they actually have a real path
(.htaccess just modifies it when it gets to the server)...
So it will run asif I have 100 stylesheets...
but in effect, i only have one!
adding those 4 styles has been a breeze.
I just added about 20 lines to each of the STYLES SWITCH function
points...
And yeah - because you only edit the styles you want to change.
The rest can stay default (margins for example...)
*If you are more interested, I can send you the PHP code for this.
I dont mind if other people use this method - I would like it if you
gave me credit.
but yeah.
I havent seen it used anywhere else - but then again - I didn't really
look.
if you have seen this method used somewhere else - please post some
links...
Cheers!
*Hope that wasnt too long...
And I hope it is easy to understand - and someone out there learnt
something they might use...
*
*--
Chris Stratford
[EMAIL PROTECTED]
http://www.neester.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Chris Stratford
[EMAIL PROTECTED]
http://www.neester.com
RE: [WSG] My Style Switcher...
I use a style switcher on my site although it works a bit differently.
$dxstyle = $_COOKIE[dxstyle];
$replace_strings = array(../ , ..\\ , /.., \\.., .); $dxstyle =
str_replace($replace_strings, , $dxstyle);
style type=text/css media=screen
?php echo @import url(;
if (file_exists(style.$dxstyle..css)) {
echo /style.$dxstyle..css;
}
else {
echo /style5.css;
}
echo );; ?
/style
Sorry if that is a bit hard to read. What happens is when you click on the style
changer you are set a cookie. The php code above reads which style you're using from
the cookie and loads the correct style. If no style is set it loads the default one.
In action here:
http://blog.dalegroup.net
(although all the other styles are dodgy :p)
Michael Dale
[EMAIL PROTECTED]
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] My Style Switcher...
Hey Michael,
Sorry my title is a little off - the post isn't so much about the cookie
and the style switcher.
But more about the PHP code being very efficent in presenting the CSS to
the browser.
So you only load the CSS you are using on that page...
And you have 1 file, for every page, and for every style
There are limitations, but not too many...
You can always work around them with extra variables...
:)
Thanks for the input though.
Cheers
Michael Dale wrote:
I use a style switcher on my site although it works a bit differently.
$dxstyle = $_COOKIE[dxstyle];
$replace_strings = array(../ , ..\\ , /.., \\.., .); $dxstyle =
str_replace($replace_strings, , $dxstyle);
style type=text/css media=screen
?php echo @import url(;
if (file_exists(style.$dxstyle..css)) {
echo /style.$dxstyle..css;
}
else {
echo /style5.css;
}
echo );; ?
/style
Sorry if that is a bit hard to read. What happens is when you click on the style
changer you are set a cookie. The php code above reads which style you're using from
the cookie and loads the correct style. If no style is set it loads the default one.
In action here:
http://blog.dalegroup.net
(although all the other styles are dodgy :p)
Michael Dale
[EMAIL PROTECTED]
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Chris Stratford
[EMAIL PROTECTED]
http://www.neester.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] My Style Switcher...
Sounds pretty cool.
I'm curious though, what's the file size of all that php in the css, as opposed
to actually handling 4 separate css files for color that can @import the main
body/text styles from a fifth master file?
It sounds really big and fancy, but for a style switcher I'm just wondering how
efficient all that work is?
Sorry if I sound negative, I don't mean to... I'm just not really a fan of style
switchers unless it has a distinct advantage of adjusting readability/usability
for the visitor.
Although, to your advantage, I love kick-ass php writing.
Anton
Quoting Chris Stratford [EMAIL PROTECTED]:
*Hey WSG,*
I have just begun re-development of neester.com once again.
This time because my server switched Magic Quotes on... Which is good!
But all my old scripting had addslashes etc... and it just became really
dodgy etc...
It was a good excuse to redevelop it again.
If you goto www.neester.com you will see a grey page.
I have used my own styleswitcher which I think is very efficent and well
- its pretty cool how it all works.
I will explain it here now - and I will write an article when I am
finished with the site...
BTW I know I could of used Lorium Ipsum - but Google will get annoyed
and think its /latin/, happened before.
Ok.
What happens is, once you load the page - the PHP inside index.php sets
the stylesheet location in the HEADER to:
link rel=stylesheet href=/styles/d_index_default.css
title=Neester.Com | Default Style media=all type=text/css
See how the location is d_index_default.css
Well, that basically means, it loads the default stylesheet, for the
index page, with the colour: default...
If you click on a different style on the page, say Green...
that will then become:
link rel=stylesheet href=/styles/d_index_green.css
title=Neester.Com | Default Style media=all type=text/css
Each page also changes the link...
eg - if i had the contact page working.
The link inside that would be:
link rel=stylesheet href=/styles/d_contact_default.css
title=Neester.Com | Default Style media=all type=text/css
or if you are still using green
link rel=stylesheet href=/styles/d_contact_green.css
title=Neester.Com | Default Style media=all type=text/css
Now I dont actually have 100,000 stylesheets for all these.
I am using .htaccess to redirect these connections to a single PHP CSS
file...
I cant include the whole file here, but here is an algorithm of how it
works is below...
The PHP loads with about 100 variables (colours, margins, paddings,
background images, fonts etc...)
Then the PHP has a switch function - which deterimines WHICH colour
you are loading...
Then it resets some of the 100 variables - to suit that style...
THEN it echo's the DEFAULT styles to the browser...
Then it has another SWITCH, which it echo's only that PAGES RELEVANT
styles...
eg:
contact page would have:
#contact_form input,#contact_form select,#contact_form textarea
{
blah...
}
SOO
In effect.
The browser sees 4 stylesheets per page if you go through each of the
styles...
And it will cache them too - because they actually have a real path
(.htaccess just modifies it when it gets to the server)...
So it will run asif I have 100 stylesheets...
but in effect, i only have one!
adding those 4 styles has been a breeze.
I just added about 20 lines to each of the STYLES SWITCH function points...
And yeah - because you only edit the styles you want to change.
The rest can stay default (margins for example...)
*If you are more interested, I can send you the PHP code for this.
I dont mind if other people use this method - I would like it if you
gave me credit.
but yeah.
I havent seen it used anywhere else - but then again - I didn't really look.
if you have seen this method used somewhere else - please post some links...
Cheers!
*Hope that wasnt too long...
And I hope it is easy to understand - and someone out there learnt
something they might use...
*
*--
Chris Stratford
[EMAIL PROTECTED]
http://www.neester.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
