Historial de un navegante

by Angel

Cómo usar variables de PHP en tus estilos CSS

leave a comment »

Leído en elwebmaster:

Cuando se le pregunta a los diseñadores qué nuevas funcionalidades quisieran añadir a las futuras versiones de CSS, siempre surge la idea de "variables".

Al día de hoy esto no se considera una práctica ni buena ni mala, aunque muchos optan por usar variables de php en sus estilos css. El principal motivo es el grado de abstracción que nos permite trabajar de esta forma. ¿Estás dispuesto a conocer cómo implementar esta técnica?

Style.php

En lugar de utilizar la extensión de archivo .css, utiliza .php

Content-type

Al comienzo de tu nuevo archivo style.php setea el tipo de contenido de nuevo como CSS:

  1. header("Content-type: text/css; charset: UTF-8");
  2. ?>

Setea las variables

Ahora puedes setear variables para lo que quieras, por ejemplo:

  1. header("Content-type: text/css; charset: UTF-8");
  2. $colorMarca = "#990000";
  3. $colorLinks = "#555555";
  4. $urlBase = "http://cdn.blahblah.net";
  5. ?>

Usando las variables

Debajo del código PHP, puedes comenzar con el CSS común y corriente, sólo que ahora también puedes usar PHP para imprimir el contenido de esas variables.

  1. #header {
  2. background: url("/images/header-bg.png") no-repeat;
  3. }
  4. a {
  5. color: ;
  6. }
  7. ul#main-nav li a {
  8. color: ;
  9. }

Ir más allá/Otras ideas

  • Además de esto, podrías también comprimir el CSS con PHP.
  • En teoría, podrías tomar el user agent y tratar de cargar estilos específicos para cada navegador.
  • Obtener la fecha/hora y cambiar el diseño de tu sitio según las estaciones o los distintos momentos del día.
  • Genera un número random y utilízalo para setear una imagen de fondo al azar en tu cabecera.

¿No funciona?

Si no funciona puede que la solución sea dejar el nombre del archivo como style.css, y utilizar .htaccess para que sea analizado como PHP. Simplemente asegúrate de incluir este código en el archivo .htaccess (sólo para servidores Apache) en el mismo nivel del directorio en que se encuentra el archivo CSS. Luego, sólo utiliza PHP dentro, de la misma forma en que lo harían con cualquier otro archivo PHP.

  1. SetHandler php5-script

Enlaces | CSS-Tricks | elwebmaster

Anuncios

Written by Angel Flores

6 enero 2010 a 10:59

Publicado en css, diseño web

Tagged with , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: