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

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex