Skip to main content

Using OO PHP in CSS



tl;dr - I'd like to know if it is possible to pass an object into a PHP file with CSS headers, such that I can use this object to manipulate various CSS attributes.





What I'm attempting to do, is allow my PHP/CSS file to interact with the other objects/php files in the webpage, e.g. menu item objects. My ultimate goal is to use PHP in the CSS file to count the number of menu items, and apply the appropriate width value in order to space them out evenly on the page.





I use a very simple color based example below to demonstrate my understanding so far...





I understand that for basic usage of PHP in a CSS file, one can do something like:







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

$dkgreen = '#008400';

body {

background:<?=$white?>;

}

?>







I also understand that OO PHP can be used to achieve a similar thing, e.g.:







class css {



function __construct($args=array()) {

foreach($args as $key => $field) {

$this->{"$key"} = $args["$key"];

}

return $this;

}

}



$css = new css(

array(

bgcolor => '#00FF00',

fgcolor => '#000000',

)

);



body {

background: <?php echo $css->bgcolor; ?>;

color: <?php echo $css->fgcolor; ?>;

}







Results of experimentation





1) OO style





I firstly attempted to make my css class create a singleton object for the CSS, which I tried to retrieve using $css = css::singleton() , along with the getCss() function, instead of $css = new css(...) . The idea was that I wouldn't simply initialise another css object which would be useless to me. Attempts to get the values for bgcolor and fgcolor using:







$css = css::singleton();

$css->getCss()->bgcolor;







were unsuccessful.





2) altering the href in the link tag à la style.php?bgcolor=00FF00&fgcolor=000000





This worked beatifully, when I could easily type $bgcolor = $_GET['bgcolor']; , but doesn't seem to me an elegant solution.





Ideally, I'd like to retain an Object-Oriented approach, but if that's not possible, I'll happily settle for a POST approach, (i.e. allow me to use $bgcolor = $_POST['bgcolor']; ) to avoid filling up the source code with ugly parameters in the link tag.





I'd also wish to avoid creating multiple .css files, if that is at all possible.





Any tips?





Many thanks,


Owen.


Comments

  1. I don't think it's possible, and that doesn't fit the purpose of CSS.

    Edit:
    Well basically, CSS is suppose to contain data that apply a style on a well defined structure. So CSS should not even have variables ( this is a big debate ). The "good theorical way" to solve your problem is to generate html code with proper id and classes, so that you don't have to make any calculation using CSS: you only have to apply a style.

    Furthermore:
    CSS file are made to be cached. If they change all the time, you may have cache problem, or need to ask the file not to be cached. The you might need to generate inline CSS using PHP, but not a CSS file itself.

    ReplyDelete
  2. The easiest way to do this is to make your CSS file a PHP file, and link to it.

    <link href="style.php" rel="stylesheet" type="text/css" media="all" />


    Then, you parse all your code and dump it out at the end.

    $css = ''; # all of your compiled CSS after you do what you need to
    header("Content-type: text/css");
    print $css;
    exit;


    Now, your CSS is being parsed how you want it to be, and it's being served as CSS.

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.