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

play_circle_outline The Defenders, la nueva serie de Netflix de super heroes estrena su ultimo trailer

The Defenders, la nueva serie de Marvel que ha levantado mucho animo entre la comunidad y los fanáticos de Marvel por fin ha estrena su ultimo trailer. En este nuevo trailer porfió podemos ver trabajar…

close

El aterrador trailer en realidad virtual de It ya esta aquí

It o Eso es la segunda adaptación de la novela publicada en 1986 de Stephen King; la cual, se volvió famosa al tornarse un fiel representante de los miedos de los niños de esa época….

close

Creativa campaña gráfica usando Comics contra las ETS

Las campañas que buscan crear conciencia sobre los riesgos de las enfermedades de transmisión sexual suelen tener como contenido imágenes de jóvenes arrepentidos o inclusive de los efectos que estas producen; lo cual, ha dejado…

close

Spotify está eliminando música relativa a la ‘supremacía blanca’

Los noticiarios y las redes sociales no dejan de hablar del ataque de odio originado en Charlottesville, Virginia; en el cual, un grupo de manifestantes en favor de la “Supremacía Blanca” se tornará violento. Derivado de…

close

Perturbadoras ilustraciones de personajes animados por Wil Hughes

El día de hoy quiero compartir con ustedes unas geniales ilustraciones realizadas por el ilustrador y artista Will Hughes; el cual, ha realizado una obra hiperrealista basada en diversos personajes animados provenientes de la cultura…

close

3, 2, 1… Photoshop!, el tutorial de Adobe Photoshop para principiantes

Adobe siempre busca ayudar a sus usuarios a explotar todas las caracteristicas de sus productos, por ello, continuamente esta lanzando tutoriales para ayudar a retomar el camino correcto o para orientar a los usuarios con…

notifications Recién publicamos
close