Home arrow Style Sheets arrow Page 5 - 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 - Using Server Side Scripting Languages
(Page 5 of 7 )

Server side languages, such as PHP, JSP, ASP, ASPX, Cold Fusion, ModPerl, Perl, JSP and so forth, come with the ability to send the header information of the current document. Furthermore, they feature everything we need –- Variables, Constants, Loops, Conditions and Objects.

To tell, for example, a PHP script to send its output as CSS to the browser, we use the following two lines of code:

header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

The first line defines the content as CSS, a style sheet. The second sets the expiry date of the document to the current time and a bit; that way, the output of the script will still be cached by the browser. Without this line, the CSS would never be cached, which can be a performance problem depending on the size of the resulting style sheet document.

You can create anything with the right header information: Javascript, images, PDFs, Excel Sheets, Flash files, you name it. Header can also help us to trigger the download of files rather than the display of them in the browser.

The only important thing is that the header output has to be the first output of the script. Any output before that –- including whitespace -– will cause an error.

Content types can only be set once; you cannot put out Javascript and later on CSS (unless you write them out inline) in one script.

Harnessing the power of the header function, we now have the whole specification of our server side language at our disposal. We can define and reuse variables, change them according to parameters sent to the page, automatically set them according to the location on the server and so on.

Our above example in PHP would be:

<?php
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 
/* Company Colours */ 
$blue=’#369’;
$green=’#363’;
$lgreen=’#cfc’;
?>
 
ul#navigation{
        background:
<?php echo $blue;?>;
        color:#fff;
}
h1{
        border-bottom:1px solid 
<?php echo $green;?>;
}

If the PHP setup allows for shortcut notation we could also use:

 
<?php
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 
/* Company Colours */ 
$blue=’#369’;
$green=’#363’;
$lgreen=’#cfc’;
?>
 
ul#navigation{
        background:
<?=$blue;?>;
        color:#fff;
}
h1{
        border-bottom:1px solid 
<?=$green;?>;
}

Another way is to use the print command to output until a certain label is reached; this one does mess with the color coding of some editors and might be –- depending on the size of the CSS –- straining the processor:

<?php
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 
/* Company Colours */ 
$blue='#369';
$green='#363';
$lgreen='#cfc';
 
print <<<ENDCSS
ul#navigation{
        background:
$blue;
        color:#fff;
}
h1{
        border-bottom:1px solid 
$green;
}
ENDCSS;
?>


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