SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Thread: PHP inside CSS?

  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question PHP inside CSS?

    Could this be used for dynamic CSS?

    Say for example, browser sniffing only certain CSS definitions which may be stored in a variable??? I would like to think that this could help with browser resolution issues, etc.

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup it can (and has) been done.

    I use 'active' CSS on my main developer site

    the 'trick' is this (in your css.php file)

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

    after that you are golden, your php file acts as you would expect yet to the browser it is nothing more than CSS

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly right I use the same technique when I built Bongo CMS to enable on the fly theme switching. I store several style sheets in a MySQL database then store the user or admin preference in a separate table my css.php file then pulls the correct style sheet for the given situation. In the same way you can feature sniff and get what you are after.
    Good luck!
    can8v
    Last edited by can8v; Aug 15, 2007 at 23:22.

  4. #4
    SitePoint Addict silentcollision's Avatar
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dc dalton View Post
    Yup it can (and has) been done.

    I use 'active' CSS on my main developer site

    the 'trick' is this (in your css.php file)

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

    after that you are golden, your php file acts as you would expect yet to the browser it is nothing more than CSS
    Ahhh, thats how its done. I should've thought.

    I just ended up having multiple stylesheets, and switching between them with PHP.

  5. #5
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well...this is quite an interesting thread.
    I'm assuming that the "css.php" file will be referenced with include(), correct?
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  6. #6
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, you use the css.php file exactly like it's a style.css file.

    Another option is to add the php handler to css file types.
    MySQL v5.1.58
    PHP v5.3.6

  7. #7
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by silentcollision View Post
    Ahhh, thats how its done. I should've thought.

    I just ended up having multiple stylesheets, and switching between them with PHP.
    This approach while a little less sophisticated gets the job done, though if you want to simply switch between stylesheets you might consider using JavaScript for that purpose, but don't forget a <noscript> option.

  8. #8
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it me or should this thread be retitled CSS inside PHP?

  9. #9
    SitePoint Wizard Hammer65's Avatar
    Join Date
    Nov 2004
    Location
    Lincoln Nebraska
    Posts
    1,160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Keep in mind that information that you might use to determine what stylesheet to use (primarily user-agent), is not always there. You would need a fallback, just in case.

  10. #10
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I much prefer to keep my CSS and my PHP (and my (X)HTML for that matter) as separate as possible. Reason being that we're talking 3 distinct layers here: logic (PHP), markup ((X)HTML), presentation (CSS).

    When I need CSS for specific user-agents, I do all the sniffing in PHP and use that to include separate browser-specific stylesheets. Something like this (pseudo code):
    PHP Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="common.css" />
    <?php
        
    if($browser == "IE")
            echo 
    '<link rel="stylesheet" type="text/css" href="msie.css" />';
        elseif(
    $browser == "Firefox")
            echo 
    '<link rel="stylesheet" type="text/css" href="mozilla.css" />';
    ?>
    </head>
    This way my presentation layer remains separate (this is practically a necessity if you have a designer who doesn't know (nor need to know) PHP) and yet I can still deliver designs tailored to individual browsers. This type of approach also works for delivering user-specified stylesheets (e.g. to allow users to select their own skin). It also lets the browser cache the CSS like it normally would, whereas even with the appropriate Content-Type header it may not cache a .php file; also be aware that adding .css to your PHP handler may also prevent caching because of the way the server sends dynamic content.
    PHP questions? RTFM
    MySQL questions? RTFM

  11. #11
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kromey View Post
    Personally, I much prefer to keep my CSS and my PHP (and my (X)HTML for that matter) as separate as possible. Reason being that we're talking 3 distinct layers here: logic (PHP), markup ((X)HTML), presentation (CSS).
    You are missing the point altogether. What you are doing is fine, but it doesn't keep the layers any more separated than the methods discussed here. If you use a css.php file as suggested above you are still linking in a separate style sheet that has all of the style information separate from everything else, it is simply generated on the server side based on whatever is coded in the php, then pure css is sent back to the client (wholly separate from any other php scripts that might be used to generate the page or (X)HTML for that matter.

  12. #12
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML:
    <link href="css-generator.php" type="text/css" rel="stylesheet">

    Then have css-generator.php output CSS and you're set.
    Same theory can be used for dynamic Javascript or images, but use it judiciously.

  13. #13
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by can8v View Post
    You are missing the point altogether. What you are doing is fine, but it doesn't keep the layers any more separated than the methods discussed here. ...pure css is sent back to the client (wholly separate from any other php scripts that might be used to generate the page or (X)HTML for that matter.
    Actually, I think you are missing my point. The point of using only CSS in CSS files has nothing to do with the user-agent receiving pure CSS or not - to be perfectly frank, who cares? Cache-friendly issues aside, how the user-agent receives the data quite honestly doesn't matter in the slightest. It's about separating the workload. Imagine you have 2 types of people on your team: the PHP coders who work with all the PHP code, and the designers who make the output look good. It's simply impractical in many cases to expect your CSS designers to know PHP enough to browser sniff like is being discussed here. Much better to let them deal with pure CSS files, and let the PHP coders handle the browser sniffing in the (X)HTML template file(s).

    Granted, in many cases the designers and the coders are in fact the same person, but I've always felt that even in such cases keeping a strict separation between design and logic is the way to go, if for no other reason than because oftentimes I'm turning over a completed site to another organization who may later want to redesign their look by hiring a CSS designer and not touch the underlying logic.

    If you don't believe me, take a poll of designers (not developer-designers like I and I'm sure many of you are), see how many of them could use PHP to do browser sniffing.

    Granted, you could have your PHP developer(s) create the general template of the css.php file and make sure it's well commented so that designers can understand what they're doing where, but why go through that hassle at all when it's completely unnecessary?
    PHP questions? RTFM
    MySQL questions? RTFM

  14. #14
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kromey View Post
    It's about separating the workload. Imagine you have 2 types of people on your team: the PHP coders who work with all the PHP code, and the designers who make the output look good. It's simply impractical in many cases to expect your CSS designers to know PHP enough to browser sniff like is being discussed here. Much better to let them deal with pure CSS files, and let the PHP coders handle the browser sniffing in the (X)HTML template file(s).
    Okay, I will acknowledge that their might be a circumstance where your logic applies. I also agree that it doesn't matter if the designer is also the developer.
    I have a simple solution for the when the designer and the developer are a different person or when you want to turn over a solution to a client that is easy for them to change their style sheets.
    I build all of my style sheets so they are cross-browser compatible (no need to dynamically change because such and such browser is not compatible) What I have found is: once I set my mind to this task it doesn't take me any longer to figure out a way to accomplish this than it does to write a code to dynamically change a portion of the style sheet for a specific browser or feature that was sniffed or create a whole new style sheet for the offending browser. This really is the easiest solution
    If you must however, go with a dynamic style sheet (and even if you don't) why not make your style sheets editable by authenticated users. I have built this into the last two content management systems I have created and it works out fabulously. In this way designers and developers can work together seemlessly. To see an example of how I allow developers and designers to work together selecting and editing themes (style sheets) check out the demo at bongocms.com. I have used this same principal for allowing visitors to select the theme they like, selecting themes based on browser/feature sniffing, and now that I insist that all themes be cross-browser compatible, I use it simply to enable a union between the designers and developers.

  15. #15
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by can8v View Post
    I build all of my style sheets so they are cross-browser compatible (no need to dynamically change because such and such browser is not compatible) What I have found is: once I set my mind to this task it doesn't take me any longer to figure out a way to accomplish this than it does to write a code to dynamically change a portion of the style sheet for a specific browser or feature that was sniffed or create a whole new style sheet for the offending browser. This really is the easiest solution
    I'm 100% in agreement with you. It's very rare that I have to build browser-specific styles, but on those rare occasions I still heavily favor the method I described above.

    Quote Originally Posted by can8v View Post
    If you must however, go with a dynamic style sheet (and even if you don't) why not make your style sheets editable by authenticated users. I have built this into the last two content management systems I have created and it works out fabulously.
    I'm actually in the process of putting the finishing touches on my own very similar application. I think this is a great way to allow users to customize the look and feel of their experience on my site (building a small-scale site that focuses on blogs, literature, movies, and video games), however I don't feel this is a method that can be used when designing sites for which this is not an intended feature (e.g. a small business' site).
    PHP questions? RTFM
    MySQL questions? RTFM

  16. #16
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ekk! Just posted the same thing cause I didn't see my original post!

    Man does getting old suck!

  17. #17
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,094
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Using php in the style sheet is the only way to go in my opinion.

    you can browser sniff if you want and give ie colored scrollbars or have fixed backgrounds for ie and scrolling for all others.

    it goes beyond that, for template pages, data returned from db can be checked for size and display a div on the page with the appropriate width for the text.


    Code:
    echo '<link rel="stylesheet" type="text/css" href="style.php?bkg='.$bkg.'&txtwidth='.$width.' />';
    (I have heard that there may be caching issues but am not sure how bad it is)

    there is even more. (no caching issues using a content cach expires directive)

    at the top of the css file you can declare global variables in a config section.

    for drop down menus you can say lower level background = upperlevelcolor
    which reverses the color scheme for the li items.

    for elements that have the same sizes, text color, borders etc . . .

    you change the values in the config section saving a lot of time and making experimentation quicker.

    even for padding that affects width you can do the math with php.


    thats my take on it

    Loren

  18. #18
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what you're saying, Loren, but the problem I see is that now you are requiring that any designer who works with a site you create in this manner is required to know PHP to make appropriate changes in the right places.

    If you insist on adjusting a div's width based on db data, then you can do that inline in the (X)HTML template (or whereever that particular div is being generated). Including style rules to color IE's scroll bars will not affect other browsers and thus including them in every style sheet is not an issue. Why you would give IE a fixed background a scrolling background to others is beyond me, but again that could be done inline or via an alternate stylesheet included in the template via browser sniffing done there.

    The short is that separating design and logic makes for a site that is more maintainable by a wider range of people - requiring that anyone who wants to change the CSS of your site know PHP is going to rule out a huge proportion of otherwise very capable designers. Besides, as can8v points out above, designing cross-browser style sheets is not that difficult and can be obtained with very little to no extra work compared to using browser-sniffing to serve up different styles to different browsers.
    PHP questions? RTFM
    MySQL questions? RTFM

  19. #19
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,094
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    kromey,

    thanks for the response.

    All I really do is sniff out ie an give colored scroll bars and not even the way I described. yes it is total cheating but my css validates LOL.

    I was just pointing out the css.php?this=that way of doing things actually works and could have potential, I personally dont have a legitimate use for it but think it is a cool concept.

    I do like the idea of having a config section in the css which is what I use and think it is a valid use of having a css.php file.

    I was just going on about the possibilities for people who know php and css.

    (it's happened, I do contract work, "what happened to my styles.css file")

    edited content:

    All of my sites are my own cms, written in php and if anyone were to jump in they would need to know php so in this case they would be understanding what is going on, I hope that makes sense.

    cheers
    lorenww
    Last edited by lorenw; Aug 16, 2007 at 20:27. Reason: more info

  20. #20
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A site that separates the three layers (logic, markup, presentation) should be editable in one without requiring knowledge of the other. At least, that's my take. Thus, when I produce a site and turn it over to the client, if the client later wants to change the way things look, even the location of things on the page, all he has to do is find a CSS designer to edit styles.css. If he wants to add an extra feature (e.g. one of my former clients later wanted to add the ability to upload images to a CMS I produced for her), only then should a PHP developer be needed.

    That's my take on it. I see three very distinct layers whose separation results in sites that are easy to maintain. Logic (PHP), markup ((X)HTML), and presentation (CSS) should cross over as little as possible (obviously, for any kind of dynamic site the markup has to contain some logic, even if it's as simple as "put X here, Y there") so that changes to one layer don't necessarily need to involve the others. If you accept this separation of layers (and to be perfectly frank, I'm not trying to foist this on anyone, just expressing my opinion, although admittedly I can be extremely opinionated), then the only place for browser sniffing (should you need it at all) is in the logic layer, never in the presentation layer.
    PHP questions? RTFM
    MySQL questions? RTFM

  21. #21
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like to say that I never expected that this thread would attract so much attention. We went from a simple can php generate a style sheet, to should php generate a style sheet and if so under what circumstances.

    Since this thread has generated so much interest however, I have decided to give a few cross-browser basics that may help some of you drastically limit your need for php to generate your css and much more importantly limit the need for browser/feature sniffing.

    It is my personal opinion that generating css with php is very powerful, but browser/feature sniffing is almost always not needed given good cross-browser css. If you do go with the option of using php to generate your css or any other server side script to generate your css, such as classic asp, perl, or .NET then you should make editing such css easy for designers who don't know such development languages, by making it directly accessible to authenticated users (preferably by use of a solid CMS).

    Now onto the basic CSS suggestions that will help you eliminate the need for all of this browser and feature sniffing. Very rarely is there a case where one of the major browsers (IE, Firefox, Opera, & Safari) has no support for a CSS feature. An example of such an instance would be IE 6 does not support the hover psuedo class for anything other than an <a> element. This would require a work around using java script. 99% of the time however, experimenting with different ways of positiioning will solve the issues we all run up against. Positioning issues are generally caused by each browser having a different default margin, padding, etc. . . One way to go about fixing positioning issues, which for me at least has caused by far the most cross-browser issues is to define most if not all margin, padding, border, etc. . . properties, in this way you can see which browsers have unusual default values for these properties. In particular I have run into a lot of issues using absolute and relative positioning and have been able to make my stylesheets more cross-browser compatible with fewer lines of code, by simply adjusting margins, padding, borders, etc. . . When selecting colors always use the hex color code with all six digits. I have seen many sites out there that use a named color that is only supported by the major browsers or use a 3 digit hex alternative that some browser will not support correctly. These few simple guidelines will help eliminate the need for browser/feature sniffing altogether.

    One last thing, I would like to restate what kromer's point that if you want to add a feature for something only one or two browsers support such as scroll bar color, no sniffing is required simply include it and if it isn't supported it will be ignored.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •