Using a .php file as a stylesheet

[misson]

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]

If you see in the example I gave, I have 20 classes for possible values of height:

.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:

<?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:

<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

 

[aakbar9372]

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]

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]

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]

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]

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]

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.

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) {
            ...
        };
    }
}