Using php code in css file to create dynamic css dosen't works each time.. sometimes dynamic css not loaded only static rules in that css are loaded

Question

I am trying to create a dynamic css. I am appending a variable in each rule of CSS. I have already tried to get that variable using cookie,session and get method but it works like 1 out of 10 times.

CSS file (component.min.css) :

<?php
header('Content-type: text/css; charset: UTF-8');
header('Cache-control: must-revalidate');
$appVar = "";

if(!empty($_COOKIE["_adl_appVar"]))
{
    $appVar = $_COOKIE['_adl_appVar'];  
}
elseif(!empty($_SESSION['_adl_appVar']))
{
    $appVar = $_SESSION['_adl_appVar']; 
}
 ?>

/* General styles for the modal */

/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.<?php echo $appVar ?>abs<?php echo $appVar ?>-perspective,
.<?php echo $appVar ?>abs<?php echo $appVar ?>-perspective body {
    height: 100%;
    overflow: hidden;
}

.<?php echo $appVar ?>abs<?php echo $appVar ?>-perspective body  {
    background: #fff;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}
.container {
    min-height: 100%;
}

.htaccess file

<IfModule mod_rewrite.c>
  RewriteEngine On
</IfModule>
<FilesMatch "^.*?component.min.*?$">
SetHandler php5-script
</FilesMatch>

Let's say for above case output will be this css

Rendered CSS (incorrect)

.container {
    min-height: 100%;
}

While if it should be rendered something like :-

/* General styles for the modal */

/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.9d94584f3c1af62a2078da0ec45702baabs9d94584f3c1af62a2078da0ec45702ba-perspective,
.9d94584f3c1af62a2078da0ec45702baabs9d94584f3c1af62a2078da0ec45702ba-perspective body {
    height: 100%;
    overflow: hidden;
}

.9d94584f3c1af62a2078da0ec45702baabs9d94584f3c1af62a2078da0ec45702ba-perspective body  {
    background: #fff;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}

.container {
    min-height: 100%;
}

I am loading css file using jquery (Please see below) :-

$("head").append('<link rel="stylesheet" href="path/to/css/component.min.css" id="component-css" type="text/css" media= "screen" />');

http://stackoverflow.com/questions/11474345/force-browser-to-refresh-css-javascript-etc — user3791775, Apr 19 '16 at 08:25
To verify that this is not indeed a cache issue try doing a curl or wget (or equivalent) from command line to see what is returned. — apokryfos, Apr 19 '16 at 08:26
Why do you need such a weird class name to be dynamically generated in the first place? I think it might be a rather bad idea to output this in (partially) dynamically created CSS resources; putting it into a ` — CBroe, Apr 19 '16 at 09:10
@CBroe .. that is the problem here that I have only one option to load css that too using jquery only. — Tejendra Gehlot, Apr 19 '16 at 13:27

score 0 · Accepted Answer · answered Apr 22 '16 at 06:18

I have found what mistake I was doing.

Actually the problem was not with the php side or .htaccess side. The problem was with the dynamic css classes I was generating, when I was generating random classes sometimes it generated classes starting with digit and css doesn't support that.

Thank You

Using php code in css file to create dynamic css dosen't works each time.. sometimes dynamic css not loaded only static rules in that css are loaded

1 Answers1