Home arrow Style Sheets arrow Page 6 - CSS Constants
STYLE SHEETS

CSS Constants


One feature designers often wished they had with style sheets are constants - the chance to define something once and reuse it over and over in the style sheet document. This article shows some techniques for how to achieve that and discusses their pros and cons.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
May 09, 2005
TABLE OF CONTENTS:
  1. · CSS Constants
  2. · The CSS standard compliant approach
  3. · Using ID Selectors and Descendent Selectors
  4. · Moving server side
  5. · Using Server Side Scripting Languages
  6. · More examples
  7. · Parsing CSS with PHP

print this article
SEARCH DEVARTICLES

CSS Constants - More examples
(Page 6 of 7 )

There is no end to the usefulness of this approach. We can reuse cookie data or grab selector names from a database or a parsed document. We could allow an XML notation for the CSS and turn it into valid CSS on the fly.

An example of how to use parameters sent to the page could be to allow visitors to define a width of the content:

 
<?php
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 
 
// grab the parameter w and set the variable w to its value
// if the parameter is not an integer, set w to 740
$w=740;
if(isset($_GET['w']))
{
        $w=preg_match('/(\D)/',$_GET['w'])?$w:$_GET['w'];
}
/* Company Colours */ 
$blue='#369';
$green='#363';
$lgreen='#cfc';
?>
#boundary{
        width:<?php echo $w;?>px;
}
 
ul#navigation{
        background:<?php echo $blue;?>;
        color:#fff;
}
h1{
        border-bottom:1px solid <?php echo $green;?>;
}

Or we can apply different color schemes according to the section:

<?php
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 
$self=$_SERVER['PHP_SELF'];
/* Colour schemes */ 
if (preg_match('/aboutus/',$self))
{
// About us
        $colour1='#369';
        $colour2='#69c';
        $colour3='#9cf';
} 
 
else if (preg_match('/clients/',$self))
{
// Clients
        $colour1='#963';
        $colour2='#c96';
        $colour3='#fc9';
}
else if (preg_match('/downloads/',$self))
{
// Downloads
        $colour1='#693';
        $colour2='#9c6';
        $colour3='#cf9';
}
?>
ul#navigation{
        background:
<?php echo $colour1;?>;
        color:#fff;
}
h1{
        border-bottom:1px solid 
<?php echo $colour3;?>;
        color:
<?php echo $colour2;?>;
}

Each of these examples requires the maintainer of the site to know about PHP, and may give her the chance to break it or add unsafe code. If we want to ensure that we have something like CSS constants with a less steep learning curve and less power to the maintainer, we can parse a CSS file with PHP.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials