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...
Hey Anton,
Well the issue isn't really the size of the PHP.
It's the size of the browser output.
Because the browser will cache the CSS...
But the PHP file is 6kb...
And its 90% CSS, and just a few PHP switches and variables.
I dont like style switchers too much either.
This really is a style creator/switcher.
The main reason I did it is - proof of concept - and to try something new.
It just makes styling 100* easier and faster.
because every new style I add.
Is just based on editing the default.
EG - a serif style, and a sans-serif style.
Would simply be 1 line extra in the stylesheet.php file...
Because if just needs to change the variable for the BODY_FONTS
But a more complex style sheet switch - like a fixed switch to fluid
layout... that would be hard.
And at the moment it isn't setup to handle that.
But things like - moving the navigation to the left/right etc...
It works great.
The MAIN reason I did this was.
I have always wanted more than 1 stylesheet.
BUT...
I HAT creating new ones.
Becuase as soon as I make a new page.
I need to edit 10 stylesheet pages to add the new styles that may be
needd for that page (if there is something new on them)...
This way.
I just add the new style to the Default stylesheet.
And edit how it displays in the other stylesheets by just tweaking the
variables.
*Thanks for the input!*
Anton wrote:
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 oth
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
**
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);
if (file_exists("style".$dxstyle.".css")) { echo "/style".$dxstyle.".css";
}
else { echo "/style5.css";
}
echo ");"; ?>
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...
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);
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...
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: #
url(/styles/default_background_.gif) repeat;
color: #;
font-family: ;
font-size: ;
text-align: center;
}
#cont
{
background-color: #;
text-align: left;
width: ;
margin: ;
}
#header
{
height: ;
background: # no-repeat;
color: #;
}
#nav
{
padding: ;
width: ;
float: left;
margin: ;
background-color: #;
color: #;
}
below all that is the:
switch($PAGE)
case 'contact':
?>
<<>> etc...
<<>> 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
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
