Miscellaneous

  Home arrow Miscellaneous arrow Page 2 - Dynamic CSS with PHP
MISCELLANEOUS

Dynamic CSS with PHP
By: bluephoenix
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 57
    2004-06-23

    Table of Contents:
  • Dynamic CSS with PHP
  • Grouping Browser Style Sheets
  • Environment Aware Style Sheets
  • Conclusion

  •  
     

    SEARCH CODEWALKERS

    TOOLS YOU CAN USE

    advertisement

    Dynamic CSS with PHP - Grouping Browser Style Sheets


    (Page 2 of 4 )

    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 the header function to send an HTTP header and set the correct mime type.

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

    <?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 tries 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.

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

    $browser $_SERVER['HTTP_USER_AGENT'];
    if (
    stristr($browser"MSIE") || stristr($browser"Internet Explorer")) {
      
    /* browser is Internet Explorer */
    ?&gt;

    body {background-colorwhite; }
    {font-familyarialsanssans-serif;
       
    font-size10pt
       
    font-colorblue; }

    &
    lt;?php
      
    } else
      if (
    stristr($browser"Opera")) {
        
    /* browser is Opera */
    ?&gt;

    body {background-colorlightyellow; }
    {font-familycouriermonospaced;
       
    font-size10pt;
       
    font-colordarkgreen; }

    &
    lt;?php
      
    } else
      if (
    stristr($browser"Mozilla")) {
        
    /* Mozilla browser not specified above so default to NN or Mozilla */
    ?&gt;

    body {background-coloraliceblue; }
    {font-familyarialsanssans-serif;
       
    font-size12pt;
       
    font-colordarkblue; }

    &
    lt;?php
      
    } else {
        
    /* default catch-all */
    ?&gt;

    body {background-colorwhite; }
    {font-familyarialsanssans-serif;
       
    font-size10pt;
       
    font-colorblack; }

    &
    lt;?php
    }
    ?>

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

    &lt;link rel="stylesheet" href="styles-css.php"
      type="text/css" /&gt;

    More Miscellaneous Articles
    More By bluephoenix

    blog comments powered by Disqus

    MISCELLANEOUS ARTICLES

    - Oracle Database XE: Indexes and Sequences
    - Modifying Tables in Oracle Database XE
    - Oracle Database XE: Tables and Constraints
    - More on Oracle Databases and Datatypes
    - Oracle Database XE Datatypes: Datetime and L...
    - Oracle Database XE Datatypes: Character and ...
    - From Databases to Datatypes
    - Firefox 3.6.6 Released with Improved Plug-in...
    - Attention Bloggers: WordPress 3.0 Now Releas...
    - Reflection in PHP 5
    - Inheritance and Other Advanced OOP Features
    - Advanced OOP Features
    - Linux from Scratch V.6.6 Review
    - Linux Gaining in Strength
    - Install Slackware on Your Old PC


    © 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap