2013-04-02 25 views
10

Tôi có một trang chứa nhiều bảng định kiểu và phần lớn các kiểu trong đó không thực sự được sử dụng trong trang (không được dùng nữa, v.v.). Tôi muốn xuất biểu định kiểu mới chứa tất cả các kiểu trên trang thực sự đang được sử dụng. Có anyway để làm điều này?Tìm hiểu xem kiểu CSS nào đang được sử dụng trên một trang nhất định

+1

thể trùng lặp của [có cách nào để kiểm tra phong cách CSS đang được sử dụng hay không sử dụng trên một trang web?] (http: // stackoverflow.com/questions/4361007/is-there-a-way-to-check-which-css-kiểu-đang-được-sử dụng-hoặc-không-được-sử-dụng-trên-web-pag) –

+3

Tôi thấy rằng Googling từ câu hỏi của bạn cho từ. –

+0

điều này có thể giúp đỡ: http://stackoverflow.com/questions/2224154/find-unused-images-css-rules-js-script-blocks –

Trả lời

3

Tôi nghĩ trang web này thực hiện những gì bạn muốn: CSS Trashman. Phải mất một chút thời gian để chạy, nhưng nó hoạt động. Nó giảm CSS của trang cá nhân của tôi từ 3,31 KB xuống 402 byte.

Nếu bạn muốn sử dụng công cụ dòng lệnh, CSS Rationator sẽ cấp quyền cho CSS Trashman.

+2

http://www.csstrashman.com/ chỉ chuyển hướng đến https://github.com/begriffs/css-ratiocinator Ngày: 2015-04-02 –

+0

Tôi đang tìm kiếm điều tương tự và tôi đã đưa ra một javascript nhỏ để làm điều này. Bạn có thể kiểm tra tại https://github.com/mocanuga/unusedCSS – mocanuga

+0

@mocanuga Chúng ta phải sử dụng nó như thế nào? – Jordan

1

Tôi thấy điều này: http://unused-css.com/

Tính năng

  • Khám phá các trang của trang web của bạn tự động, tìm selectors CSS không sử dụng và tạo file CSS sạch mới, bạn có thể tải về
  • Authenticate và khám phá các trang yêu cầu xác thực. Sau đó, nó sẽ kiểm tra các quy tắc CSS không được sử dụng.
  • Tìm kiếm quy tắc CSS trong file javascript
  • Tùy chỉnh danh sách các bộ chọn CSS để giữ
  • Preview sự thay đổi thực hiện cho các tập tin CSS
  • lệnh
  • Thực hiện theo CSS nhập khẩu
  • Đặt một user agent cho thu thập

Nhưng tôi không chắc đây có phải là ý tưởng hay không, một cái gì đó như: javascript trigered selectors, hiển thị theo ngữ cảnh, bố cục điều kiện mã ... Vì vậy, hãy cẩn thận nếu y ou cố gắng 'batch' làm việc các tệp .css của bạn.

+0

Không xuất bộ chọn được sử dụng, chỉ hiển thị không sử dụng = [ – ThomasReggi

+1

Dường như không thể nhận được kết quả mà không phải trả tiền. – MECU

5

Tôi gặp vấn đề tương tự, phức tạp vì các trang tôi cần phân tích chỉ là thông tin đăng nhập và cho công việc, vì vậy tôi không thể cung cấp thông tin đăng nhập của mình cho ứng dụng bên ngoài (đó là cách thu thập dữ liệu không sử dụng-css.com các trang phía sau tường đăng nhập).

tôi thấy hai phần mở rộng Chrome:

  1. CSS Remove and Combine
  2. unusedCSS

Tôi chỉ được sử dụng đầu tiên, vì nó đã làm các trick độc đáo. Nó tính các phần tử CSS trên trang, cho tôi biết có bao nhiêu phần tử đã được sử dụng và không được sử dụng, và hãy để tôi tải xuống một bản định kiểu của tất cả các phần tử được sử dụng. Dường như không bao gồm chức năng duyệt web xung quanh một trang web và tích lũy các phần tử đã thấy, nó chỉ ở trên từng trang, nhưng nó vẫn cho phép tôi tỉa 450 xuống 150.

2

Trong Chrome DevTools, có một tab kiểm toán mà sẽ cho phép bạn chạy một kiểm toán trang web hiệu suất và xem danh sách các quy tắc CSS không sử dụng:

enter image description here

Các vấn đề liên quan