Variables CSS usando PHP

La semana pasada en la segunda entrega de Quick Tips: sobre desarrollo web, hacíamos referencia a un articulo de Ajaxian sobre las variables CSS y su posible inclusión en la siguiente versión de este lenguaje pero eso esta aun en veremos.

Mientras tanto nosotros ya podemos gustar de la bendición de los que son las variables CSS usando PHP, pero como? sigan estos simples pasos:

Creamos nuestros archivo CSS con nombre “default.css”

  /* globals */    *       { margin:0; padding:0; }    body    { color:$body_text_color; font-size:$body_font_size; }    

Ahora viene el codigo php que va aplicar los valores de las variables, en el archivo llamado “stylesheet.php”.

  /* get the stylesheet */  $stylesheet = @is_file($_GET['stylesheet']) && strtolower(substr(strrchr($file_name,'.'),1)) == 'css' ? $_GET['stylesheet'] : 'default.css';    /* set the header information */  //will be output as css  header('Content-type: text/css');  //set an expiration date  $days_to_cache = 10;  header('Expires: '.gmdate('D, d M Y H:i:s',time() + (60 * 60 * 24 * $days_to_cache)).' GMT');    /* set the dynamic information */  //default css variable information  $default = array(  'body_font_size' => '16px',  'body_text_color' => '#00f'  );    //red css variable information  $red = array(  'body_font_size' => '10px',  'body_text_color' => '#f00'  );    /* extract the propery array's information */  extract($_GET['theme'] && ${$_GET['theme']} ? ${$_GET['theme']} : $default);    /* load in the stylesheet */  $content = preg_replace('/\$([\w]+)/e','$0',@file_get_contents($stylesheet));    /* spit it out */  echo $content;  

Eso es todo ahora lo que cambia en nuestro código HTML es cuando hablamos a la hoja de estilos en vez de pedir el default.css vamos a hablar al “stylesheet.php”, ejemplo:

  <link rel="stylesheet" type="text/css" href="/stylesheet.php">  

Eso es todo el resultado de nuestro CSS debe ser el siguiente:

  /* globals */  *{ margin:0; padding:0; }  body{ color:#00f; font-size:16px; }  

Nota: El archivo default.css jamas se va a sobreescribir con los valores de las variables, simplemente cuando hablamos al stylesheet.php este procesa el CSS reemplazando las variables por valores y se lo devuelve al servidor ya con valores para que sea interpretado, sin haber modificado el archivo CSS.

Via: davidwalsh, CSS Variables using PHP (en ingles)

comment ¿Que opinas?

Artículos recientes

close

Hurdy-Gurdy, un diseño de instrumento musical mecanizado y sustentable

Hurdy-Gurdy es el nombre que recibe esta Zanfona mecanizada realizada por UGEARS; la cual, busca apoyo mediante Kickstarter para hacerse realidad. Este impresionante modelo mecánico de una Zanfona es completamente funcional y autónoma además como…

close

Este es el primer tráiler de Forces of Destiny, la nueva serie de Star Wars

Forces of Destiny es la nueva serie de Disney basada en el universo de Star Wars; esta nueva serie de animación llega para ampliar la historia de varios personajes de la serie como Leía, Jyn…

close

Marcas innovadoras que han cambiando la forma de mover al mundo

El día de hoy quiero compartir con ustedes una infografía que muestra algunas de las marcas que han cambiado al mundo; esta infografía las señala como aquellas que han alterado el Statu Quo en diferentes…

close

Conoce a los ganadores del iPhone Photography Awards 2017

El iPhone Photography Awards 2017 ya tiene ganadores y entre los miles de competidores de alrededor de 140 países; El IPP Awards como se le conoce es un concurso donde participan todas las fotografías que hayan…

close

play_circle_outline Nike apoya la diversidad de género en su nuevo comercial

Nike, una de las marcas más reconocidas en el mundo de los deportes ha lanzado su nuevo anuncio en redes sociales el pasado 22 de Junio; el cual, muestra como la marca apoya la diversidad…

close

Impresionantes paisajes espaciales creados a mano por Adam Makarenko

Adam Makarenko es un fotógrafo que ha demostrado su habilidad al lente y con las manos con esta increíble sesión fotográfica creativa;. Con un genial aspecto estas fotografías podrían parecer que son emitidas por la…

notifications Recién publicamos
close