IceBeat

¿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:

1. Opera
2. ie6
3. ie5.5
4. ie5
5. ie4
6. ie3
7. Safari
8. 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