Executing PHP in CSS Files

In order to parse and execute PHP in a CSS file, all you have to do is tell Apache to treat CSS files as PHP, and just make sure you tell the browser that it’s NOT text/html (default mime type) but CSS.Very easy.

.htaccess File

Place a .htaccess file in the directory of the CSS file (if there isn’t one already). Simply add a directive to process the PHP in CSS files. Depending on your configuration, you might have to use a different directive. Here are the two most common ones I’ve been able to use:
Mod_PHP (Apache PHP Module)

#MOD PHP

	SetHandler application/x-httpd-php

Others:

#OTHERS
AddType application/x-httpd-php5 .css

(If you’re using php4, use x-httpd-php4)

CSS (and PHP) File

I recommend using this code just to test that your Apache directive is working. Hopefully this example shows the potential use for (server-side) executable code in CSS files.

<?php
	//make sure the browser treats this as CSS
	header("Content-Type: text/css");
 
	//browser detection
	if (strpos($_SERVER['HTTP_USER_AGENT'],"Internet Explorer") > 0) {
		$internet_explorer = true;
	}
 
	$baseColour = "#F3AA9C";
	$secondaryColour = "#CCAF1F";
	$foregroundColour = "#FFFFFF";
	$moduleWidth = "125px";
?>
 
#content {
	background:<?php echo $baseColour; ?>;
	colour:<?php echo $foregroundColour ?>;
}
 
#sideBar {
	background: <?php echo $secondaryColour; ?>;
	color:<?php echo $baseColour; ?>;
	width:<?php echo $moduleWidth; ?>;
}
 
#footer {
	color: <?php echo $secondaryColour; ?>;
	background:<?php echo $foregroundColour; ?>;
}

Obviously mixing PHP and CSS stuffs up syntax highlighting sorry.

Caveat

Most browsers will download the CSS file on every pageload – it’s not too difficult to implement cache-control, but I haven’t done it for this code.

Related Posts:

• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Choose MySpace Comment Colors, Fonts and Sizes
• PNGs Have Different Colours in Different Browsers?
• Introducing the Lovely Caption Maker
• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• Extract GET Variables from URL String to Array – PHP Function

<a href="/">Home</a> |
<a href="/about/">About</a> |
<a href="/contact/">Contact</a>

I guess it’s OK to do that, but it’s not really great practice because the pipes ( | ) are not actually part of the content and are only meant for presentation, so they shouldn’t really be part of the HTML. Another problem with this is that it’s inflexible. What if we want more space between the pipes and the links? Do we enter a bunch of “ ”s? That’s ugly^.

We can use the CSS border property to add the separators for us by adding a left-border to each of the links.

“But what about the first link?“

The answer is the :first-child CSS pseudo-selector. It allows us to define CSS properties to the first element of its kind within a container. So in this instance, we can apply no border to the first child. Here’s how the lot would look:

<ul id="footer">
	<li><a href="/">Home</a></li>
	<li><a href="/about/">About</a></li>
	<li><a href="/contact/">Contact</a></li>
</ul>

ul#footer li {
    display:inline; /* so they display horizontally */
    border-left:1px solid #000000; /* our 'pipe' */
    padding-left:1em;
    padding-right:1em;
}
 
/* here it is, the first-child pseudo-selector */
ul#footer li:first-child {
    border:none; /* no 'pipe' before the first element */
}

It requires a bit more coding initially but it’s more elegant because it separates concerns and it’s also more accessible for screen readers and our friendly neighbourhood search engines*.

^ I know, this very site doesn’t follow this site doesn’t follow these practices. I’m a hypocrite!
* FACT

Related Posts:

• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Introducing the Lovely Caption Maker
• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• PNGs Have Different Colours in Different Browsers?
• Clean URLs Using Apache’s mod_rewrite and PHP – Beginner’s Tutorial

Have you ever been working on a website and noticed that in certain browsers a background image isn’t blending properly with one of your background colours or another image? This phenomenon occurs in Internet Explorer and it’s caused by metadata in the PNG file itself. There’s a great program that solves this problem without any hacks.

The problem? Gamma. Some programs (like Adobe ImageReady) export PNGs with Gamma metadata. While I’m sure this metadata could be useful, it causes colour inconsistencies in Internet Explorer (6 and 7 confirmed.)

Solution – TweakPNG. Download this Windows program – consistent PNGs are X steps away:

1. Open TweakPNG
2. Load the problem PNG into TweakPNG (Either drag and drop or File > Open)
3. In the list of “Chunk”s, select “gAMA” and press the delete key.
4. Save (Ctrl+S or File > Save)

Done.

Related Posts:

• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• Making Your Site Stand Out With Favicons
• Nicer Footer Navigation with pseudo-selectors
• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Introducing the Lovely Caption Maker

Unfortunately, this effect can’t be achieved without knowing and entering the width and height of an image – making it kind of tedious to implement. After deciding that I’d like to use it with wordpress posts, it was decided that a tool should be built. And then The Lovely Caption Maker was born. Here’s an example of Lovely Caption Maker’s glory:

This Is How We Party

Expressing ourselves on the last day of year twelve in 2006. Very sexy stuff.

Related Posts:

• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• Nicer Footer Navigation with pseudo-selectors
• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• XHTML and HTML5 Compliant Flash – Stop Using Embed and Invalid XHTML/HTML5
• PNGs Have Different Colours in Different Browsers?