


Server-side generated CSS is one of many techniques that can be used to generate CSS on-the-fly. This gives the developer the option to include different features of server-side languages, such as PHP, including variables, functions and more. As a matter of fact, this website uses some server-side generated CSS which is shared with others.
There are two sides to web development in general - client-side (front-end) and server-side (back-end). Server-side always comes first in the generation of pages, with client-side running when the browser receives the page and it's associated files.
CSS is a client-side language as it is interpreted by the user's browser. PHP is a server-side language as it is interpreted by the server's PHP interpreter.
This particular article talks about using PHP to generate a CSS file.
In a new file, style.php, the following PHP code is required:
<?php header("Content-Type: text/css"); $contents = "html{background:green}"; echo $contents; ?>
To make it easier to generate the variables and so on in the PHP, it is a good idea to create a text file with placeholders for variables:
#main { background: /MAIN_BACKGROUND/; } div.el { color: /MAIN_COLOUR/; font-weight: /FONT_WEIGHT/; }
Now using some PHP tricks, the placeholders are replaced:
<?php header("Content-Type: text/css"); $contents = file_get_contents("placeholders.txt"); $contents = str_replace("/MAIN_BACKGROUND/", "#f00"); $contents = str_replace("/MAIN_COLOUR/", "#000"); $contents = str_replace("/FONT_WEIGHT/", "500"); echo $contents; ?>
On the basis that this PHP file is called style.php and is located in the root directory of the website, the following is all that is needed in order to use this file as CSS:
<link rel="stylesheet" type="text/css" href="style.php">
![]() | Happy New Year everyone! #2021NewYear 25 days ago |
![]() | Happy New Year everyone! All the best, Jamie Balfour. 25 days ago |
![]() | Retweet @PCMag: Adobe Flash support officially ends today. https://t.co/NNLcFK2yPx ![]() 25 days ago |