Build Your Site With Dynamic CSS

view full story

http://fwebde.com – Changes to the style of the CSS of a website can be done very easily, with the magic of JavaScript. However, JavaScript can be disabled, so it should be avoided for important things. The solution would be to use a server-side language, like PHP, to make it possible to create dynamic CSS files without having to resort to using JavaScript. Finally you can use dynamic CSS that works in all browser configurations. First we will take a look at how this will work, and then we will go straight into two examples. We'll put together a simple grid-based generated by certain variables, and then we will create a script to modify the CSS based on the time of day. How It Works There are two crucial parts to ensuring that your dynamic CSS file works correctly. Make sure that your dynamic CSS filename ends with a .php extension. Insert the following line at the top of your CSS file, right after <?php header('content-type: text/css'); This tells the browser to use the output of the script like if it was CSS, instead of the default HTML. For this example we will call our dynamic CSS file css.php. Let's start out with something simple. In the file referencing our dynamic stylesheet, add the following line of HTML in the head section, like you would do with a normal CSS file. <link rel="stylesheet" href="css.php" type="text/css" media="screen" /> Now let's get started with some simple PHP! <?php header('content-type: text/css');   $contentWidth = 500; $bgColour = '#C0FFEE'; $textColour = '#DECAFF'; ?> Here we've set some variables that will hold the values for the width of our content section, the background colour, and the text colour. That's great, but how do we integrate that with our CSS? body { background: <?php echo $bgColor; ?>; color: <?php echo $textColour; ?>; }   #content { width: <?php echo $contentWidth; ?>px; } As you can see, we simply echo out the values where we need them, appending any units if needed. Let's look at slightly more advanced example. #content { width: <?php echo $contentWidth * $contentHeight + 2; ?>px; height: <?php echo $contentHeight; ?>px; } Here you can see that we can do things such as making the width of the content box the value of $contentWidth times the height of the box plus two. Now let's take a look at some more examples. Your Own Grid Layout You can use these techniques for dynamic CSS to make an easy-to-manage grid-based layout, with each column automatically resizing with the change of one value. Let's get started, shall we? <?php // Tell the browser that this is supposed to be CSS header('content-type: text/css');   $mainWidth = 1000; $spacing = 20;   $mainBg = '#FF0000'; $sidebar1bg = '#0000FF'; $contentBg = '#00FF00'; $sidebar2bg = '#C0FFEE';   $sidebar1width = ($mainWidth - ($spacing * 2)) * 0.2; $sidebar2width = ($mainWidth - ($spacing * 2)) * 0.2; $contentWidth = ($mainWidth - ($spacing * 2)) * 0.6;   ?> These are the variables for a simple three-column layout. The content area takes up 60% of the width, and each sidebar 20%. The spacing in between each column is set and included in each calculation. And now for the CSS part: #wrapper { width: <?php echo $mainWidth; ?>px; background: <?php echo $mainBg; ?>; overflow: hidden; }   #sidebar1 { width: <?php echo $sidebar2width; ?>px; margin-right: <?php echo $spacing; ?>px; float: left; background: <?php echo $sidebar1bg; ?>; }   #content { width: <?php echo $contentWidth; ?>px; margin-right: <?php echo $spacing; ?>px; float: left; border: 1px solid #000 inside; background: <?php echo $contentBg; ?>; }   #sidebar2 { width: <?php echo $sidebar2width; ?>px; float: left; background: <?php echo $sidebar1bg; ?>; } So try that out, and try changing the values of $mainWidth and $spacing, to see what happens, and to make sure that there are no bugs. Time-Sensitive CSS And now for a completely different example? How about having different styles for different times of day? That is made easy using PHP with CSS, and with PHP's built-in date/time functions. <?php header('content-type: text/css');   date_default_timezone_set("America/Vancouver"); $now = date('G');   if ($now < 12) { $bg = '#FFFFFF'; } else { $bg = '#000000'; } ?>   body { background: <?php echo $bg; ?>; } In this very simple example, we first set the default timezone. And then we use the date() function to return the current hour, in a 24-hour format. If it is before 12:00, the background colour is set to white. If it is currently 12:00 or later in the day, a black background is displayed. Couldn't get any simpler than that! There are so many different possible applications for dynamic CSS. Can you think of any other ways to use this? (Distributions)