Advertisement
  1. Code
  2. PHP

Potencia tu CSS con PHP en el fondo

Scroll to top
Read Time: 13 mins

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

Cascading Style Sheets es un lenguaje de hojas de estilo de presentación. En ese sentido, no tiene mucha de la funcionalidad que muchos desarrolladores quieren para satisfacer sus instintos de programador. Hoy, repasaremos cómo potenciar tu CSS poniendo un poco de PHP en el fondo.

Detalles del tutorial

  • Programa: Apache, PHP
  • Versión: n/a
  • Dificultad: Intermedia
  • Tiempo estimado de finalización: 20 minutos

Introducción

El uso de CSS para potenciar un sitio web es un requisito en la web contemporánea para sitios web que no son Flash, y por una buena razón. CSS es poderoso. Puede hacer o deshacer un sitio web (aunque generalmente IE6 es el que rompe). Incluso con su utilidad, tanto los diseñadores como los desarrolladores han deseado más del lenguaje desde su inicio hace más de doce años con la Recomendación CSS Nivel 1. Hoy, revisaremos algunas formas de potenciar tu CSS con PHP en el fondo.

Supercharging XHTMLCSSSupercharging XHTMLCSSSupercharging XHTMLCSS

Nota: No voy a discutir a favor o en contra del concepto de Variable CSS y/o Constantes CSS. Este artículo está escrito con la suposición de que tomarás una decisión informada con respecto a estos una vez que se te presente lo que puede hacer. Este artículo enseña cómo configurarlos y usarlos, pero no aborda la controversia en su totalidad.

Configurando las cosas

Antes de que comience la sobrealimentación, tenemos que asegurarnos de que tengas los requisitos adecuados para hacerlo. Repasaremos dos métodos para hacer que tu CSS funcione con PHP, uno que sea corto y agradable, y otro que sea un poco más elegante y menos notable para el usuario. Ambos tienen el mismo requisito básico de un servidor que ejecuta PHP. La versión más elegante requiere un poco más:

  1. Apache (ejecutando PHP, obviamente)
  2. Un archivo .htaccess editable

Configuración del método simple

Los navegadores web no son tan exigentes con las extensiones de archivo cuando se trata de la etiqueta de enlace HTML. Los que son quisquillosos son los datos de encabezado que recibe para ese archivo. Lo que eso significa es que puedes vincular un archivo *.php con los datos de encabezado adecuados en lugar de un archivo *.css, y el navegador interpretará el resultado como CSS estándar. Para hacerlo, agrega el encabezado PHP que le dice a Apache que genere el archivo como CSS:

Luego, simplemente enlaza el archivo PHP como lo harías normalmente:

Ya que hiciste esto, puedes, en teoría, pasar a la siguiente sección del tutorial que trata sobre las variables y constantes CSS, si lo quieres; sin embargo, cualquiera que vea tu fuente verá que tienes un archivo PHP donde debería estar un archivo CSS. Además, el hecho de que el navegador interprete el resultado correctamente no significa que necesariamente hará otras cosas como almacenar en caché el archivo en el navegador. Para arreglar esto, pasamos a la versión un poco más elegante.

Configuración del método elegante

Apache viene con una gran cantidad de trucos .htaccess. Este es uno de ellos. Le diremos a Apache que interprete todos los archivos CSS en una determinada carpeta como archivos PHP, y el navegador web (y tus usuarios) no sabrán, en términos generales, que lo estás haciendo. Lo primero que debes hacer es colocar los datos del encabezado en tu archivo CSS, al igual que el Método simple:

Luego, en lugar de guardar el archivo CSS como un archivo *.php, lo guardas como un archivo *.css y lo colocas en una carpeta para CSS (en nuestro ejemplo, ~/css/). Una vez que hayas hecho esto, crea un archivo *.htaccess en esa carpeta y agrega lo siguiente:

Este fragmento de código le dice a Apache que interprete todos los archivos CSS de la carpeta con el archivo *.htaccess con el controlador de script PHP. Si no tienes la capacidad de agregar esto a una sola carpeta o si necesitas que sea para todo el servidor, también puedes agregarlo al archivo de configuración del servidor httpd.conf para Apache. Para hacerlo, querrás agregar el fragmento de código anterior justo debajo del grupo de declaraciones AddType y AddHandler (como estas de uno de mis servidores):

Solo recuerda que si agregas esto a tu archivo de configuración del servidor httpd.conf, CADA archivo *.css en el servidor ahora debe tener el encabezado PHP para texto/css antepuesto. Es por eso que mi recomendación es agregarlo a través de .htaccess

Inicia el motor con variables CSS

De la encuesta de rendimiento promedio de los 100 mejores blogs:

Realizamos una prueba en los 100 mejores blogs para archivos CSS externos y tamaño total. El blog promedio de los 100 mejores utiliza 4 archivos CSS externos (@imports incluidos) con un tamaño de archivo total promedio de 43.1K (sin comprimir). El número de archivos CSS externos varió de 1 a 18. El tamaño total de CSS varió de 0.2K a la icnreíble cantidad de 307K. Ten en cuenta que este análisis no incluye CSS interno dentro de los archivos (X)HTML. Incluye archivos CSS anidados llamados con directivas @import.

Eso es mucho CSS. ¿Por qué? Muchas veces se debe a que el CSS se entrega sin comprimir y no optimizado. El sospechoso más probable es el exceso de CSS y el código mal mantenido. Una opción popular para mejorar la capacidad de mantenimiento del código es implementar variables CSS a través de PHP.

Lo que esto significa es que en lugar de tener CSS como este (sí, esto produciría una aberración de diseño, pero es bueno para ilustrar el punto):

Podrías tener CSS así:

Ten en cuenta que los nombres largos de las variables son solo para fines ilustrativos. Obviamente, estas variables pueden ser tan largas o tan cortas como quieras, y las variables más cortas hacen que los tamaños de archivo sean más pequeños.

En el ejemplo anterior, utilizamos variables básicas para configurar un esquema de color monocromático que luego podría usarse en todo el sitio web con otros estilos. Estas variables podrían haberse intercambiado fácilmente con $color01, $color02, $color03, entre otros, para producir efectos similares. A menudo, los clientes le preguntan a los diseñadores y desarrolladores web front-end "Oye, ¿puedes hacer que todo el texto sea un poco más oscuro?" o "¿Puedes hacer que todo el texto sea un poco más grande?" Si bien el uso de variables como esta no siempre será la mejor solución, a menudo reduciría el tiempo de mantenimiento al usar muchos sistemas de plantillas y plataformas de blogs (WordPress, Moveable Type, Expression Engine, entre otros) o CMS corporativos (Drupal, Joomla, Bitrix, entre otros).

Un método alternativo para almacenar las variables es almacenar los datos en matrices asociadas (que es mi método preferido), lo que produce un código más parecido al siguiente:

Cálculos en CSS

Una vez que hayas configurado las cosas para usar PHP con tu CSS, puedes hacer algunas cosas interesantes como cálculos. Supongamos que quieres configurar un sistema en el que proporciones un montón de DIV en la pantalla, cada uno con un tipo diferente de elemento en su interior. Cada tipo de elemento (es decir, img, p, blockquote, entre otros) tiene una altura y anchura únicas controladas a través de CSS, y quieres que la cantidad de margen se base en estos valores de la siguiente manera:

Diagram of Padding Element MeasurementsDiagram of Padding Element MeasurementsDiagram of Padding Element Measurements

En este escenario, quieres configurar una cuadrícula estandarizada que contenga tres tipos diferentes de elementos (img, p y blockquote) encapsulados en dos contenedores diferentes (div y li). Cada DIV tiene que tener 550px de ancho y 250px de alto, cada LI tiene que tener 600px de ancho y 300px de alto, y cada uno de los tipos de elementos tiene una altura y anchura diferentes. El posicionamiento de los elementos en el interior debe ser un punto muerto. Con el tiempo, es probable que sea necesario cambiar las alturas y anchos de los diferentes DIV/LI y elementos. Puedes ingresar manualmente la cantidad de margen para cada uno de los diferentes elementos y/o usar información de clase adicional en los DIV del contenedor para agregar la cantidad adecuada de relleno, pero esto no es tan útil para realizar cambios rápidos, como los que busca alguien que está creando prototipos en el navegador o que tenga 200 de estos diferentes elementos para los que tendrían que modificar datos.

Paso 1 - La estructura

Primero, configuramos el contenido XHTML que diseñaremos así:

Paso 2 - El encabezado PHP y las declaraciones de variables

Luego, configuramos el archivo PHP/CSS que usaremos para aplicarle estilo al XHTML. Aquí es donde declaramos los tamaños estándar de los diferentes elementos para su uso a lo largo de la página.

Paso 3 - El CSS con variables y cálculos PHP

Después, continuamos con el archivo PHP del Paso 2 y utilizamos las variables que configuramos en los cálculos. Además, establecemos los valores calculados de MarginX y MarginY de los diferentes elementos para reducir el número de cálculos necesarios.

Lo que esto nos permite hacer ahora es cambiar el tamaño de los elementos una vez en la parte superior del archivo y no volver a calcular 12 valores de margen (24 si los valores de margen eran asimétricos). Comprende que no estoy sugiriendo que esto se utilizará en cada uno de tus proyectos en el futuro, pero este tipo de técnica tiene ventajas definitivas sobre el método CSS "estático" estándar.

Reducir ese CSS

Como se mencionó anteriormente, CSS puede ser bastante grande. Una cosa que puedes hacer para reducir el tamaño de CSS es gzipping automáticamente tus archivos CSS. Para hacer esto, tienes dos opciones sobre cómo hacerlo: directamente desde Apache usando mod_gzip / mod_deflate o usar los métodos de compresión incorporados de PHP, que haremos aquí.

Paso uno: configurar el fragmento de Gzipping

Dentro de nuestro archivo CSS, ya tenemos un fragmento de PHP que configura el encabezado:

Todo lo que tenemos que hacer ahora, es agregar una sola línea de código configurando un búfer de salida para usar ob_gzhandler antes de la declaración de encabezado de la siguiente manera:

Cabe señalar que hay otras formas de hacer compresión gzip y todas tienen sus beneficios y deficiencias. Mi método preferido es usar mod_deflate como mencioné anteriormente, pero no todos los diseñadores y desarrolladores tienen esa opción.

If($usingPHP==TRUE) { return 'Felicidad'; }

Agregar lógica de programación a un lenguaje de hoja de estilo no es nada nuevo. Muchos sitios web determinan qué hojas de estilo utilizan en función de la URL, el estado de inicio de sesión o incluso la fecha. Este es un ejemplo simple que se puede aplicar fácilmente a blogs y sitios de comercio electrónico (entre otros). Supongamos que tienes una etiqueta h1 que se reemplaza utilizando el método de reemplazo de imagen de Phark descrito por el siguiente CSS:

Al agregar un poco de PHP en la mezcla para determinar la fecha en que se carga el CSS, puedes especificar una imagen diferente para un día festivo como suele hacer Google con sus Doodles de Google (aunque utilizan una solución tecnológica diferente para hacerlo):

Normal Logo becomes Holiday LogoNormal Logo becomes Holiday LogoNormal Logo becomes Holiday Logo

Este es solo un ejemplo súper simple. Tu CSS está a la espera de ser amplificado por PHP. Lo que hagas con él puede variar de persona a persona. Uno de mis usos personales es usarlo como una forma de oscurecer e incrustar archivos @font-face usando cadenas de URI de datos y verificando al remitente que solicita el archivo similar a partes de la tecnología que utiliza Typekit:

Controversia de las variables CSS

El uso de variables en CSS, sin importar los pros y los contras, ha sido un tema controvertido durante años. Como dije al principio de este artículo, no voy a argumentar a favor o en contra del concepto de variables CSS o constantes CSS. Algunos diseñadores y desarrolladores muy respetados han argumentado en contra, mientras que otros han argumentado a favor. Espero, por el bien de una mejor web, que una solución efectiva solo de CSS ocurra más temprano que tarde. Mientras tanto, aquellos de nosotros que admitimos variables y constantes CSS podemos confiar en nuestros lenguajes del lado del servidor, mientras que aquellos que no los admitan simplemente continuarán con normalidad.

¿Qué ideas se te pueden ocurrir?

Siempre estoy buscando formas nuevas e innovadoras de potenciar mi CSS con PHP. ¿Cuáles son algunos de tus escenarios de casos de uso favoritos para mezclar CSS con PHP?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.