10 herramientas CSS online súper útiles

10 herramientas CSS online súper útiles

Hola y saludos desde el área web de la Escola Espai.

Hoy os traigo una recopilación de 10 herramientas CSS online muy útiles que harán nuestra tarea, a la hora, de escribir código CSS un poco menos pesada y más productiva.

W3C CSS Validation Service

cssValidator

Seguro que todos lo conocéis… Es la herramienta online para validar nuestro código CSS según las especificaciones y estándares del World Wide Web Consortium (consorcio internacional que produce recomendaciones para la World Wide Web).

CSS Lint

CSSLint

Css Lint nos indicará errores y avisos en nuestra sintaxis, problemas relacionados con la compatibilidad de navegadores, accesibilidad y otras cosas de que preocuparse.

CSS3 Generator

css3gen

Herramienta Online muy útil que junta las principales reglas de CSS3 (redondeados, sombras transformaciones, transiciones, etc…) y nos generea el código CSS según los parámetros que le indiquemos.

CSS Gradient Generator (Colorzilla)

cssgradientgenerator

Nos proporciona el código CSS del gradiente que le indiquemos a través de una interfaz muy parecida a la de Photoshop. En la misma pagina nos da la posibilidad de instalar la extensión para los navegadores Chorme y Firefox.

CSS Stats

CSSstats

CSS Stats ofrece una gran cantidad de estadísticas relacionadas con el CSS de la web que le indiquemos. Numero de reglas, selectores, propiedades, colores, tipografías usadas, tamaños de fuente, media queries, etc… Una herramienta muy útil para analizar paginas web y descubrir puntos de mejora.

StyleStats

stylestats

StyleStats es otra herramienta online que nos ofrece estadísticas sobre cualquier web. Muy parecida a la anterior. Tiene una sección para realizar test de los websites mas populares y otra para compararlos entre si.

ProCSSor

proCSSor

ProCSSor nos permitirá organizar y limpiar nuestro código CSS configurando gran cantidad de opciones y de esta manera obtendremos un gran control sobre el formato final del código que queremos.

CSS Shrink

cssShrink

CSS Shrink es una herramienta online para reducir el tamaño de los archivos CSS mejorando así el tiempo de carga de nuestra web. En uno de mis post anteriores (Cómo acelerar y medir la carga de nuestra web) ya hablé de minificar archivos eliminando espacios, comentarios, saltos de linea, etc… esa es precisamente la tarea que lleva a cabo CSS Shrink!

Codrops Reference

codrops

CSS es extenso, muchas propiedades que recordar, pseudoclases, funciones, etc… Codrops ha desarrollado una guía web para consultar y aprender CSS con explicaciones, ejemplos y demostraciones online para cada una de ellas. Muy útil para aprender características CSS desconocidas!

Can I Use

canIuse

Esta pagina nos ofrece tablas actualizadas sobre la compatibilidad de cada navegador sobre regla CSS que especifiquemos, ampliando la información con notas especificas, problemas conocidos, recursos de apoyo y comentarios de usuarios.

Y vosotros? Utilizáis o conocéis alguna más?

Saludos!

Escribe un comentario