Динамический css для пользователя

У меня есть раздел 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?

Ответы

Ответ 1

Вы всегда можете использовать сгенерированный файл с помощью 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/

Ответ 2

Если цвета полностью настраиваются, лучшим способом является либо генерировать CSS каждый раз, когда страница загружается на пользователя, либо генерирует его один раз, когда пользователь меняет цвета в своих настройках и сохраняет его в кеше или db, Затем просто извлеките его и используйте.

Опять же, если цвета полностью настраиваются (не как несколько предопределенных цветов), вы должны включить CSS в HTML-страницу, так как изменение внешних файлов CSS с PHP довольно сложно и не нужно.