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

Nuevo trailer de Cars 3 more_vert Video play_circle_outline

Nuevo trailer de Cars 3

close

play_circle_outline Nuevo trailer de Cars 3

Pixar recién lanzo el nuevo trailer de Cars 3 que se estrenara el próximo mes de Junio en todo el mundo. En este nuevo trailer de Cars 3 se continua dejando en el misterio el…

close

Infografía: 90 años de historia de Coca-Cola en México

Coca-Cola una multinacional con presencia en todo el mundo tiene una larga historia dependiendo del país donde se desenvuelva; es por eso que comparto con ustedes esta genial infografía que nos muestra como han sido…

close

5 Paquetes de iconos gratis para consultorios medicos

Les comparto una pequeña selección de iconos gratis perfectos para proyectos relacionados con consultorios médicos u hospitales, he revisado todos los enlaces para descargar estos iconos gratuitos y todos funcionan correctamente, así que podemos empezar…

close

Logobook, un GRAN directorio de diseños de logos

Logobook, es un gran directorios de diseños de logos de marcas alrededor del mundo, el directorio esta muy bien organizado y seguro se puede convertir en una fuente de inspiración para tu próximo diseño de…

close

play_circle_outline Nostálgica campaña de Nokia para celebrar el regreso del indestructible 3310

Nokia lleva un tiempo con varios desaciertos en la industria de la telefonía móvil; motivo por el cual ha decido regresar a sus raíces por las cuales tuvo éxito. Todos en algún momento conocimos su…

close

The Truth is Hard, la nueva campaña del NY Times contra Trump

El New York Times, el periódico impreso de mayor importancia en el mundo ha lanzado una campaña contra Trump y sus “hechos alternativos“; esta campaña denominada The Truth is Hard que se une a la…

notifications Recién publicamos
close