programming css

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
bertsmilsky
Forum Newbie
Posts: 13
Joined: Fri Jul 18, 2008 10:23 am

programming css

Post by bertsmilsky »

i am trying to find a good way to program css. so far i have discovered that you can user javascript to product page widths and add it onto the end of the css link:

Code: Select all

<script language='javascript'> 
document.write('<link type="text/css" rel="stylesheet" href="/css/styles.php?width='+screen.width+'" />');
</script>
Then in /css/styles.php you can print a css header and put the page width get variable into a variable, then print all the css on the php file. Is there a way to do this on a normal .css file; so that i can use the css tools in dreamweaver for example? what is the best way to program css using php (or any other language)?

thanks
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: programming css

Post by alex.barylski »

Instead of using PHP inside the CSS file (the <?php tags will muck up with dreamweaver or any WYSUWYG probably) I would use placeholders and just strip them out with PHP...

Code: Select all

body, html {  width: #WIDTH;  height: 100%   text-align: center;}
Then maybe use .htaccess to cleanly pass the CSS request to a PHP proxy script which would then strip out the placeholder and replace them with values passed either as constants or GPC data.

Code: Select all

<link href="styles.css?width=600px" />

Code: Select all

RewriteEngine on
RewriteRule ^([a-z]+)\.css$ proxy.php?file=$1 [QSA]
I dought the above .htaccess will work but basically the idea is to organize your CSS files in a separate directory:

styles.css
theme.css
test.css
proxy.php

proxy.php might then look something like:

Code: Select all

<?php
  define('MAX_WIDTH', '600px'); // This might be a constant or GPC such as above $_GET['width']
 
  $buff = file_get_contents($_GET['file']);
  $buff = str_replace('#WIDTH', MAX_WIDTH, $buff);
 
  echo $buff; // Send complete CSS for rendering
 
I would do it this way to avoid any actual PHP code being evaluated inside your CSS file...unless it's absoluetly required.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: programming css

Post by omniuni »

I think something that might help is to remember that CSS is CASCADING; in other words, create a regular CSS file with all your styles in it, then, use PHP to just echo in any modifications. The new CSS will over-write the original CSS.

In other words, if you have body{background-color: blue;} and later declare body{background-color: red;} the background color will be red, and this should be 100% OK in terms of how CSS is meant to be used.

Good Luck,
OmniUni
bertsmilsky
Forum Newbie
Posts: 13
Joined: Fri Jul 18, 2008 10:23 am

Re: programming css

Post by bertsmilsky »

thanks for the comments, problem solved
Post Reply