PHP Variables in the CSS Stylesheet

Question

I am looking to introduce PHP variables to stylesheets (ie. CSS).

I have worked out that I can print a PHP page as a stylesheet by declaring:

header('Content-Type: text/css');

At the top of the CSS page.

However the variable I am passing is not displaying in the stylesheet.

In this case the PHP variable $css will be '-webkit-', '-moz-', '-ms-', or '-o-'.

And in the stylesheet I want to echo it in front of CSS3.

Originally I was achieving this by having a separate CSS file for each however this would be more efficient and allow me to pass genuine styling from the database, such as background-color and font.

Possible? How?

EXAMPLE PHP File called as a CSS link.

<?php
global $css;
header('Content-Type: text/css');

?>
.wheel {
    position:absolute; top:50%; left:50%; height:32px; width:32px; margin:-16px; <?php echo $css;?>transition:opacity 0.3s;
}
.wheel li {
    width:3px; height:9px; border-radius:2px; background:#555; <?php echo $css;?>animation:loading 1.2s infinite; position:absolute; <?php echo $css;?>transform-origin:2px 16px; left:16px; opacity:0; box-shadow:inset 0 0 2px rgba(255,255,255,0.4);
}

@<?php echo $css;?>keyframes loading { 0% {opacity:0.2;} 50% {opacity:0.9;} 100% {opacity:0.2;} }

I think this needs more information: where are you echoing the variable? — Kian
– Kian, Commented Aug 1, 2013 at 15:47
What is it you think that "global $css;" is doing? Is this the entire PHP file or is it included in another one? — No Results Found
– No Results Found, Commented Aug 1, 2013 at 15:54
I don't wanna play mood killer but this smells like terrible practice no? How do you detect vendor prefixes? What is the point? You might want to consider using a css preprocessor like less, sass... developers.google.com/chrome-developer-tools/docs/… — Armel Larcier
– Armel Larcier, Commented Aug 1, 2013 at 15:57
possible duplicate of How do I set a variable in a PHP page, pass it to a CSS file and assign it to a single CSS attribute? — hakre
– hakre, Commented Oct 1, 2013 at 11:13

Benubird · Accepted Answer · 2013-08-01 15:52:35Z

2

If you just want to be able to use variables in your css (not necessarily php), you could consider using less

answered Aug 1, 2013 at 15:52

Benubird

19.7k28 gold badges97 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PaulProgrammer · Accepted Answer · 2013-08-01 15:50:57Z

1

You do this the same way you would with HTML:

<?php 
    header('Content-Type: text/css'); 
    $css = $_GET['css']; // or wherever your're initializing the variable from...
?>
body {
    <?= $css ?>border-radius: 3px
}

But, I don't think this is necessary for your use case. It's actually not uncommon to just statically include all the various -*- options in a css file:

body {
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Just add all effective options, and the browser will determine which are most effective for it. This also means you get to avoid the dull and error prone task of browser sniffing.

answered Aug 1, 2013 at 15:50

PaulProgrammer

18k4 gold badges46 silver badges61 bronze badges

8 Comments

Kian Over a year ago

+1, also there are arguments against dynamic CSS generation: programmers.stackexchange.com/a/118072

PaulProgrammer Over a year ago

@Kian, Fully agree. And, there's really no good argument for it.

Jeff Noel Over a year ago

@Kian There are some good arguments for it. And you can cache the page anyways.

Walrus Over a year ago

@PaulProgrammer :: What if you allow the user to determine how their web profile appears (ie. the styling.) you we need to store that information in database on a per user basis. Would you not?

PaulProgrammer Over a year ago

I would generate separate CSS files (see @Benubird's suggestion below), and determine which CSS file to <link> from the profile.

|

Faisal Chishti · Accepted Answer · 2014-02-19 21:14:22Z

0

SASS CSS extension would allow you to use variables without actually needing to use PHP and the downsides that come with it. Mixins would simplify the generation of vendor-specific style rules.

@mixin vendor-prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}
p {
  @include vendor-prefix(hyphens, auto)
}

answered Feb 19, 2014 at 21:14

Faisal Chishti

11 bronze badge

Collectives™ on Stack Overflow

PHP Variables in the CSS Stylesheet

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related