¿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:
- Opera
- ie6
- ie5.5
- ie5
- ie4
- ie3
- Safari
- Mozilla
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