PHP Tutorial #4 : Dynamic CSS with PHP

Stats Scanner · (#1 (**permalink**))

Grouping Browser Style Sheets

The first example I'd like to illustrate is using PHP to keep all the related styles together in one document. This way the directory won't grow cluttered with such files as styles-mozilla.css, styles-opera.css, styles-ie5.css and more.

Depending on the setup of your web server, the mime type of PHP output may be assigned text/html. However, the XHTML specification says style sheets are text/css. The first line of our script uses header() to send an HTTP header and set the correct mime type.

Code:

<?php

header("Content-Type: text/css");

?>

Next, the logic that detects the requesting browser and selects the appropriate style sheet would be moved into the style sheet script.

Code:

<?php

$browser = $_SERVER['HTTP_USER_AGENT'];

if (stristr($browser, "MSIE") ||

   stristr($browser, "Internet Explorer")) {

  // browser is Internet Explorer

} else

if (stristr($browser, "Opera")) {

  // browser is Opera

} else

if (stristr($browser, "Mozilla")) {

  // Mozilla browser not specified above so

  // default to NN or Mozilla

} else {

  // default catch-all

}

?>

Many browsers list Mozilla in their browser identification strings for historical reasons even though they aren't necessarily the Netscape or Mozilla browsers. For example, Internet Explorer might produce "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)." That's why the code first trys to scan out such browsers first. If it gets towards the end of the control structure and hasn't matched such strings as MSIE, Internet Explorer,Konqeror and the like then it assumes the browser probably is Netscape Navigator or Mozilla.

It's necessary to mention that the value returned by HTTP_USER_AGENT isn't 100% accurate since it's possible for users to change the string they send when requesting web pages. There's always the people with nothing better to do than spoof their user agent string, but I personally feel it's generally the more tech-savvy users who do this when the need arises (such as to gain access to a home banking site which only supports Netscape or Internet Explorer but works fine in any competent browser). I certainly don't think it's the majority of the Internet surfing community who does this.

Finally, the style directives can be added. They can be outputted using either the standard syntax for echo or print quoted statements, heredoc syntax or by terminating the PHP blocks followed by CSS since the logical flow of the script remains intact. The choice is a matter of preference, though I prefer terminating the code blocks; I don't have to escape special characters and it's cleaner than heredoc.

Here are the steps combined to produce a dynamic style sheet based on browser detection. Remember to save the script with a .php extension or however else your server may be configured so the server realizes it must be parsed! And yes, I know they're pathetic style examples but they illustrate the point.

Code:

<?php

header("Content-Type: text/css");



$browser = $_SERVER['HTTP_USER_AGENT'];

if (stristr($browser, "MSIE") ||

   stristr($browser, "Internet Explorer")) {

  // browser is Internet Explorer

?>



body { background-color: white; }

p { font-family: arial, sans, sans-serif;

   font-size: 10pt; font-color: blue; }



<?php

} else

if (stristr($browser, "Opera")) {

  // browser is Opera

?>



body { background-color: lightyellow; }

p { font-family: courier, monospaced;

   font-size: 10pt; font-color: darkgreen; }



<?php

} else

if (stristr($browser, "Mozilla")) {

  // Mozilla browser not specified above so

  // default to NN or Mozilla

?>



body { background-color: aliceblue; }

p { font-family: arial, sans, sans-serif;

   font-size: 12pt; font-color: darkblue; }



<?php

} else {

  // default catch-all

?>



body { background-color: white; }

p { font-family: arial, sans, sans-serif;

   font-size: 10pt; font-color: black; }



<?php

}

?>

The dynamic style sheet can then be called by an HTML document in the usual manner.

Code:

<link rel="stylesheet" href="styles-css.php"

 type="text/css" media="screen" />

Stats Scanner · (#2 (**permalink**))

Environment Aware Style Sheets

More than once I've run into situations where I wish style sheets supported simple arithmetic. Suppose I want my style sheet to set the height of a text div 100 pixels less than the viewport's height because of some graphical banner on the page. If I know I have a window of a specific size, I could do the math and hardcode the numbers by hand. However, that isn't always the case.

Previously I would have scrounged the web searching for some JavaScript code to detect the viewport's height and then made my modifications to readjust the element's properties once the page has loaded:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



<html>

 <head>

  <title>Sample HTML</title>

  <link rel="stylesheet" href="styles.css"

  type="text/css" media="screen" />

  <script language="JavaScript"

  type="text/javascript">

  <!--

  function sizeAdjustment() {

  var myHeight = 0;



  if (typeof(window.innerHeight) == 'number')

   // Non-IE

   myHeight = window.innerHeight;

  else if (document.documentElement &&

  document.documentElement.clientHeight)

   // IE

   myHeight =

   document.documentElement.clientHeight;



  document.getElementById('body').style.height =

  (myHeight - 100 + "px");

  }

  //-->

  </script>

 </head>

 <body onload="sizeAdjustment(); return true;">

  ...

 </body>

</html>

The resize of the body object degrades nicely in some browsers but causes serious display issues in others.

Instead, I could detect the browser's viewing area and append the values to the URL when calling the stylesheet.

Code:

<html>

 <head>

  <title>Sample HTML</title>

  <link rel="stylesheet" href="styles.css"

  type="text/css" media="screen" />

  <script language="JavaScript"

  type="text/javascript">

  <!--

  var myHeight = 0;



  if (typeof(window.innerHeight) == 'number')

   // Non-IE

   myHeight = window.innerHeight;

  else if (document.documentElement &&

  document.documentElement.clientHeight)

   // IE

   myHeight =

   document.documentElement.clientHeight;



  myHeight = myHeight - 100;



  document.write('<link rel="stylesheet" ',

  'type="text/css" href="styles-css.php?height=',

  myHeight, '" />');



  //--

  </script>

 </head>

 <body>

  ...

 </body>

</html>

The JavaScript calculates the height and constructs a link to the style sheet which passes along the value. The style sheet can read the incoming values and adjust itself before being sent to the browser.

Code:

<?php

header("Content-Type: text/css");

echo "body { height: $_GET[height]; }";

?>

blackops · (#3 (**permalink**))