Trực quan hóa bất kỳ Biểu định kiểu CSS nào với Chỉ số CSS

Bạn đã bao giờ tự hỏi có bao nhiêu quy tắc CSS trong một bản định kiểu chưa? Hoặc bạn đã bao giờ muốn nhìn thấy một đại diện trực quan của tất cả các màu được sử dụng trong một tệp CSS? Với Số liệu thống kê CSS, bạn có thể cắm vào bất kỳ trang web nào và lấy một loạt dữ liệu CSS thô để thỏa mãn sự tò mò của bạn.

Và ứng dụng web này đi sâu hơn nhiều so với việc chỉ hiển thị tất cả các màu cho biểu định kiểu. Bạn có thể hình dung tất cả các giá trị chỉ số z, tất cả các cỡ chữ, tất cả các truy vấn truyền thông và thậm chí nhìn thấy một đồ thị đặc trưng.

Ứng dụng này bao gồm rất nhiều đến nỗi thực tế không thể tiêu thụ mọi thứ trong một lần ngồi. Nó sẽ cung cấp cho bạn một cái nhìn tổng quan to lớn về bất kỳ trang web nào chỉ bằng cách trưng bày những gì trong bản định kiểu của họ.

Để bắt đầu, hãy truy cập trang web Thống kê CSS và cắm vào bất kỳ URL nào Bạn ước. Bạn cũng có thể chọn từ một số trang web được đề xuất như Facebook, Apple và Pinterest (trong số những trang khác).

Trên trang kết quả, bạn sẽ thấy tổng kích thước tệp CSS tính bằng kilobyte, cùng với một danh sách tài sản và khai báo thường được sử dụng nhất. Tất cả điều này xuất hiện dưới dạng một danh sách dài các số nên có thể gây nhầm lẫn khi đọc lúc đầu.

Nhưng bạn càng sử dụng ứng dụng này, nó sẽ càng thú vị hơn! Đây là một danh sách tất cả mọi thứ bạn sẽ tìm thấy trên trang thống kê:

Tổng cộng tính chất, bộ chọn, và quy tắc
Tất cả các màu chữ với các ví dụ và mã hex
Tất cả các màu nền với các ví dụ và mã hex
Tất cả các cỡ chữ với các ví dụ
Danh sách của họ phông chữ
Danh sách tất cả giá trị chỉ số z
Biểu đồ thanh khai báo CSS tổng / duy nhất
Đồ thị độ đặc hiệu
Toàn bộ kích thước quy tắc
Tất cả các truy vấn phương tiện truyền thông
Các mã CSS thô cùng với Liên kết URL để các tệp CSS riêng lẻ

Chỉ số CSS đủ thông minh để kéo tất cả các tệp CSS và hợp nhất dữ liệu đó lại với nhau. Các nhà phát triển đã nỗ lực rất nhiều vào việc này để làm cho nó hoạt động vừa phải.

Và, phần tuyệt vời hơn nữa là repo GitHub đầy đủ với mã nguồn cho toàn bộ dự án. Vì vậy, bạn có thể tải cái này và lưu trữ lại nó trên máy chủ của riêng bạn (cục bộ hoặc cách khác) để chơi xung quanh nếu bạn muốn tìm hiểu về mã.

Bạn có tùy chọn lấy bất kỳ tệp CSS riêng lẻ nào hoặc là phân tích tất cả các bảng định kiểu trên một miền duy nhất. Có rất nhiều thứ bạn có thể học hỏi từ việc nghiên cứu công cụ này và nó cung cấp cái nhìn sâu sắc hơn cho các nhà phát triển, những người hiểu sâu về các chi tiết khó chịu.

Để tự kiểm tra, chỉ cần truy cập Thống kê CSS và cắm vào trang web. Bạn sẽ ngạc nhiên về số lượng dữ liệu có sẵn và bạn có thể học được bao nhiêu từ một công cụ đơn giản như vậy.