Визуализирайте всяка CSS стилова таблица с CSS статистика
Чудили ли сте се колко CSS правила са в стилова таблица? Или някога сте искали да видите a визуално представяне на всички цветове използван в един CSS файл? с CSS статистика, можете да включите всеки уебсайт и дръпнете куп сурови CSS данни за да задоволи любопитството си.
И това уеб приложение отива толкова много по-дълбоко, отколкото просто да показва всички цветове за стилове. Можете да визуализирате всички стойности на z-индекса, всички размери на шрифтове, всички медийни заявки и дори да видим графика на визуалната специфичност.
Това приложение покрива толкова много, че е практически невъзможно да се консумира всичко в едно заседание. Тя ще ви даде огромен преглед на всеки уебсайт само от показва какво има в стила им.
За да започнете, посетете уебсайта на CSS статистика и включете всеки URL адрес иска ти се. Също така можете да изберете от няколко предлагани сайта като Facebook, Apple и Pinterest (наред с други).
На страницата с резултати ще видите общ размер на CSS файла в килобайти, заедно със списък на най-често използваните свойства и декларации. Всичко това изглежда като един дълъг списък от номера, така че да може да бъде объркващо да се чете отначало.
Но колкото повече използвате това приложение, толкова по-забавно се получава! Ето едно списък на всичко ще намерите на страницата със статистически данни:
- Общо # на Имоти, селектори, и правилник
- всичко цветове на шрифта с примери и шестнадесетични кодове
- всичко фонови цветове с примери и шестнадесетични кодове
- всичко размер на шрифта с примери
- Списък с семейства с шрифтове
- Списък на всички z-индексни стойности
- Бар график на Общо / уникални CSS декларации
- Графика на специфичност
- Обща сума размер на набора от правила
- всичко медийни заявки
- Най- суров CSS код заедно с URL връзки към отделни CSS файлове
CSS Stats е достатъчно умен, за да изтегли всички CSS файлове и обединете тези данни заедно. Разработчиците влагат много усилия в това нещо, за да го направят точно.
И допълнителната страхотна част е пълното репо GitHub изходен код за целия проект. Така че, можете да изтеглите това и пренасочете го на собствения си сървър (локално или по друг начин), за да играете, ако искате да копаете в кода.
Имате възможност за издърпване на всеки отделен CSS файл или разбор на всички стилове в един домейн. Има толкова много неща, които можете да научите от изучаването на този инструмент и той предлага по-задълбочена представа за разработчиците, които влизат в подробности.
За да проверите сами, посетете CSS Stats и включете уебсайт. Ще бъдете изумени колко данни са налични и колко можете да научите от такъв опростен инструмент.
