Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Cómo agregar variables a tus archivos CSS

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Probemos algo diferente en nettuts+ hoy. Cualquier diseñador que haya trabajado con archivos CSS grandes estará de acuerdo en que su principal debilidad es su incapacidad para usar variables. En este artículo, aprenderemos cómo implementar variables usando PHP y el mod rewrite URL de Apache.


Prefacio

Esta técnica es algo simple. Le pediremos a Apache que redirija cualquier hoja de estilo a un script PHP específico. Esta secuencia de comandos abrirá la hoja de estilo y la leerá línea por línea para encontrar y reemplazar cualquier variable definida por el usuario. Finalmente, el contenido analizado se mostrará como CSS puro; Los navegadores no notarán la diferencia. Para cerrar este tutorial, también veremos cómo almacenar en caché el resultado procesado para evitar el uso innecesario de la CPU.

Tenga en cuenta que se esperan algunos conocimientos básicos de PHP (OOP), Apache y HTTP.

Requisitos:

  • Apache con Rewrite mod activado
  • PHP 5

Paso 1 - Crear el Proyecto

Primero creamos nuestra estructura de proyecto simple. Agregue un archivo index.html a la raíz de su proyecto.

Ahora, cree un archivo CSS con las siguientes variables y colóquelo en una carpeta "css"

Finalmente, cree un archivo PHP en blanco llamado enhanced_css.php y un archivo .htaccess en blanco. Este último archivo anula la configuración predeterminada del servidor y se aplica a la carpeta y sus subcarpetas.

Ahora nuestro proyecto debería verse así:


Paso 2 - Redirigir los archivos CSS a un script PHP

Queremos redirigir cualquier URL con una extensión CSS a nuestro script PHP. El servidor Apache nos permite hacer esto utilizando el mod de reescritura de URL.
Primero, asegúrese de que los módulos "rewrite_module" estén activos en su servidor. Vaya y encuentre el archivo httpd.conf su carpeta de Apache. Edítalo y busca esta línea:

Si es necesario, elimine el comentario eliminando el “#” que se adjunta, y reinicie Apache para asegurarse de que sus ajustes de configuración estén activos.

Ahora, edite su archivo .htaccess y agregue las siguientes líneas.

Guardalo. Como se mencionó anteriormente, las líneas anteriores le piden a Apache que capture todas las URL con la extensión .css y las redirija a "enhanced_css.php". La ruta del archivo CSS original se pasa como un parámetro 'css'.

Por ejemplo:

Será redirigido a:

Nota:

Algunas soluciones de alojamiento no permiten que sus configuraciones sean anuladas por las de los usuarios. Si es así, los enlaces a las hojas de estilo en el código HTML deben reemplazarse manualmente.

En tales casos, tendrá que reemplazar:

con:


Paso 3 - Analizar el archivo CSS con PHP

Ya que los archivos CSS son redirigidos a nuestro script PHP, construyamos una clase llamada "Enhancedcss" para leerlos, buscar y reemplazar variables, luego mostrar los contenidos como CSS puro. Se instanciará nuestra clase al pasar $_GET['css'] al constructor. Recuerde la redirección de.htaccess. $_GET contiene la ruta a la hoja de estilo actual.

La implementación básica de la clase se compone de cuatro métodos. Más adelante, añadiremos un método de caché.

El constructor

Nada sexy aquí. Verificamos si existe el archivo CSS solicitado. Si no, el script devuelve un error de http 404. La ruta del archivo CSS se mantiene en la propiedad $this->cssFile para calcular el nombre del archivo de caché más adelante.

El Método Parse

Este método abre el archivo CSS y lo lee línea por línea.

La función file se utiliza aquí. Puede ser útil porque abre un archivo y devuelve el contenido como una matriz de líneas. Cada línea se lanza al findAndReplaceVars que procesa las variables. El contenido analizado se devuelve.

El método FindAndReplace

Este método es el principal caballo de batalla de nuestra clase. Encuentra las definiciones de variables, almacena sus valores en una matriz. Cuando se encuentra una variable y si su valor existe, se reemplaza por el valor.

Un montón de código aquí. Vamos a revisarlo en detalle.

Aquí, aplicamos una expresión regular a la línea actual. Esta expresión coincide y extrae patrones como $variable:$value (y algunas variantes) o $variable en la línea actual. No voy a ir más lejos aquí. Las expresiones regulares son un tema complejo que merece un tutorial propio. La función Preg_match_all devuelve todas las coincidencias.

Por ejemplo, la tercera línea del archivo CSS de nuestro proyecto -

- devolverá esta matriz:

Suponemos que $vars[0] contiene la coincidencia completa, $vars[1] contiene los nombres de las variables y $vars[3] contiene los valores. Vamos a organizar la matriz para que quede más claro.

Ahora es cristal.

Contamos cuántas variables se han encontrado en la línea actual.

De esta manera podemos pasar por cada entrada de nuestra matriz de variables. Para aclarar las cosas, establecemos algunas nuevas variables para manejar el nombre y el valor.

Definiciones de Variables

Si $varValue no está vacío, estamos frente a una definición variable. Así que tenemos que almacenar este valor en la propiedad $this->values.

Tenga en cuenta que volvemos a pasar el valor de la variable en el método findAndReplaceVars. De esta manera, también se procesarán otras variables potenciales.
Los valores se almacenan en la matriz $this->values ​​con el nombre de la variable como la clave. Al final de la secuencia de comandos, la matriz $this->values se ve así.

Aplicaciones de variables

Si $varValue está vacío, estamos frente a una aplicación variable. Verificamos si esta variable existe en la matriz de valores. Si lo hace, reemplazamos el nombre de la variable por su valor.

Este reemplazo puede parecer anormalmente complicado. En realidad no, este reemplazo se encarga de reemplazar la $variable solo si va seguida de un no carácter (\W) o un final de línea (\z).

Finalmente, eliminamos toda la coincidencia para mantener la hoja de estilo limpia y válida. Se devuelve la línea procesada.

El método de visualización

Este método muestra la hoja de estilo analizada. Para ser servido en el navegador como contenido CSS, el encabezado se establece en el tipo de contenido text/css.


Paso 4 - Guarda en caché el resultado

En este punto, todo está funcionando perfectamente. Sin embargo, la operación puede consumir mucho CPU cuando se usa con sitios web más grandes.

Después de todo, no necesitamos analizar los archivos CSS cada vez que el navegador lo necesita. El proceso solo debe ejecutarse la primera vez para crear el caché, o si el archivo CSS original se ha modificado desde la última operación de almacenamiento en caché. De lo contrario, el resultado renderizado previamente puede ser reutilizado. Entonces, agreguemos una solución de caché a nuestro script.

Agregue una nueva carpeta llamada caché al proyecto. Si es necesario, otorgue a esta carpeta el derecho de ser escrito aplicando un chmod 777. Ahora nuestro proyecto debería tener este aspecto:

El método Cache

Hay que añadir un nuevo método. Su función será:

  • leer el archivo de caché si existe.
  • Crear y almacena los resultados renderizados.
  • actualizar el archivo caché existente si el archivo CSS ha sido modificado.

Toda la lógica es manejada por el siguiente método:

Vamos a explicar este código. El nombre del archivo de caché se calcula a partir del nombre del archivo CSS original previamente guardado en la propiedad $this->cssFile. Finalmente, usamos la función urlencode.

De esa manera un archivo CSS como

será cacheado como

Necesitamos verificar si el archivo de caché ya existe, (file_exists) y si es así, verificar si su fecha de creación no es anterior a la fecha de modificación (filemtime) del archivo CSS.

De lo contrario, creamos/recreamos el archivo cache.

Ahora el resto de la clase debe lidiar con este nuevo método. Dos métodos necesitan ser modificados.

El método de análisis ahora comprueba el caché antes de ejecutar todo el proceso. Si no hay caché disponible, se analiza el archivo CSS, de lo contrario se devuelve el contenido almacenado en caché.

Finalmente, el método muestra el contenido correcto (nuevo o en caché) proporcionado por el método de almacenamiento en caché.

Cache del Navegador

Por razones de seguridad (sesiones, contenidos dinámicos), los navegadores no mantienen los resultados de PHP en su caché. Un archivo CSS real hubiera sido
cacheado pero no el resultado de nuestro script. Tenemos que lidiar con el navegador para emular el comportamiento de un archivo CSS real. Vamos a añadir algunas líneas al constructor.

Copiamos la última fecha de modificación del archivo CSS original a nuestro resultado en el encabezado.
Básicamente, los navegadores y servidores intercambian los encabezados antes de servir los datos.
Cuando el navegador tiene una copia de una página en su caché, envía una solicitud HTTP_IF_MODIFIED_SINCE al servidor
con la fecha dada previamente por el header('Last-Modified', ...) el día en que se almacenó en caché. Si las fechas coinciden, el contenido
está actualizado y no necesita ser recargado; por lo que enviamos una respuesta 304 Not Modified y salimos del script.

Una forma más corta sería simplemente agregar header('Cache-Control: max-age=3600'); al archivo. El contenido será cacheado
1 hora (3600 segundos) por cualquier navegador.


Conclusión

¡Hecho! Ahora puede comprobar una de sus hojas de estilo en su servidor. Por ejemplo, http://localhost/myproject/css/styles.css

Se convierte en:

Espero que disfrutes este tutorial.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.