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

  1.  

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
Acceder