 |
 |
|
|
|
|
Creating Dynamic CSS Files in PHP2008-02-10 Talk to anybody in web design and they will tell you that by far, CSS is by far the best way to manipulate the look and feel of a web page. However, when building a complicated web site development with many pages, using just one CSS file tends to add a lot of additional size to each page as the CSS file grows. This makes editing a bit confusing and in addition, there are still several effects that cannot be made in CSS without resorting to Javascript for the implementation. Not to mention that a lot of CSS will be irrelevant to all the pages it is loaded on. These issues can be solved in one fell swoop simply by creating a CSS file in PHP. Using PHP, we can include only the CSS that we need on each page, we can replace Javascript and inline CSS, and we can compress the CSS to make it load faster. This will make our web development much quicker and the site more efficent. The first thing we'll do is create three new files, namely css.php, index.php, and page2.php. These files will be very primitive to illustrate the technique, but afterwards, we'll discuss some more advanced web development ideas based on the core method. Let's turn our attention back to the actual files. Obviously css.php will be our CSS file. In it, we'll use conditional statements to separate CSS relevant to only one file to reduce load. In addition, we'll utilize some compression in order to reduce the size of the file, while index.php will be our main page, and page2.php will help us illustrate some points. In the index.php file we'll place some sample content and a link to our final file, page2.php. The goal of these two files is to simply provide a demo for the concepts we'll use in css.php. Let's start editing index.php by using this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> We'll make page2.php almost identical, except we'll replace the entire unique2index DIV and replace it with this code:<html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title>Using PHP and CSS together</title> <?PHP include('./css.php'); ?> </head> <body> <div class="common"> <p>This DIV, with the class "common" is used in both in index.php and <a href="./page2.php?ispage=yes">page2.php</a></p> </div> <div id="unique2index"> <p>This DIV, with the id "unique2index" is only displayed in index.php</p> </div> </body> </html> <div id="unique2page2"> The only other difference is that we'll replace line 12 in page2.php with this:<p>This DIV, with the id "unique2page2" is only displayed in page2.php</p> </div> <p>This DIV, with the class "common" is used in both in <a href="./index.php">index.php</a> and page2.php</p> As you can see from the code, both index.php and page2.php do very basic things common to web site development, starting with declaring the doctype and a standard head. Notice that the two different DIVs in each file will be used to illustrate conditional statements to exclude superfluous CSS code that is not applicable to the current document. Take special note of the variable ispage.The sixth line in both index.php and page2.php: <?PHP include('./css.php'); ?> tells PHP to include our CSS file which we haven't built yet. However, because we used the PHP function include instead of require, these files should still run now and only trigger warnings. Before we do that though, let's code our css.php file with the following code:<?PHP error_reporting(0); ?> The first line tells PHP to suppress error warnings. Line 3 use the style tag to signify that we're now coding in CSS. Then, on line 17:<style type= "text/css " media= "all"> html, body { background:#CCCCCC; } .common p { font-family:Verdana,Ariel,Times New Roman; font-size:11pt; color:#000000; padding: 5px 10px 5px 10px; border:1px solid #AAAAAA; } <?PHP if($_GET['ispage']!='yes') { ?> #unique2index { font-variant:small-caps; } <?PHP } else { ?> #unique2page2 { font-weight:bold; } <?PHP } ?> </style> <?PHP if($_GET['ispage']!='yes') { ?> This conditional code checks to see whether or not you are page2.php or index.php. If you are viewing index.php then only the CSS directly below this line and before the else statement is executed, otherwise, the CSS for #unique2page2 is displayed instead. Of course, the class common is used on both pages of our web design, and represents core CSS code intended for the entire site.This is a very basic example of incorporating PHP with CSS in web development, but now let's talk about specific situations where this will not only save you time in coding, but also decrease your visitor's page loading times significantly. With the basic theory down, it's easy to see how this come in handy. For example, let's say you want one color scheme when users are logged in, and one slight variation for guests or visitors. Using the technique we just learned, we can easily implement this by using our existing user management system directly with our CSS code using conditional statements. In addition, we can now have one central CSS file that contains all our CSS for the entire site, instead of individually importing specific style sheets into certain documents. Another great idea is to allow your registered users full control of their own colors through CSS. Since you can easily pull MySQL data through PHP, it wouldn't be very difficult to allow users to pick a custom color scheme, save it to MySQL, and then dynamically load their CSS using PHP on each page load. The possibilities are endless, and is only limited by your web development skill. Of course, parsing PHP will take more resources than a standard CSS file, but it can also provide compression which will make your site load quicker for your visitors, especially if you have a very large CSS file. To do that, simply paste this code at the top of css.php: <?PHP This will attempt to use gzip compression if it is supported.error_reporting(0); if (strstr($HTTP_SERVER_VARS['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler"); // Compress the HTML header("Content-Encoding: gzip"); } ?> And then paste this code directly at the bottom of css.php: <?PHP if (strstr($HTTP_SERVER_VARS['HTTP_ACCEPT_ENCODING'], 'gzip')) { echo '<!-- gzip successful -->'; ob_end_flush(); // Output the uncompressed HTML } ?> Well, with the basic technique laid out, and some more advanced ideas presented, it's about time to wrap this web development tutorial up. Have fun!  View other articles in the Web Development category.View other articles in the PHP sub-category. |
Privacy Policy | Terms & Conditions | Terms Of Service | Sitemap