Micaela 30 de Diciembre de 2009 a las 08.00
   Imprimir artículo
elWebmaster.com

Cómo usar variables de PHP en tus estilos CSS


variables-php-cssCuando 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.  
  3. $colorMarca = "#990000";
  4. $colorLinks = "#555555";
  5. $urlBase = "http://cdn.blahblah.net";
  6. ?>

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.  
  8. ...
  9.  
  10. ul#main-nav li a {
  11. color: ;
  12. }

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

Fuente: CSS-Tricks


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (12)

  1. MADrod dice:

    Muy interesante y practico lo de injectar valores css con php. Mientras lo leia se me ocurrieron varias cosas para hacer con esto.
    Lo √ļnico que no me cierra es el codigo para el .htaccess.
    Saludos.

  2. neiker dice:

    Buenas.. no conocia lo del htaccess..aunque para usarlo hay que tener el handler "php5-script" ¬ŅSabes c√≥mo puedo agregarlo?

    -----
    Por otra parte.. cambiando la expresión regular de esa forma:

    "\.(css|css2)$" en el FilesMatch

    Se podría utilizar para hacer que php parseé los archivos .CSS (o .css2. o .css3 como algunos los nombran) sin necesidad de cambiar la extencion por "php"... aunque no estoy seguro de que funcione porque no tengo el handler en el apache de mi ubuntu y no lo probé en otro server..

  3. novato01 dice:

    Esta genial, cargar estilos especificos para cada navegador, no tenia idea que se podia mesclar php y css

  4. Eliot Ramos dice:

    Muy práctico. Solo creo debe corregirse bajo el subtítulo "Usando las variables", en donde dice 'escupir' por 'esculpir'.

  5. posicionamiento en buscadores dice:

    Esta tecnica es muy usada en los templates de administradores de contenidos

  6. marco amusquivar dice:

    y una consulta se puede mezclar de igual forma asp.net y css?

  7. César Cancino dice:

    Hola, muy interesante el artículo, yo suelo usar esa técnica, o en desmedredo de ella, utilizo javascript, setando los CSS dinámicamente..saludos..

  8. jcfigueroa dice:

    Una idea muy buena principalmente por lo de la incompatibilidad CSS entre los navegadores

  9. FCR dice:

    Nunca lo había pensando.
    "escupir"? imprimir suena mejor

  10. Juan Manuel dice:

    @neiker

    Te dejo un link con info al respecto ^_^

    https://help.ubuntu.com/community/EnablingUseOfApacheHtaccessFiles

  11. SEO dice:

    estamos usando CSS para hacer mas limpio el codigo para los buscadores. Probaremos como resulta si lo hacemos de acuerdo a este post

  12. Castg! dice:

    También podes guardar código php en un "*.css" y con .htaccess se lo puede tomar como un php. Entonces seguimos ejecutando php en un archivo .css que queda tal vez, menos sospechoso...

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión