Using a .php file as a stylesheet

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
you should know that the source code of html pages are cached while .php pages are not. So, the browser is programmed to handle some extensions differently.
Nope. IE once used extensions to determine content type (newer versions should be correcting this), and other browsers might as a fallback in case there is no Content-type header, but other than that file extensions don't matter. The only thing that should affect caching are HTTP headers.
 

callumacrae

not alex mac
Community Support
Messages
5,257
Reaction score
97
Points
48
If you see in the example I gave, I have 20 classes for possible values of height:

Code:
.h0 {height: 0px;}
.h5 {height: 50px;}
.h10 {height: 100px;}
.h15 {height: 150px;}
.h20 {height: 200px;}
.h25 {height: 250px;}
.h30 {height: 300px;}
.h35 {height: 350px;}
.h40 {height: 400px;}
.h45 {height: 450px;}
.h50 {height: 500px;}
.h55 {height: 550px;}
.h60 {height: 600px;}
.h65 {height: 650px;}
.h70 {height: 700px;}
.h75 {height: 750px;}
.h80 {height: 800px;}
.h85 {height: 850px;}
.h90 {height: 900px;}
.h95 {height: 950px;}
.h100 {height: 1000px}

That can be a lot easier to manage and work with, if you use a php for loop:

Code:
<?php
  foreach (range(0,100,5) as $id)
  { 
      echo (".h" . $id . " {height: " . 10*$id . "px;}\n");
  }
?>

Or, you can send values around through the address of the .php stylesheet. I made a page with randomly a randomly generated color (http://wsup.tk - under construction), and the reference to the css has the color in it. If the generated color is, say, #44dd88, the css reference would be:

Code:
<link rel="stylesheet" type="text/css" href="style.php?col=4d8">

And there are a whole other list of things you could posibly do. off the top of my head, you could probably send screen width values using javascript and the GET method.

That's very inefficient - generate it, then copy and paste it into a css file. Using PHP will use server resources that could be avoided by simply using static CSS.

Also re the random colour: The browser will cache the css anyway, so it wont be random. You'll either have to force the browser to redownload the css every time (extremely inefficient) or just put it in the html.

~Callum
 
Last edited:

aakbar9372

New Member
Messages
6
Reaction score
0
Points
0
Nope. IE once used extensions to determine content type (newer versions should be correcting this), and other browsers might as a fallback in case there is no Content-type header, but other than that file extensions don't matter. The only thing that should affect caching are HTTP headers.
agreed, I'm using firefox on ubuntu, every HTML pages (even URL rewritten) that do not contain caching HTTP headers is cached (such as this forum page)
 

shant93

Member
Messages
119
Reaction score
0
Points
16
That's very inefficient - generate it, then copy and paste it into a css file. Using PHP will use server resources that could be avoided by simply using static CSS.

Also re the random colour: The browser will cache the css anyway, so it wont be random. You'll either have to force the browser to redownload the css every time (extremely inefficient) or just put it in the html.

~Callum

For the generating, I agree that the generated stylesheet should not be generated every time, and for the custom color, that may explain why the same colors keep recurring, but how else am I supposed to have a random color without doubling the size of the index page with a style tag?
 

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
Use Javascript to set the colour on page load; this offloads the work to the client and means your CSS can be a static file.
You'll need to have a fallback colour set in your CSS that the script will use if the user doesn't have Javascript enabled though.
 

shant93

Member
Messages
119
Reaction score
0
Points
16
How does JavaScript set the color without using PHP?
(and without using at least 30 document.getElementbyId().style.color and document.getElementbyId().style.background-color)
 

callumacrae

not alex mac
Community Support
Messages
5,257
Reaction score
97
Points
48
It would be easier to get PHP to generate a colour and send it in a style tag in the header. This way, it won't be cached :)

~Callum
 

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
How does JavaScript set the color without using PHP?
(and without using at least 30 document.getElementbyId().style.color and document.getElementbyId().style.background-color)
Either set the colors on an ancestor element and rely on the cascade, or use a class. In all modern browsers, you can access style sheets via document.styleSheets and add rules (though the method differs between IE and other browsers). You can add support for DOM methods to IE, or you can use MDC's example cross-browser function to add stylesheet rules.

Code:
if (document.styleSheets && document.styleSheets.length && ! document.styleSheets[0].insertRule) {
    if (document.styleSheets[0].addRule) {
        document.styleSheets[0].constructor.prototype.insertRule = function(ruleset, idx) {
            // not a perfect parsing, but will do for the most part.
            var pieces = ruleset.match(/^\s*([^{]*){(.*)}\s*$/);
            if (pieces) {
                var selector = pieces[1], 
                      rules = pieces[2];
                this.addRule(selector, rules, idx);
            }
        };
        document.styleSheets[0].constructor.prototype.deleteRule = function(idx) {
            return this.removeRule(idx);
        };
    } else {
        // TODO: support unusual browsers
        document.styleSheets[0].constructor.prototype.insertRule = function(ruleset) {
            ...
        };
        document.styleSheets[0].constructor.prototype.deleteRule = function(idx) {
            ...
        };
    }
}
 
Last edited:
Top