2016-04-19 6 views
0

動的CSSを作成しようとしています。 CSSの各ルールに変数を追加しています。私はすでにcookie、session、getメソッドを使ってその変数を取得しようとしましたが、10回のうち1回のように機能します。CSSファイルでphpコードを使用して動的CSSを作成するdosen'tは毎回動くことがあります。時には動的CSSが読み込まれない静的ルールがCSSにロードされます

CSSファイル(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ファイル

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

上記の場合の出力は、このCSS CSS(間違った)レンダリング

となりますためのは、言ってみましょう

.container { 
    min-height: 100%; 
} 

Whil電子それが描画するかどうのようなもの: -

/* 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%; 
} 

私は(下記を参照してください)jqueryのを使用してCSSファイルをロードしています: -

私は私が何をやっていた間違いを発見した
$("head").append('<link rel="stylesheet" href="path/to/css/component.min.css" id="component-css" type="text/css" media= "screen" />'); 
+0

http://stackoverflow.com/questions/11474345/force-browser-to-refresh-css-javascript-etc – user3791775

+0

これは確かにキャッシュの問題は、カールをやってみたりではないことを確認するためにありがとうございましたwget(または同等のもの)をコマンドラインから返し、何が返されるかを確認します。 – apokryfos

+0

最初に動的に生成されるような奇妙なクラス名が必要なのはなぜですか?私は、(部分的に)動的に作成されたCSSリソースでこれを出力するのはむしろ悪い考えかもしれないと思います。それをHTMLコードの中の '