Wizualizuj dowolny arkusz stylów CSS ze statystykami CSS
Czy zastanawiałeś się kiedyś, ile reguł CSS znajduje się w arkuszu stylów? A może chciałeś kiedyś zobaczyć reprezentacja wizualna z wszystkie kolory używany w jednym pliku CSS? Z Statystyki CSS, możesz podłączyć dowolną stronę internetową i ściągnij kilka surowych danych CSS zaspokoić swoją ciekawość.
Ta aplikacja internetowa jest znacznie głębsza niż pokazywanie wszystkich kolorów arkusza stylów. Możesz wizualizować wszystkie wartości indeksu Z, wszystkie rozmiary czcionek, wszystkie zapytania o media a nawet zobacz wykres specyficzności wizualnej.
Ta aplikacja obejmuje tyle, że praktycznie niemożliwe jest skonsumowanie wszystkiego w jednym siedzeniu. To daje ogromny przegląd każdej strony tylko przez prezentowanie tego, co jest w ich arkuszu stylów.
Aby rozpocząć, odwiedź stronę CSS Stats i podłącz dowolny adres URL chciałbyś. Możesz także wybrać spośród wielu sugerowanych stron, takich jak Facebook, Apple i Pinterest (między innymi).
Na stronie wyników zobaczysz całkowity rozmiar pliku CSS w kilobajtach wraz z listą najczęściej używane właściwości i deklaracje. To wszystko pojawia się jako jedna długa lista liczb, więc czytanie może początkowo być mylące.
Ale im więcej używasz tej aplikacji, tym więcej zabawy! Tutaj jest lista wszystkiego znajdziesz na stronie statystyk:
- Suma nieruchomości, selektory, i zasady
- Wszystko kolory czcionki z przykładami i kodami szesnastkowymi
- Wszystko kolory tła z przykładami i kodami szesnastkowymi
- Wszystko rozmiary czcionek z przykładami
- Lista rodziny czcionek
- Lista wszystkich wartości indeksu z
- Wykres słupkowy z całkowita / unikalna deklaracja CSS
- Wykres specyficzności
- Całkowity rozmiar zestawu reguł
- Wszystko zapytania o media
- The surowy kod CSS wraz z Linki URL do indywidualne pliki CSS
Statystyki CSS są wystarczająco inteligentne, aby pobrać wszystkie pliki CSS i scal dane razem. Deweloperzy włożyli wiele wysiłku w to, aby wszystko działało prawidłowo.
Dodatkową niesamowitą częścią jest pełne repozytorium GitHub kod źródłowy dla całego projektu. Więc możesz pobrać to i ponownie go hostuj na własnym serwerze (lokalnie lub w inny sposób), aby grać, jeśli chcesz zagłębić się w kod.
Masz opcję ciągnięcie dowolnego pliku CSS lub parsowanie wszystkich arkuszy stylów w jednej domenie. Dzięki takiemu narzędziu można się wiele nauczyć, a programista ma głębszy wgląd w szczegóły..
Aby przetestować samodzielnie, po prostu odwiedź statystyki CSS i podłącz stronę internetową. Zdziwisz się, ile danych jest dostępnych i ile możesz się nauczyć z tak prostego narzędzia.
