Variación en los CSS usando PHP
Como muchos de vosotros sabreis el CSS (Hojas de estilo en cascada) es un lenguaje que carece de variables. En david walsh blog se ha pensado en tratar de hacer el lenguaje mas dinámico.
El CSS
En cualquier archivo CSS nos podemos encontrar algo parecido a esto:
- * { margin:0; padding:0;}
- body { color:$body_text_color; font-size:$body_font_size;}
Este pequeño script lo hemos llamado default.css. Para aquellos que no esten familiarizados con el PHP, decir que cualquier cadena a la que se anteponga el simbolo $ es una variable.
El PHP
- /* obtenemos el stylesheet */
- $stylesheet = @is_file($_GET[’stylesheet’]) && strtolower(substr(strrchr($file_name,’.’),1)) == ’css’ ? $_GET[’stylesheet’] : ’default.css’;
- /* colocamos la información de la cabecera */
- //saldra como un CSS
- header(’Content-type: text/css’);
- // damos una fecha de caducidad
- $days_to_cache = 10;
- header(’Expires: ’.gmdate(’D, d M Y H:i:s’,time() + (60 * 60 * 24 * $days_to_cache)).’ GMT’);
- /* colocamos la información dinámica */
- //información por defecto del CSS
- $default = array(
- ’body_font_size’ => ’16px’,
- ’body_text_color’ => ’#00f’
- );
- //información de la variable roja de CSS
- $red = array(
- ’body_font_size’ => ’10px’,
- ’body_text_color’ => ’#f00’
- );
- /* extraemos la información de las propiedades del array */
- extract($_GET[’theme’] && ${$_GET[’theme’]} ? ${$_GET[’theme’]} : $default);
- /* cargamos el stylesheet */
- $content = preg_replace(’/$([w]+)/e’,’$1’,@file_get_contents($stylesheet));
- /* lo ejecutamos*/
- echo $content;
Tratemos de entender que es lo que hace este script:
- Comprobaremos si tenemos un archivo de hojas de estilos. Si no es asi,usaremos el CSS por defecto, default.css. También se comprobará que es un archivo de extensión ".css" y que existe realmente.
- Colocamos la cabecera, que incluirá: el tipo de contenido, que será del tipo "text/css", y se recomienda una fecha de caducidad, por temas de caché.
- Crearemos los indices con su valor de la variables que vayamos a usar. Estas "clave => valor" son guardadas en Arrays para tener la opción de elegir diferentes temas. En este ejemplo tenemos default y red.
- Comprobaremos si tenemos un archivo del tema. Si no usaremos el de por defecto, $default.
- Leera el archivo y reemplazará todas las cadenas que empiecen por $ por el valor especificado en el archivo PHP del tema.
- Realizamos un echo para sacarlo por pantalla y fin de la historia.
El USO
El RESULTADO
- *{ margin:0; padding:0; }
- body{ color:#00f; font-size:16px; }
Y por fin las variables son remplazadas por sus valores en la salida.