Share
Cascading Style Sheets es un lenguaje de hojas de estilo de presentación. En ese sentido, no tiene muchas de las funcionalidades que muchos desarrolladores desean para satisfacer sus instintos de programador. Hoy, vamos a repasar cómo sobrecargar tu CSS al poner algo de PHP debajo del capó..
El uso de CSS para encender 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 potente. Puede hacer o deshacer un sitio web (aunque generalmente IE6 está rompiendo). 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 de nivel 1 de CSS. Hoy vamos a revisar algunas maneras de Sobrealimenta tu CSS con PHP bajo el capó.
Nota: No voy a estar a favor o en contra del concepto de CSS Variable y / o CSS Constantes. Este artículo está escrito con el supuesto de que tomará una decisión informada con respecto a estos una vez que se le presente lo que puede hacer. Este artículo enseña cómo configurarlos y usarlos, pero no aborda la controversia en su totalidad..
Antes de que comience la sobrecarga, debemos asegurarnos de que tiene los requisitos adecuados para hacerlo. Vamos a repasar dos métodos para hacer que tu CSS funcione con PHP, uno que es corto y dulce, y uno que es un poco más elegante y menos perceptible 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:
Los navegadores web no son tan exigentes con las extensiones de archivo cuando se trata de la etiqueta de enlace HTML. Lo que les interesa son los datos de encabezado que recibe para ese archivo. Lo que significa es que puede vincular un archivo * .php con los datos de encabezado adecuados en lugar de un archivo * .css, y el navegador interpretará el resultado como lo hace el CSS estándar. Para hacerlo, agregue el encabezado de PHP que le dice a Apache que genere el archivo como CSS:
Luego, simplemente enlace al archivo PHP como lo haría normalmente:
Ahora que ha hecho esto, puede, en teoría, pasar a la siguiente sección del tutorial que trata sobre las variables y constantes de CSS, si lo desea; Sin embargo, cualquiera que vea su fuente verá que tiene 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 el almacenamiento en caché del archivo en el navegador. Para solucionar este problema, pasamos a la versión ligeramente más elegante..
Apache viene con un gran número de trucos .htaccess. Este es uno de ellos. Vamos a decirle a Apache que interprete todos los archivos CSS de una carpeta determinada como archivos PHP, y el navegador web (y sus usuarios), en general, no sabrán que lo está haciendo. Lo primero que debe hacer es colocar los datos del encabezado en su archivo CSS, al igual que el Método simple:
Luego, en lugar de guardar el archivo CSS como un archivo * .php, lo guarda como un archivo * .css y lo coloca en una carpeta para CSS (en nuestro ejemplo, ~ / css /). Una vez que haya hecho esto, cree un archivo * .htaccess en esa carpeta y agregue lo siguiente:
Aplicación AddHandler / x-httpd-php .css
Este fragmento le dice a Apache que interprete todos los archivos CSS en la carpeta con el archivo * .htaccess con el controlador de script PHP. Si no tiene la capacidad de agregar esto a una sola carpeta o si necesita que esté en todo el servidor, también puede agregarlo a la carpeta. httpd.conf Archivo de configuración del servidor para Apache. Para hacerlo, desea agregar el fragmento anterior justo debajo del grupo de AddType y AddHandler Declaraciones (como estas de uno de mis servidores):
Aplicación AddType / x-httpd-php .php .php3 .php4 .php5 Aplicación AddType / x-httpd-php-source .phps AddHandler cgi-script .cgi .pl
Solo recuerda que si agregas esto a tu httpd.conf archivo de configuración del servidor que CADA El archivo * .css en el servidor ahora debe tener el encabezado de PHP para texto / css ante él. Es por eso que mi recomendación es agregarlo vía .htaccess.
De la Encuesta de Rendimiento de Weblog de Top 100:
Realizamos una prueba en los 100 blogs principales para archivos CSS externos y tamaño total. El promedio de los 100 blogs más importantes utiliza 4 archivos CSS externos (se incluyen @imports) 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 307K. Tenga en cuenta que este análisis no incluye CSS interno dentro de (X) archivos HTML. Incluye archivos CSS anidados llamados con directivas de importación.
Eso es mucho CSS. ¿Por qué es esto? Muchas veces es porque el CSS se entrega sin comprimir y no está optimizado. El sospechoso más probable es el código inflado y mal mantenido de CSS. 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 un CSS como este (sí, esto produciría una aberración del diseño, pero es bueno para ilustrar el punto):
cuerpo color: # 000; fondo: #fff; tamaño de fuente: 10px; div # content background: #ccc; tamaño de letra: 1.1em; div # barra lateral color: #fff; fondo: # 000; tamaño de letra: 1.0em; div # footer color: # 555; fondo: #ccc;
Podrías tener CSS como este:
color del cuerpo: ; fondo: ; tamaño de fuente: px; div # content background: ; tamaño de fuente: px; div # barra lateral color: ; fondo: ; tamaño de fuente: px; div # footer color: ; fondo: ;
Tenga en cuenta que los nombres de variable largos son solo para fines ilustrativos. Obviamente, estas variables pueden ser tan largas o tan cortas como desee, y las variables más cortas hacen que los archivos sean más pequeños..
En el ejemplo anterior, hemos utilizado variables básicas para configurar un esquema de color monocromático que luego podría usarse en otros estilos en todo el sitio web. Estas variables podrían haberse intercambiado fácilmente con $ color01, $ color02, $ color03, etc. para producir efectos similares. A menudo, los diseñadores 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 todo el texto 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 utilizar muchos sistemas de plantillas y plataformas de blogs (WordPress, Moveable Type, Expression Engine, etc.) o CMS corporativos (Drupal, Joomla, Bitrix, etc.). ).
Un método alternativo para almacenar las variables es almacenar los datos en matrices asociadas (que es mi método preferido), que produce un código más parecido al siguiente:
'# 000', 'color02' => '#fff', 'color03' => '#ccc', 'color04' => '# 555', 'baseTextSize' => '10'); ?> cuerpo color: ; fondo: ; tamaño de fuente: px; div # content background: ; tamaño de fuente: px; div # barra lateral color: ; fondo: ; tamaño de fuente: px; div # footer color: ; fondo: ;
Una vez que haya configurado las cosas para usar PHP con su CSS, puede hacer algunas cosas interesantes como cálculos. Supongamos que desea configurar un sistema en el que proporcione un montón de DIV en pantalla, cada uno con un tipo diferente de elemento dentro. Cada tipo de elemento (es decir, img, p, blockquote, etc.) tiene una altura y anchura únicas controladas a través de CSS, y desea que la cantidad de margen se base en estos valores, como por ejemplo:
En este escenario, desea 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 debe tener 550px de ancho y 250px de altura, cada LI debe tener 600px de ancho y 300px de altura, y cada uno de los tipos de elementos tiene una altura y anchura diferentes. El posicionamiento de los elementos en el interior debe ser punto muerto. Con el tiempo, probablemente será necesario cambiar las alturas y los anchos de los diferentes DIV / LI y elementos. Puede 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 apropiada de relleno, pero esto no es tan útil para cambios rápidos, como los que busca alguien que es Prototipado en el navegador o que tenga 200 de estos diferentes elementos para los cuales tendrían que modificar los datos..
Primero, configuramos el contenido XHTML que vamos a diseñar como:
Lorem ipsum dolor sit amet tellus.
Etiam quis nulla pretium et.
Lorem ipsum dolor sit amet tellus.
Etiam quis nulla pretium et.
A continuación, configuramos el archivo PHP / CSS que vamos a utilizar para diseñar el XHTML. Aquí es donde declaramos los tamaños estándar de los diferentes elementos para usar en toda la página.
Accentsconagua
'550', 'altura' => '250',); $ liData = array ('width' => '600', 'height' => '300',); $ blockquoteData = array ('width' => '440', 'height' => '100'); $ imgData = array ('width' => '450', 'height' => '150'); $ pData = array ('width' => '480', 'height' => '130'); ?> A continuación, continuamos con el archivo PHP del Paso 2 y utilizamos las variables que establecemos 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..
div ancho: px; altura: px; li ancho: px; altura: px; div blockquote ancho: px; altura: px; margen: px px; div img ancho: px; altura: px; margen: px px; div p ancho: px; altura: px; margen: px px; li blockquote ancho: px; altura: px; margen: px px; li img ancho: px; altura: px; margen: px px; li p ancho: px; altura: px; margen: px px;
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). Comprenda que no estoy sugiriendo que esto se use en cada uno de sus proyectos en el futuro, pero este tipo de técnica tiene ventajas definitivas sobre el método CSS "estático" estándar..
Como se mencionó anteriormente, CSS puede ser bastante grande. Una cosa que puedes hacer para reducir el tamaño de CSS es enviar automáticamente tus archivos CSS. Para hacer esto, tiene dos opciones para hacerlo: directamente desde Apache usando mod_gzip / mod_deflate o use los métodos de compresión incorporados de PHP, que haremos aquí.
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 que establezca un búfer de salida para usar ob_gzhandler antes de la declaración del encabezado de esta manera:
Se debe tener en cuenta que existen otras formas de realizar la compresión gzip y que todas tienen sus ventajas y defectos. Mi método preferido es usar mod_deflate como se mencionó anteriormente, pero no todos los diseñadores y desarrolladores tienen esa opción.
Agregar lógica de programación a un lenguaje de hojas de estilo no es nada nuevo. Muchos sitios web determinan qué hojas de estilo utilizan según la URL, el estado de inicio de sesión o incluso la fecha. Este es un ejemplo simple que puede aplicarse fácilmente a blogs y sitios de comercio electrónico (entre otros). Supongamos que tiene una etiqueta h1 que se reemplaza usando el método de reemplazo de imagen de Phark descrito por el siguiente CSS:
h1 ancho: 300px; altura: 80px; texto-sangría: -9999px; fondo: url (images / logo.png) no-repetir;
Al agregar un poco de PHP en la mezcla para determinar la fecha en que se carga el CSS, puede especificar una imagen diferente para un día festivo, como suele hacer Google con sus Doodles de Google (aunque usan una solución tecnológica diferente para hacerlo):
h1 ancho: 300px; altura: 80px; texto-sangría: -9999px; fondo: url () no repetir
Este es solo un ejemplo super simple. Tu CSS solo está esperando ser amplificado por PHP. Lo que haces con él puede variar de persona a persona. Uno de mis usos personales es usarlo como una forma de ocultar e incrustar archivos de @ font-face usando cadenas URI de datos y verificar el referente que solicita el archivo similar a partes de la tecnología que usa Typekit:
@ font-face font-family: FontName; src: local ("FontName"), url () formato ("opentype"); 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, en aras de una mejor web, que una solución efectiva solo para CSS ocurra más pronto que tarde. Mientras tanto, aquellos de nosotros que admitimos variables y constantes de CSS podemos confiar en nuestros lenguajes del lado del servidor, mientras que aquellos que no los admiten simplemente continuarán con la normalidad..
Siempre estoy buscando formas nuevas e innovadoras de sobrecargar mi CSS con PHP. ¿Cuáles son algunos de sus escenarios de casos de uso favoritos para mezclar CSS con PHP??
