En esta receta voy a explicar el uso de CSS+PHP; un paquete muy potente donde un lenguaje complementa al otro, donde las faltas de CSS las cubre PHP y con el que podemos incrementar la potencia general de las hojas de estilo. Primero explicaré las ventajas de la modularización integrada de serie en CSS para posteriormente explicar los beneficios de generar las hojas de estilo dinámicamente mediante PHP.

Ventajas de CSS dinámicas
- Mucho mas sencillo para gestionar hojas de estilo de forma ordenada
- Podemos incluir un fichero de configuración general para controlar el estilo fundamental de la web. Añadimos a CSS variables
- Permite webs "mutables" o cambiantes a nivel de hoja de estilo
- La detección de navegador mediante PHP, permite proporcionar hojas de estilo diferentes dependiendo del navegador del cliente.

Contras
- Al ser dinámicas los navegadores no cachearán la hoja de estilo, con lo que nos cargamos una de las mayores ventajas de CSS. En todo caso perdemos esta prestación a costa de añadir otras y de incrementar la facilidad de uso de CSS

1. Modularizacion de serie: @import

Con la sentencia @import podemos enlazar a una nueva hoja de estilo desde dentro de una hoja de estilo.

@import ("URL/fichero");

Para poder usar nuestras extensiones .css con PHP primero debemos avisar a apache que esa extension la debe procesar el módulo de PHP. Para ello incorporamos la siguiente linea en la configuracion del sitio web en el httpd.conf:

AddType application/x-httpd-php .css

Además todos nuestros ficheros PHP dinámicos que en realidad son hojas de estilo requieren tener la siguiente linea al comienzo del fichero:

header('Content-Type: text/css');

Esta línea indica al módulo PHP que añada a las cabeceras html un indicador del tipo de fichero del texto procesado que envia al cliente para que el navegador del cliente reconozca que es una hoja de estilo y no un documento html normal.
Una vez hecho esto, podemos usar bucles y variables en las hojas de estilo.

3. Un ejemplo: CSS de este sitio web
Veamos como son las hojas de estilo de este sitio web:

picholas@ariel:~/www/david6/css$ ls
css_barrasuperior.css  css_calendar.css  css_forms.css   css_lists.css
css_boxconfig.css      css_config.css    css_iehack.css  css_main.css
css_box.css            css_font.css      css_layout.css  lib

¿Por qué tantos ficheros? Bien veamos el contenido del css_main.css:

<?
header('Content-Type: text/css');
require("css_boxconfig.css");
require("css_config.css");
?>
@import url('/css/css_box.css');
@import url('/css/css_font.css');
@import url('/css/css_layout.css');
@import url('/css/css_lists.css');
@import url('/css/css_calendar.css');
@import url('/css/css_forms.css');
@import url('/css/css_iehack.css');
@import url('/css/css_barrasuperior.css');
...

La linea header('Content-Type: text/css'); es necesaria en todos los ficheros CSS-PHP dinámicos como ya he comentado antes.

Los require() en PHP vienen a ser como el @import en CSS. Yo importo esos ficheros a nivel PHP porque son los de configuración. Los uso para guardar variables. Por ejemplo, el css_config.css contiene:

<?
$ROJO = '#d63e3e';
$ROJO_OSCURO = '#601d1d';
$ROJO_CLARO="#d6a0a0";
$NARANJA_CLARO = '#ffeeee';
$NARANJA = '#c64c00';
$NARANJA_OSCURO = '#893200';
...

De esta manera cuando necesitemos poner un color en la web podemos referirnos a estas variables PHP en vez de poner directamente el color. Es una ventaja cuando necesitas cambiar el tono de un color y resulta que lo tienes puesto 1000 veces en diferentes secciones de la hoja de estilo. Asi cambiarlo es mas facil porque solo necesitas retocar la configuración. Por ejemplo:

a {text-decoration: underline; color: <? echo "$COLOR_A_TEXT"; ?>}
a:hover {text-decoration: none; color: <? echo "$COLOR_A_TEXT_OVER";?>}

A esto me refiero cuando digo que con las CSS dinámicas optimizamos la centralización del diseño. CSS2 no tiene variables, asi que las sustituimos por variables PHP.

Los bucles nos van a servir como demostración de las capacidades de esta técnica, pero su utilidad real es muy pequeña.

Hecha un ojo a este fichero css: css_box.css

Como te puedes imaginar no esta generado a mano, esta generado dinamicamente. Este es su código fuente:

foreach ($Boxes as $boxcolor => $datos)
{
echo "DIV." .$boxcolor ."Box {";
echo "border: 1px solid " .$datos['BORDER'] ."; ";
echo "color: " .$datos['COLOR'] ."; ";
echo "background-color: " .$datos['BG'] ."; ";
echo "padding: 3px; width:  530px; overflow: visible; }";
echo "DIV." .$boxcolor ."Box A, DIV." .$boxcolor ."Box A:active, DIV."
.$boxcolor ."Box A:visited, DIV." .$boxcolor ."Box A:link {";
...

(Los colores les saca del fichero de configuración)

¿Para que nos vale esto? Aqui viene la demostración técnica:

Lo de los bucles es una manera de complementar las faltas de CSS. ¿Qué CSS no tiene variables? PHP si. ¿Qué CSS es incapaz de detectar el navegador cliente? No pasa nada, PHP sabe hacerlo.

La conjunción CSS/PHP es muy potente, ya que uno complementa los defectos del otro.