Optimiza tus imágenes gratis sin perder calidad y mejora la velocidad de tu página web: Compresor de Imágenes JPG/PNG/GIF

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

33 vídeos que enseñan como usar photoshop para principiantes

En Petapixel han realizado una recopilación un tanto interesante que te será útil si buscas aprender Photoshop; esta herramienta de diseño primordial y básica para aquellos que incursionan en el mundo del diseño gráfico. Este…

close

Google Street View te lleva al espacio con un mapping de la ISS

Todos conocemos Google Street View; ésa magnífica tecnología que nos permite conocer el mundo sin movernos del ordenador; y que la mayoría ocupa para ver su propia casa desde su computadora; ha recibido un añadido…

close

11 Cualidades que caracterizan a las personas productivas

El día de hoy quiero compartir con ustedes una infografía creada por el sitio web Entrepreneu; el cual, ha creado una lista de 11 actividades que las personas “súper productivas” realizan diferente a las personas…

close

Divertidas fotografías de animales que parecen posar para su nuevo album

En BoredPanda han recopilado alguna fotografías que nos sacarán una sonrisa; las cuales, están centradas en diversos grupos de animales que parece que posan para la portada de su nuevo álbum musical. Estas divertidas fotografías…

close

Ménage à Tetris, una curiosa animación sobre dos piezas de Tetris

Ménage à Tetris, es uno de los 10 filmes que vieron la luz durante el TEDxSydney 2017; en esta animación veremos los problema que pasan 2 piezas de tetris para consumar su amor; no sin…

close

Ingeniosas esculturas tipográficas por Trevor Wheatley

El arte y la tipografía pueden ir más íntimamente ligados el uno al otro; eso lo demuestra el artista de origen Canadiense Trevo Wheatley; el cual, ha realizado unas visualmente impresionantes esculturas inspiradas en la…

notifications Recién publicamos
close