CSS Reutilizable con PHP (Parte I)

Es normal encontrar preguntas acerca de la reutilización de CSS con PHP (CSS Dinámico). Algo que siempre me interesó.

Actualizado: Hemos publicado la Segunda Parte (Como utilizar PHP StyleSwitcher v.2).

El CSS tiene como concepción el diseño, la presentación o la disposición de una página web. Mostramos páginas HTML diferenciando la apariencia del contenido. Por lo que se hizo indispensable el manejo de XHTML.

PHP por su parte, es código abierto (gratuito), fácil de aprender y actualmente uno de los estándares mundiales de programación.

Vamos a unir estos dos lenguajes de programación para crear una estructura a nuestro sitio web usando CSS. La estructura básica y más usada: el header, el menú lateral y el contenido. A estos le asignamos los colores usando PHP, mostrando como cambiarlos fácilmente.

Como ya hemos visto en un articulo anterior, podemos imprimir o mostrar nuestro código PHP en el navegador usando las funciones de salida por ejemplo print() o echo().

Para empezar debemos indicar al navegador que el código que va a imprimir es CSS para esto mediante PHP le colocamos una función (tipo MIME):

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

Luego definimos los esquemas de colores que usaremos. Esto se hace almacenando la información que identifica los colores en variables (recuerda que todas las variables son prefijadas por el signo del dólar). Nuestro código quedaría como este:

$persistent = array(
'bgmast' => 'bbd9ee', /* encabezado */
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3', /* menú */
'fgmenu' => '444444',
'bgcont' => 'ffffff', /* contenido */
'fgcont' => '444444' );

Como puedes ver estamos usando valores hexadecimales para los colores que no incluyen su prefijo “#”. Esto se debe a un conflicto entre el Análisis de PHP y de CSS. Pues para referirnos a un color que hemos instanciado en un array, lo debemos hacer de la siguiente manera:

print $persistent['bgmast']; /* encabezado - bgmast: bbd9ee */

Siguiendo estos pasos definimos dos esquemas de colores alternativos al original.

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

/* persistent (default) */

$persistent = array(
'bgmast' => 'bbd9ee', /* encabezado */
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3',   /* menu */
'fgmenu' => '444',
'bgcont' => 'fff'', /* contenido */
'fgcont' => '444'
);

/* alternate color scheme 1 */

$alternate1 = array(
'bgmast' => 'ddb',
'fgmast' => '000',
'bgmenu' => 'aa7',
'fgmenu' => 'fff',
'bgcont' => 'fff',
'fgcont' => '333'
); 

/* alternate color scheme 2 */   
$alternate2 = array(
'bgmast' => '399',
'fgmast' => 'fff',
'bgmenu' => 'eb5',
'fgmenu' => '000',
'bgcont' => 'eee',
'fgcont' => '000'
);

switch ($_GET['scheme'])    {
case 'alt2':
$comment = 'alternar Color Esquema #2' (BaluArt.net);
$scheme = $alternate2;
break;
case 'alt1':
$comment = 'alternar Color Esquema #1 (W3C CSS)';
$scheme = $alternate1;
break;
default:
$comment = 'persistent Color Esquema Original (Digital Web Magazine)';
$scheme = $persistent;

print <<<_CSS /* css-demo.php */

#mockup {
  width: 400px;
  height: 200px;
  margin: 1em 0;
  padding: 0;
  border: 1px solid #000;
} 

/* masthead */

#mock-mast {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #000;
}

#mock-mast h1 {
  font-size: 20px;
  margin: 0 0 0 14px;
  padding: 0;
} 

/* menu */

#mock-menu {
  float: left;
  width: 99px;
  height: 159px;
  font-size: small;
  padding: 0;
  border-right: 1px solid #000;
}

#mock-menu h2 {
  margin-top: 10px;
  margin-left: 30px;
  font-size: medium;
} 

#mock-menu ol {
  margin-left: 30px;
  list-style-type: none;
} 

#mock-menu ol li {
  font-size: small;
  text-decoration: underline;
}

/* content */

#mock-cont {
  font-size: small;
  margin: 0 0 0 100px;
  padding: 0 0 0 10px;
  border: 0;
} 

#mock-cont h2 {
  margin: 10px 0 0 0;
  padding: 0;
  font-size: medium;
}

#mock-cont p {
  width: 280px;
  margin: 10px 0 0 0;
  padding: 0;
  font-size: small;
} 

/* end static CSS */ 

_CSS; }

/* end switch() */ 

print <<<_CSS 

#mockup { background-color: #${scheme['bgcont']}; }
#mock-mast { background-color: #${scheme['bgmast']}; }
#mock-mast h1 { color: #${scheme['fgmast']}; }
#mock-menu { background-color: #${scheme['bgmenu']}; }
#mock-menu h2 { color: #${scheme['fgmenu']}; }
#mock-menu ol { color: #${scheme['fgmenu']}; }
#mock-cont h2 { color: #${scheme['fgcont']}; }
#mock-cont p { color: #${scheme['fgcont']}; }

/* end dynamic CSS *

/ _CSS;

/* css-demo.php fin del script */

?>