¿Que es CSScompiler?
CSScompiler es un script que reduce tu hoja de estilos para ahorrar ancho de banda, eliminando comentarios, saltos de lineas y puntos y comas al cierre de corchetes.
Ademas de reducir espacio CSScompiler interpreta varias pseudoclases y propiedades creadas para mejorar la sintaxis y la interpretación de algunas propiedades.
Pseudoclase: :id()
Esta pseudoclase crea un identificador no único, es decir que se puede aplicar a varias etiquetas, con ella conseguimos heredar el contenido y las propiedades.
Veamos un ejemplo:
En CSS cuando queremos heredar varias propiedades lo que hacemos es lo siguiente.
.miclase ,.misegundaclase{...}
.misegundaclase {...}
En este caso .misegundaclase hereda los valores que están en .miclase.
Ejemplo con la pseudoclase :id() y la propiedad inherit.
.miclase:id("clave") {...}
.misegundaclase { inherit:@clave; }
El resultado al compilar será el mismo que en el primer ejemplo.Por supuesto no hace falta usar la pseudoclase para la propiedad inherit.
.miclase {...}
.misegundaclase { inherit:.miclase;}
La propiedad inherit acepta mas etiquetas separadas por comas.
.miclase {...}
.misegundaclase { inherit: .miclase, p;}
También es incluida la propiedad add que añade etiquetas al mismo contenedor.
.miclase {add:.misegundaclase, p;}al compilar quedaría.
.miclase, .misegundaclase, p {...}Pseudoclase: Navegador
Estas pseudoclases se interpretan cuando el navegador del cliente es el mismo.
Los navegadores incluidos son:
Imaginemos por un momento que solo para los usuarios de safari la imagen de la cabecera fuera la de un entorno mac, con esta propiedad seria coser y cantar.
.cabecera:safari {background-image: url(img.jpg);}Esta propiedad solo será ejecutada si el navegador es safari, este ejemplo es un poco flojo pero imaginatelo aplicado al modelo de caja.
También puedes ser incluidas en las reglas @import y @media, y cargar un documento según el navegador.
@import:safari "safari.css";
@import:mozilla "mozilla.css";
@media:mozilla all{ p {margin: 20px;}}Como usar CSScompiler:
Solo tendrás que abrir el archivo css.php e indicar el tiempo de cache (si eliminas es valor no se creara el cache) e indicar el css por defecto que se cargara en caso de colocar mal la url.
Para llamar al css tienes que usar la variable css seguido del ruta del archivo.
<link href="css.php?css=css.css" rel="stylesheet" type="text/css" />Puedes descargarte el CSScompiler o mirar el ejemplo compilado y sin compilar .
Espero que os haya gustado la idea de la pseudoclase navegador y que os sea útil.
Por si las moscas también puedes descargarte CSScompilerBeta
Comentarios
<modo_teletienda>
¿Hojas de estilo pesadas? ¡Se acabó! ¡Use CSScompiler!
</modo_teletienda>
# · Aeoris · hace 2593 días
Juas, tu no solo estudias, sino que te aplicas, ¿eh cabroncete? Muy buena explicación.
BTW, CSS se va a convertir en algo tan amplio que no va a haber humano que lo controle. Yo sigo sin aplicar ni la mitad de las cosas que “medio me sé”; pero bueno, pa’eso tas tú, mozu, que nos lo resuelves en un plis :D
Un saludete.
# · xoan · hace 2593 días
Salu2
# · Manz · hace 2593 días
# · Aloga · hace 2592 días
# · corsaria · hace 2592 días
Si me da tiempo subo las modificaciones, que son para añadir mas cosas.
# · IceBeat · hace 2592 días
http://www.galeon.com/laotraisla/aficiones1153054.html
# · Plasimine · hace 2591 días
http://teenage.cz/acidofil/tools/cssformat.php
Salu2 Sergio
# · kharkoma · hace 2589 días
Salu2
# · tanke · hace 2587 días
# · Frank · hace 2584 días
Bueno ese script no implementa la pseudoclase navegador porque depende directamente del usuario que visite nuestra pagina.Lo mas importante de este script son los añadidos, porque lo de ahorrar espacios y demas hay muchos scripts que lo hacen.
Tanke espero que te sea de ayuda, poco a poco ando mejorando el codigo fuente y añadiendo soporte a otras etiquetas (como la @media).
Un saludo.
# · IceBeat · hace 2582 días
# · mini-d · hace 2571 días
# · IceBeat · hace 2571 días