Visualice cualquier hoja de estilo CSS con estadísticas CSS
¿Alguna vez te has preguntado cuántas reglas CSS hay en una hoja de estilo? ¿O alguna vez has querido ver una representación visual de todos los colores utilizado en un archivo CSS? Con Estadísticas CSS, Usted puede conectar cualquier sitio web y tirar un montón de datos en bruto CSS para satisfacer tu curiosidad.
Y esta aplicación web va mucho más allá de simplemente mostrar todos los colores para una hoja de estilo. Puedes visualizar todos los valores de índice z, todos los tamaños de fuente, todas las consultas de los medios e incluso ver un gráfico de especificidad visual.
Esta aplicación cubre tanto que es prácticamente imposible consumir todo en una sola sesión. Le dará una visión general tremenda de cualquier sitio web solo por mostrando lo que está en su hoja de estilo.
Para comenzar, visite el sitio web de CSS Stats y conectar cualquier URL tú deseas. También puede elegir entre una serie de sitios sugeridos como Facebook, Apple y Pinterest (entre otros).
En la página de resultados, verá la tamaño total del archivo CSS en kilobytes, junto con una lista de los Propiedades y declaraciones más utilizadas. Todo esto aparece como una larga lista de números, por lo que puede ser confuso leerlo al principio..
¡Pero cuanto más usas esta aplicación, más divertido se vuelve! Aquí está un lista de todo Lo encontrarás en la página de estadísticas:
- Total de propiedades, selectores, y reglas
- Todos colores de fuente con ejemplos y códigos hexadecimales
- Todos colores de fondo con ejemplos y códigos hexadecimales
- Todos tamaños de letra con ejemplos
- Lista de familias de fuentes
- Lista de todos valores de índice z
- Un gráfico de barras de declaraciones CSS totales / únicas
- Gráfica de especificidad
- Total tamaño del conjunto de reglas
- Todos preguntas de los medios
- los código CSS sin procesar junto con Enlaces URL al archivos CSS individuales
CSS Stats es lo suficientemente inteligente como para extraer todos los archivos CSS y fusionar esos datos juntos. Los desarrolladores ponen mucho esfuerzo en esto para que funcione correctamente..
Y, la parte más impresionante es el repo completo de GitHub con Código fuente para todo el proyecto.. Entonces, puedes descargar esto y volver a alojarlo en su propio servidor (localmente o de otro modo) para jugar si quiere profundizar en el código.
Tienes la opción de tirando de cualquier archivo CSS individual o analizando todas las hojas de estilo en un solo dominio. Hay mucho que puedes aprender al estudiar esta herramienta y ofrece una visión más profunda para los desarrolladores que se adentran en los detalles esenciales..
Para probarlo usted mismo, solo visite CSS Stats y conecte un sitio web. Te sorprenderá la cantidad de datos disponibles y la cantidad que puedes aprender de una herramienta tan simplista..
