ユーザーあたりの動的なCSS

Question

私のサイトには、ユーザーが色（青、赤、緑）を使ってステータスのステータスをすばやく表示できるgamimngセクションがあります。

私はユーザーごとにこのようなものを生成したいと考えています。私はこれまでこれを持っています：

<style> 
.box2 { 
    height: 20px; 
    background: blue; 
    float:left; 
    width:120px; 
} 
.box3 { 
    height: 20px; 
    background: green; 
    float:left; 
    width:30px; 
} 
.box1 { 
    height: 20px; 
    background: red; 
    float:left; 
    width:140px; 
} 
</style> 

<div> 
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
</div> 

私はページに直接CSSを置くべきですか？これをPHPを使って実装する最良の方法は何でしょうか？

Answer 1

あなたはいつものようにあなたのCSSファイルとしてPHPを使用して生成されたファイルを使用して、それを含めることができます。その後、このファイルにはあなたがPHPを使用して生成し、ユーザーの統計情報を見つけるために、現在のセッションを使用することができます

<link rel="stylesheet" type="text/css" href="/css/userstats.php" /> 

。

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

例PHP：それはのようにそれほど明白に見えるように、また、あなたは利用.htaccessのを好む場合は、ファイルを書き換えることができ

background: #<?php echo $colorX; ?>; // assuming the $colorX is HEX 

：

RewriteEngine On 
RewriteBase/
RewriteRule ^css/userstats.css$ /path/to/generatedfile.php [L,NC] 

入れヘッダーを忘れてはいけません

あなたが使用することができます。

<link rel="stylesheet" type="text/css" href="css/userstats.css" /> 

サンプルコード：

<style> 
div.bar { 
    height: 25px; 
} 
div.bar div { 
    display: block; 
    float:left; 
    height: 25px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
div.bar div.red { 
    background: #DD3030; 
    -webkit-box-shadow: -5px 0px 8px 2px #DD3030; 
    -moz-box-shadow: -5px 0px 8px 2px #DD3030; 
    box-shadow: -5px 0px 8px 2px #DD3030; 
    width:140px; 
    -moz-border-radius-topleft: 8px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 8px; 
    -webkit-border-radius: 8px 0px 0px 8px; 
    border-radius: 8px 0px 0px 8px; 
    z-index:10; 
} 
div.bar div.blue { 
    background: #3388DD; 
    -webkit-box-shadow: 0px 0px 8px 2px #3388DD; 
    -moz-box-shadow: 0px 0px 8px 2px #3388DD; 
    box-shadow: 0px 0px 8px 2px #3388DD; 
    width:120px; 
    z-index:5; 
} 
div.bar div.green { 
    background: #1CAD32; 
    -webkit-box-shadow: 5px 0px 8px 2px #1CAD32; 
    -moz-box-shadow: 5px 0px 8px 2px #1CAD32; 
    box-shadow: 5px 0px 8px 2px #1CAD32; 
    width:30px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 8px; 
    -moz-border-radius-bottomright: 8px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-radius: 0px 8px 8px 0px; 
    border-radius: 0px 8px 8px 0px; 
    z-index:10; 
} 
</style> 

<div class="bar"> 
    <div class="red"></div> 
    <div class="blue"></div> 
    <div class="green"></div> 
</div> 

jsfiddle：http://jsfiddle.net/g9Vrx/

Answer 2

色は完全にカスタマイズされている場合は、最良の方法は、たびにユーザごとにページが読み込まをCSSを生成することのいずれかである、または一度ときにそれを生成しますユーザーは好みの色を変更し、キャッシュまたはdbに保存します。次に、それを抽出して使用します。

また、色を完全にカスタマイズ可能（複数の定義済みの色とは異なります）にする場合は、HTMLページにCSSを含める必要があります。