每個用戶的動態CSS

我在我的網站上有一個gamimng部分，允許用戶使用顏色（藍色，紅色和綠色）顯示其統計信息的快速狀態。每個用戶的動態CSS

我想爲每個用戶生成類似這樣的內容。我到目前爲止：

<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？

來源

2012-02-10 natalia

什麼類型的env？（Linux的窗戶）？ – 2012-02-10 01:56:55

確保你只允許顏色。使用CSS，你可以在IE上執行JS。 – Blender 2012-02-10 01:57:11

@BookOfZeus我有燈 – natalia 2012-02-10 01:58:11

可以使用PHP總是使用生成的文件，並把它作爲像你的CSS文件：

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

然後在這個文件中，你可以使用當前會話找出用戶統計數據，然後使用PHP產生。不要忘了把標題：

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

示例PHP：

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

您還可以，如果你喜歡使用的.htaccess重寫文件，所以它看起來不那麼明顯，如：

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/

來源

2012-02-10 02:04:01

如果顏色是完全可定製，那麼最好的辦法是，要麼生成CSS每次每個用戶的頁面加載，否則一旦時產生的呢用戶更改他的偏好中的顏色，並將其存儲在緩存或數據庫中。然後解壓縮並使用它。同樣，如果顏色是完全可定製的（不像一對預定義的顏色），那麼應該在HTML頁面中包含CSS，因爲用PHP修改外部CSS文件是相當複雜和不必要的。

來源

2012-02-10 02:04:39

每個用戶的動態CSS

回答

相關問題