Compresión de archivos php gzip. ¿Qué método de compresión debo usar en PHP? ¿Es GZIP el mejor método de compresión?

En este artículo hablaremos de las posibilidades. Menos preprocesador, que debido a algunas fuerzas desconocidas, casi nadie usa. Además, hablaremos sobre la funcionalidad que falta e intentaremos agregarla.

Te sugiero comenzar con un pequeño recordatorio de lo que no debes hacer, incluso si realmente lo deseas. Eche un vistazo al marco Alesya, desarrollado por un amigo que enseña Less a otras personas. Intente observar de cerca el archivo ./core/functions.less . Aunque no, no sigas el enlace, sólo mira la captura de pantalla de una pequeña parte de este archivo. Cuando lo vi por primera vez, simplemente me quedé en shock.

La justificación es que los ciclos son muy lentos, como resultado, la velocidad de traducción de Less en CSS disminuye y el tiempo de traducción aumenta. Pentium 4? Sin ofender, pero es frustrante.

Daré un extracto del libro "HTML5 para diseñadores web", escrito por Jeremy Keith, quien no hace mucho se convirtió en el héroe de las páginas públicas de VK:

Supongamos que hay un monstruo malvado en el mundo que odia Internet y a todos los usuarios de Internet. A este caballero probablemente no le importa que incrustar un archivo de audio en una página que comienza a reproducirse automáticamente sea increíblemente grosero y estúpido. Usando el atributo de reproducción automática, puedes satisfacer sus deseos profundamente viciosos.

Si alguna vez usas el atributo de reproducción automática como este, debes saber que te encontraré.

Por tanto, si tú también utilizas Less, debes saber que ya te están buscando y pronto te encontrarán.

Expansión del selector

Tenemos un rompeflujos propio de nuestros días:

Clearfix ( &:antes, &:después ( contenido: " "; mostrar: tabla; ) &:después (claro: ambos; ) )

Y algún selector que implique el uso de clearfix. Por supuesto, puedes usar .clearfix como mezcla y producir una gran cantidad de cosas innecesarias en todas partes, pero el código requerido. Sin embargo, puedes evitar esto utilizando la expansión del selector.

Por ejemplo, así:

Barra de navegación ( &:extend(.clearfix all); ... ) .navbar-collapse ( &:extend(.clearfix all); ... ) .ad ( &:extend(.clearfix all); ... )

Como resultado, nuestro class.clearfix comienza a comunicarse con amigos de varias partes tus estilos, sin compartir líneas adicionales de código con nadie:

Clearfix:antes, .clearfix:después, .navbar:antes, .navbar:después, .navbar-collapse:antes, .navbar-collapse:después, .ad:antes, .ad:después (contenido: " "; mostrar: tabla; ) .clearfix:después, .navbar:después, .navbar-collapse:después, .ad:después ( claro: ambos; )

Por supuesto, no deberías abusar de esto. Honestamente, le aconsejo que use la extensión del selector solo para clearfix y en los casos en que se aplica la regla: "Bueno, es realmente necesario, no puedo hacer nada, de lo contrario será peor". No debe utilizar extensiones de selector cuando se produzcan manipulaciones con estilos de elementos. El error más común y estúpido:

Clase ( color: #fff; fondo: #fff; ) .new-class ( &:extend(.class); ) // .class, // .new-class ( // color: #fff; // fondo: #fff; // )

No puedes hacer eso. Esto es estúpido. Es mejor usar .class como mixin:

Clase ( color: #fff; fondo: #fff; ) .new-class ( .class; ) // .class ( // color: #fff; // fondo: #fff; // ) // .new-class ( // color: #fff; // fondo: #fff; // )

¡Recuerda esto!

Opciones de importación

Eche un vistazo a la sección de documentación "opciones de directiva de importación".

solo daré breve descripción El más importante de estos parámetros:

referencia

Le permite utilizar archivos .less, pero no mostrar su contenido sin una llamada explícita. Muy parámetro útil, si usas Bootstrap como biblioteca y no como framework, es decir:

@import (referencia) "bower_components/bootstrap/less/bootstrap"; .mi-alerta ( .alerta; )

El uso de este parámetro hace posible incluir archivos sin extensión .less. El parámetro no es obligatorio, ya que todo funcionará sin él, pero, sin embargo, si te gusta el orden, te vendrá bien. Este parámetro se puede utilizar al conectar archivos con una extensión distinta a .less, por ejemplo, .variables, .mixins.

Necesitas aplicarlo así:

@import (palabra clave) "nombre de archivo";

CON descripción detallada y se pueden encontrar ejemplos en las páginas de documentación. Entonces, cortésmente, te envío, lector mío, a leer la documentación. Experiencia inolvidable :)

Condicionales

Menos tiene condicionales. Sí, no son completos en comparación con otros preprocesadores, pero aun así su presencia no puede dejar de alegrarnos. Me parecen incluso más convenientes que @if en Sass, aunque no hay ninguna diferencia práctica.

Mixin(@variable) ( & cuando (@variable = 1) ( contenido: "VERDADERO" ) y cuando no (@variable = 1) ( contenido: "FALSO" ) .class-test ( .mixin(1); . mixin (2);

Como resultado, obtendremos el siguiente CSS:

Prueba de clase (contenido: "VERDADERO"; contenido: "FALSO";)

¿Qué acaba de pasar? ¿Magia?

No precisamente. Palabra clave cuando aquí reemplaza el habitual if en todos los lenguajes de programación y tiene solo dos puerta lógica: no - negación, y - simplemente y y listo, no hay nada más. No puedo hacer nada particularmente interesante con esto, pero uso operador condicional para no ser generado código adicional. Una de esas situaciones, por ejemplo, es propiedad de radio de borde en el generador de estilos de botones. ¿Por qué se volvería a especificar una propiedad durante la generación si su valor no influye (0)? - Así es, no es necesario.

Interpolación de variables

Hay un diseño interesante en Less cuando obtenemos el valor de una variable dependiendo de otras.

// Variables @clr-grey-100: #fafafa; @clr-grey-200: #f5f5f5; @clr-red-100: #ffebee; @clr-rojo-200: #ffcdd2; .mixin(@color, @temperatura: 500) ( color: ~"@(clr-@(color)-@(temperatura))"; fondo: e("@(clr-@(color)-@(temperatura) )"); ) .class-test ( .mixin(gris, 100); &-test ( .mixin(rojo, 200); ) )

Este ejemplo llama a un mixin cuyos parámetros son color ( @color) y su temperatura ( @temperatura). A continuación, reunimos todas las variables en una, es decir, en pocas palabras, construimos una nueva variable y obtenemos su valor. El proceso cuando una cadena, relativamente hablando, se convierte en una llamada a una variable es la interpolación de variables.

Tenga en cuenta que en este ejemplo utilizamos llaves después del perro; esto es muy importante.

Producción:

Prueba de clase ( color: #fafafa; fondo: #fafafa; ) .prueba de clase ( color: #ffcdd2; fondo: #ffcdd2; )

Por cierto, no pude encontrar esto en Sass and Stylus. ¿Quizás un lector atento pueda decírmelo? :)

Ciclos

Muchos seguidores Preprocesadores descarados y Stylus insisten en que Less no tiene bucles, pero los hay, aunque no iguales a los de todos los demás. Es simplemente un inconveniente usarlos.

Digamos que tenemos una lista de colores:

@list-red: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c;

Por ejemplo, creemos una clase para cada color:

Generador de color(@index: 1, @color) cuando (@index .submit; )

Interpolación de cadenas La interpolación de cadenas es otra palabra elegante que significa que esto cadena arbitraria se puede almacenar en una variable y luego usarse en un valor de propiedad.

@url: "http://miempresa.com/assets/";imagen de fondo: url("@(url)/sprite.png");
Esto puede resultar útil al crear un marco centralizado.

Escapar A veces es necesario utilizar propiedades o valores que no son CSS válidos (reglas IE). Quizás hayas notado que en el ejemplo sobre gradientes no me preocupé por los usuarios de Internet Explorer.
Si deseas crear un degradado en IE, debes hacer algo como esto:

Filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444");
Este CSS no es válido, por lo que LESS no se compilará. En este caso, puedes escapar de este valor, lo que permitirá que LESS lo omita.

Botón (fondo: -webkit-gradient(lineal, arriba izquierda, abajo izquierda, desde(#666666), hasta(#444444)); fondo: -moz-linear-gradient(arriba, #666666, @color - #444444) ; filtro: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444"";)
Todo lo que tienes que hacer es poner comillas alrededor de la sección y poner una tilde delante. Esta sección no pasará por el procesador LESS y no será descartada.

Importar Al igual que con CSS normal, puedes importar archivos. LESS le permite importar CSS y LESS usando la siguiente sintaxis:

@importar "reset.min.css"; @import "framework.less"; @importar "widgets";
La primera importación es bastante obvia. importa reglas CSS definido en reset.min.css sin procesarlos por el analizador LESS.
La segunda importación insertará el contenido de framework.less y lo tratará como cualquier otra regla MENOS.
La tercera importación funciona igual que la segunda. Si la extensión no está instalada, el preprocesador la considera MENOS archivo ohm

Comentarios Naturalmente, comentarios multilínea están disponibles en LESS de la misma manera que en CSS. LESS también permite el uso de comentarios de una sola línea como en PHP o Javascript, utilizando barras invertidas dobles.

/* Este es mi archivo LESS principal.

Gobierna cómo se ve la mayor parte del sitio. /* cuerpo ( padding:0px; // Esto restablece el relleno del cuerpo )
¿Qué falta? Aunque LESS es sorprendente, todavía existen algunas deficiencias cuando comienzas a usarlo, aunque no son muy perturbadoras.

Una de las características que me gustaría ver es el preprocesamiento (estoy de acuerdo, parece inútil). ¿Recuerda cómo se pueden escapar las cadenas para que no pasen por el analizador? El método actual no permite el uso de degradados con colores cambiables.
Este código funciona muy bien, pero los colores deben estar estrictamente definidos. Si se escapa la línea, las variables no se procesan. Sería bueno tener una opción donde las variables en cadenas con escape se procesen antes de enviarse al archivo CSS.

Conclusión Como con cualquier nueva tecnología o se está abusando del método. ¿Recuerda los logotipos reflectantes y los botones de cristal en los albores de la era Web 2.0?
No es necesario anidar todas las reglas, no es necesario crear variables para todo o un mixin solo para el ancho del marco.
Si no sabe cuándo no utilizar el increíble poder de LESS, su código LESS se volverá tan ilegible como el CSS normal e igual de difícil de mantener. El truco consiste en saber cuándo utilizar estas funciones y métodos, y cuándo utilizar los habituales. CSS antiguo mejor.
Además, desaconsejo utilizar un archivo MENOS. No hay nada de malo en eso, pero no hay razón para cargar un archivo MENOS y procesarlo. Sin duda el script es muy rápido, pero estoy seguro que sin él será más rápido. Normalmente desarrollo todos mis sitios con MENOS, tomo el archivo de salida, lo comprimo y uso un archivo CSS normal.

CSS es un lenguaje simple. Nos permite establecer estilos para elementos HTML usando selectores. Es fácil incluso para principiantes.

Sin embargo, con el tiempo, el tamaño de su proyecto web puede crecer y terminará con una gran cantidad de código CSS duplicado. Si se enfrenta a este problema, es hora de utilizar un preprocesador CSS.

En este tutorial, explicaremos qué es un preprocesador CSS y veremos uno de los más populares: LESS.

¿Qué es un preprocesador CSS?

Los preprocesadores de CSS no reemplazan a CSS. De hecho, los preprocesadores simplemente nos brindan información adicional. funcionalidad, como variables, operadores y funciones, con los que podremos facilitar la creación y gestión de archivos CSS.

Los preprocesadores nos permiten definir propiedades una vez y luego reutilizarlas en nuestro proyecto, lo cual es mucho más funcional que CSS sencillo No puedo hacerlo.

¿Qué es MENOS?

LESS es un preprocesador relativamente nuevo, de aproximadamente 4 años. A menudo se lo compara con SASS, un preprocesador más antiguo. Tanto LESS como SASS tienen sus raíces en el idioma. programación rubí, pero ahora se utilizan mucho más ampliamente. LESS ahora está basado en Javascript.

Las personas que usan LESS pueden crear un conjunto predefinido de colores para su sitio. Pueden definir un estilo particular una vez y luego reutilizarlo cuando sea necesario.

Usando MENOS

Para aprovechar lo que LESS tiene para ofrecer, primero debemos guardar nuestro código CSS en un archivo con la extensión .menos. MENOS es muy fácil de usar. Se ejecuta tanto en el lado del servidor web como del cliente.

Este método sólo funciona en navegadores modernos y sólo es adecuado para su uso en servidor local. Un sitio de producción requiere una compilación previa utilizando Node en un servidor web o varios instrumentos de terceros fabricantes.

Algunas de las herramientas de terceros:

• y muchos otros...

MENOS Sintaxis: Variables

Una de las cosas que se suele repetir en un archivo CSS son los colores. Los mismos colores se repiten en Archivos CSS Para diferentes elementos, encabezados, enlaces, etc.

#encabezado (
color de fondo: #CCCCCC
}
.aparte (
color de fondo: #CCCCCC;
color: #000000;
.barra lateral a(
borde inferior: 1px sólido #CCCCCC;
}

En MENOS, podemos simplemente declarar una variable para almacenar el color, así:

@gris: #CCCCCC;

Y luego reutilícelo así:

#encabezado (
color de fondo: @gris;
}
.aparte (
color de fondo: @gris;
color: #000000;
}
.barra lateral a(
borde inferior: 1px sólido @gris;
}

También podemos usar variables para almacenar otras propiedades como ancho, alto, tamaño de fuente y muchos otros valores que planea reutilizar en diferentes lugares de estilo.

MENOS Sintaxis: Mixins

Las variables son útiles para reutilizar valores individuales, como color, tamaño de fuente. En LESS con mixins podemos usar un conjunto de propiedades de una o más reglas. Los mixins se pueden utilizar, por ejemplo, para definir el estilo del borde, el tamaño de fuente, etc.

borde_arriba_abajo(
borde superior: punteado 1px #000;
borde inferior: sólido 2px #000;
}

En el código anterior, hemos definido los bordes superior e inferior dentro de la clase border_top_bottom. Ahora cuando queramos agregar estos estilos a otros elementos, podemos usarlos así:

#encabezado (
color: #000000;
.border_top_bottom;
}
.contenido a(
color: #000000;
.border_top_bottom;
}

El código anterior generará lo siguiente:

#encabezado (
color: #000000;

}
.contenido a(
color: #000000;
borde superior: punteado 1px #000000;
borde inferior: sólido 2px #000000;
}

Para agregar más flexibilidad, los mixins también nos permitirán pasar variables (aquí llamadas parámetros). Por ejemplo:

Radio del borde (@radio: 5px) (
radio de borde: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

En el ejemplo anterior, hemos especificado un parámetro para el radio. También le dimos un valor predeterminado de 5px, que es opcional. Ahora queremos agregar esto a la clase de botón:

Botón (
.border-radius(6px);
}

Si eliminamos 6px del ejemplo anterior, el radio del borde se establecerá en el valor predeterminado, que se especifica en nuestra clase de radio de borde y es 5px.

MENOS Sintaxis: Anidamiento

Una de las cosas comunes en CSS son los selectores largos, que a menudo tenemos que escribir para diseñar elementos secundarios:

navegación( )
navli ( )
navli a ( )
nav li a: flotar ( )
navli a.activo ( )
nav li a.visitado ( )

Y si tiene varios subniveles del menú desplegable, se vuelve más difícil de entender. En MENOS esto se puede escribir como:

navegación(
li(
a (
&: flotar ( )
& :activo ( )
& :visitado ( )
}
}
}

El carácter "&" se utiliza antes de las pseudoclases en nuestra estructura anidada. El diseño descrito anteriormente es mucho más fácil de entender y muestra la jerarquía exactamente como es.

MENOS Sintaxis: Operaciones

LESS también nos permite realizar operaciones como suma, resta, multiplicación y división de valores numéricos, colores y variables en una hoja de estilo. Digamos que declaramos una variable. relleno, que se aplica a todos nuestros elementos H1. Pero ahora queremos agregar relleno adicional para nuestro encabezado en pagina de inicio. Podemos hacerlo así:

@relleno: 5px;
h1 (
relleno: @padding;
}
h1.título de la página (
relleno: (@relleno * 2);
}

El valor predeterminado se multiplicará por 2, lo que le dará al encabezado de la página principal un relleno igual a 10px. Las operaciones deben realizarse entre paréntesis, pero también pueden funcionar sin paréntesis.

MENOS Sintaxis: Alcance

El alcance en LESS es similar al alcance en otros lenguajes de programación. Las variables y mixins se buscan primero a nivel local y, si no se encuentran, el compilador los buscará en el ámbito principal y así sucesivamente.

@var:rojo;

#página (
@var:blanco;

#encabezado (
color: @var; // imprimirá en blanco
}
}
#pie de página (
color: @var; // imprime en rojo
}

Conclusión

Este artículo no cubre todo lo que LESS tiene para ofrecer. El objetivo es explicar cómo usar LESS puede ayudarnos a hacer nuestro CSS más dinámico. Los preprocesadores de CSS nos permiten crear y administrar CSS de manera más eficiente. Incluso con un buen conocimiento de CSS, LESS nos permitirá usarlo de manera más productiva.

Si tienes alguna duda te recomendamos utilizar nuestro