El uso de variables en PHP es una de la características más interesantes de PHP, pero, ¿cómo tener esta misma función en CSS? En esta entrada explicaré como Chris Coyier lo ha conseguido, en unos pocos pasos. De esta forma tendremos muchas ventajas a la hora de mostrar nuestro sitio web al usuario, muchas más posibilidades de interacción y manejo de nuestros elementos.

Style.php

En vez de usar la extensión .css, usa .PHP.

Select Code
<link rel='stylesheet' type='text/css' href='css/style.php' />

Content-type

En la parte superior de tu nuevo style.php indica el tipo de contenido (Content-type):

Select Code
<?php
header("Content-type: text/css; charset: UTF-8");
?>

Inserta las variables

Ahora puedes insertar las variables:

Select Code
<?php
header("Content-type: text/css; charset: UTF-8");</code>

$brandColor = "#990000";
$linkColor = "#555555";
$CDNURL = "http://cdn.blahblah.net";
?>

Usar variables

Empieza a ubicar las variables entre el código CSS, como en este ejemplo:

Select Code
#header {
background: url("<?php echo $CDNURL;; ?>/images/header-bg.png") no-repeat;
}
a {
color: <?php echo $linkColor; ?>;
}</code>

...

ul#main-nav li a {
color: <?php echo $linkColor; ?>;
}

Otras posibilidades e ideas

  • Puedes comprimir el CSS con PHP.
  • Podrías hacer CSS específicas para el navegador, pero no es recomendable.
  • Realiza variables en la fecha y tiempo y modificar el estilo del sitio dependiendo del periodo del día en el que nos encontremos.
  • Generar un número aleatorio, comprobar los resultados y usarlo para obtener una imagen de fondo aleatoria para la cabecera de tu sitio, por ejemplo.

¿No funciona?

Chris probó su truco en una página estática y funcionó bien, pero después intentó realizar la misma técnica en un sitio de WordPress y no fue tan bien. La solución fue dejar el archivo con el nombre de style.css y usar .htaccess para parsearlo como PHP. Sólo tienes que estar seguro de que el código que te voy a mostrar a continuación se encuentre en el archivo .htaccess (sólo servidores Apache) en el mismo directorio que el archivo CSS. Finalmente sólo tienes que introducir las variables de PHP en el archivo CSS como lo harías con un archivo .PHP normal.

Select Code
<FilesMatch "^.*?style.*?$">
SetHandler php5-script
</FilesMatch>


Cualquier duda que tengáis podéis preguntarla en el foro, por favor.

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!