Formatear, optimizar y comprimir nuestros archivos de hoja de estilos CSS.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Clean CSS es una herramienta o servicio web gratuito muy útil para todos aquellos webmasters y diseñadores que necesiten optimizar las hojas de estilo de sus sitios, aplicaciones web, etc ...

La utilidad no es un programa que se instala en la pc como cualquier otro software, sino una aplicación web ( del sitio http://www.cleancss.com/ ), y desde allí, mediante una simple interfaz que contiene un formulario, podremos optimizar el código de nuestras hojas de estilo para reducir el peso de los archivos.

La herramienta es muy simple de utilizar y una buena opción a tener en cuenta si necesitamos limpiar nuestros ficheros CSS como también reducirles el tamaño para que la carga de la página sea más rápida, sobre todo, si nuestras hojas de estilo están creadas con programas de diseño de páginas webs como el Dreamweaver por ejemplo, que suelen crear código innecesario.

A continuación puedes ver mas información sobre la utilidad y como usarla.

Mas información sobre el programa.

Indice - Contenido

  1. Acerca del programa.
  2. Características.
  3. Secciones de la interfaz del formulario.
    1. CSS Input - Ingresar el código CSS a optimizar.
    2. Compression - Establecer nivel o grado de compresión.
    3. Options - Opciones generales de compresión y formato del CSS.
    4. Optimizar y comprimir el código fuente.
  4. Ejemplo de código fuente optimizado.

 

1 - Acerca del programa.

CleanCSS es un potente formateador y optimizador CSS que permite limpiar y hacer mas conciso el código fuente.

Esta aplicación está basada originalmente en otro programa llamado CSSTidy, y el autor lo ha modificado e instalado en su sitio web de forma gratuita para que cualquier persona lo pueda utilizar.

2 - Características.

Las razones por las que hacen útil a esta herramienta principalmente son por la posibilidad de comprimir y reducir el código, como también hacerlo mas claro, es decir un código fuente CSS mejor escrito, ordenado y legible.

El optimizador es bastante configurable y adaptable a nuestras necesidades, pudiendo indicar varios parámetros y opciones que determinarán que secciones optimizar, que nivel de compresión utilizar, etc ..

3 - Secciones de la interfaz del formulario.

La aplicación web, consta de tres secciones principales. Una para ingresar el código CSS que queremos optimizar y comprimir, otra para indicar el nivel o grado de compresión del código, y otra sección con varias opciones generales.

A continuación puedes ver cada apartado de la herramienta, y también sus opciones.

3.1 - CSS Input - Ingresar el código CSS a optimizar.

En el campo de texto ubicado a la izquierda, tienes dos opciones: O puedes pegar el código CSS directamente en el cuadro de texto, o indicar una hoja de estilo remota, es decir estableciendo la dirección URL del archivo.

3.2 - Compression - Establecer nivel o grado de compresión.

En esta sección, desde una lista desplegable, es posible indicar el grado para comprimir el código.

Seleccionando la primer opción Highest, reducirá lo máximo posible el tamaño de los archivos, pero tiene la desventaja de que el código quedará poco legible. La opción mas baja de compresión, ( opción Low), ejecutará el optimizador, dejando el código fuente bien legible.

Por defecto, se utiliza la opción intermedia ( Standar ) que hace un balance entre la legibilidad y el tamaño del archivo final. Esta opción de compresión es la mas recomendable.

3.3 - Options - Opciones generales de compresión y formato del CSS.

Este apartado es el último paso donde podremos establecer algunas opciones antes de generar el código optimizado.

Por defecto, las opciones que se encuentran marcadas, en un gran porcentaje será seguro y el código CSS será optimizado sin ser dañado.

Pero también es posible indicar varios otros parámetros. Algunos de ellos, sobre todo los que no están marcados o activados, por ejemplo la opción para ordenar los selectores CSS ( Sort selectors), se deberá tener cuidado ya que podrá no ser 100% seguro, y de este modo, dependiendo de cada CSS en particular, generar o no errores en la hoja de estilo resultante.

Entre la lista de opciones tenemos por ejemplo la posibilidad de indicar:

  • Save comments: Si se mantendrán o no los comentarios del código fuente. Por defecto esta opción está desmarcada, es decir que cualquier comentario será eliminado para poder reducir aún mas el tamaño de los archivos.
  • Discard invalid properties: Descartar propiedades no válidas para diferentes versiones de CSS: CSS 1.0, CSS 2.0 y CSS 2.1.
  • Merge shorthand properties: Permite unir y combinar propiedades
  • Compress color: opción que comprimirá los valores de color.
  • Otras opciones.

3.4 - Optimizar y comprimir el código fuente.

Como último paso, desde el botón Process CSS, se podrá obtener el nuevo código formateado, comprimido y optimizado.También visualizar los mensajes del trabajo, el tamaño del archivo antes y después de optimizarlo, y un porcentaje con el valor de compresión aplicado.

Nota: para generar el código como un nuevo archivo, se debe tildar la opción Output as file en el formulario. Hecho esto se podrá descargar al disco duro el archivo de hoja de estilos.

4 - Ejemplo de código fuente optimizado.

La herramienta utilizando las opciones establecidas por defecto, si tenemos este pequeño bloque de código CSS:

Lo optimizará y reducirá a este otro bloque de código.

 


Requerimientos de instalación y uso.

Conexión a internet.

Videos tutoriales.

No hay mas imágenes para mostrar.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://www.cleancss.com
Licencia:
Servicio gratis
Versión:
-
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: