Có cách tiếp cận tốt nào để giúp xác định các định nghĩa css không được sử dụng trong một dự án không? Một loạt các tập tin css đã được kéo vào và bây giờ tôi đang cố gắng dọn dẹp mọi thứ một chút.
Có cách tiếp cận tốt nào để giúp xác định các định nghĩa css không được sử dụng trong một dự án không? Một loạt các tập tin css đã được kéo vào và bây giờ tôi đang cố gắng dọn dẹp mọi thứ một chút.
Câu trả lời:
Hãy xem tiện ích mở rộng Firefox Dust-Me tại https://addons.mozilla.org/en-US/firefox/addon/dust-me-selector/ .
Chrome Developer Tools có tab Kiểm toán có thể hiển thị các bộ chọn CSS không sử dụng.
Chạy kiểm toán, sau đó, trong Hiệu suất trang web, xem Xóa quy tắc CSS không sử dụng
Tôi vừa tìm thấy trang web này - http://unuse-css.com/
Có vẻ tốt nhưng tôi sẽ cần kiểm tra kỹ css 'sạch' của nó trước khi tải nó lên bất kỳ trang web nào của tôi.
Ngoài ra, với tất cả các công cụ này, tôi sẽ cần kiểm tra xem nó không loại bỏ id và các lớp không có kiểu dáng nhưng được sử dụng làm bộ chọn JavaScript.
Nội dung dưới đây được lấy từ http://unuse-css.com/ để ghi có cho họ để đề xuất các giải pháp khác:
Latish Sehgal đã viết một ứng dụng windows để tìm và loại bỏ các lớp CSS không sử dụng. Tôi chưa thử nó nhưng từ mô tả, bạn phải cung cấp đường dẫn của tệp html và một tệp CSS. Chương trình sau đó sẽ liệt kê các bộ chọn CSS không sử dụng. Từ ảnh chụp màn hình, có vẻ như không có cách nào để xuất danh sách này hoặc tải xuống một tệp CSS sạch mới. Dường như dịch vụ được giới hạn trong một tệp CSS. Nếu bạn có nhiều tệp bạn muốn xóa, bạn phải xóa từng tệp một.
Dust-Me Selector là một tiện ích mở rộng của Firefox (dành cho v1.5 trở lên) tìm thấy các bộ chọn CSS không sử dụng. Nó trích xuất tất cả các bộ chọn từ tất cả các bảng định kiểu trên trang bạn đang xem, sau đó phân tích trang đó để xem bộ chọn nào không được sử dụng. Dữ liệu sau đó được lưu trữ để khi kiểm tra các trang tiếp theo, các bộ chọn có thể được gạch bỏ khỏi danh sách khi chúng gặp phải. Công cụ này được cho là có thể thu thập toàn bộ trang web nhưng tôi không may có thể làm cho nó hoạt động. Ngoài ra, tôi không tin rằng bạn có thể định cấu hình và tải xuống tệp CSS với các kiểu đã bị xóa.
Topstyle là một ứng dụng windows bao gồm một loạt các công cụ để chỉnh sửa CSS. Tôi chưa thử nghiệm nhiều nhưng có vẻ như nó có khả năng loại bỏ các bộ chọn CSS không sử dụng. Phần mềm này có giá 80 USD.
Liquidcity CSS cleaner là một tập lệnh php sử dụng các biểu thức thông thường để kiểm tra kiểu của một trang. Nó sẽ cho bạn biết các lớp không có sẵn trong mã HTML. Tôi chưa thử nghiệm giải pháp này.
Dead weight là một công cụ bảo hiểm CSS. Đưa ra một tập hợp các bảng định kiểu và một bộ URL, nó xác định các bộ chọn nào thực sự được sử dụng và các danh sách có thể được "xóa" một cách an toàn. Công cụ này là một mô-đun ruby và sẽ chỉ hoạt động với trang web rails. Các bộ chọn không sử dụng phải được xóa thủ công khỏi tệp CSS.
Helium CSS là một công cụ javascript để khám phá CSS không được sử dụng trên nhiều trang trên một trang web. Trước tiên, bạn phải cài đặt tệp javascript vào trang bạn muốn kiểm tra. Sau đó, bạn phải gọi một chức năng helium để bắt đầu làm sạch.
Un usedCSS.com là ứng dụng web có giao diện dễ sử dụng. Nhập url của một trang web và bạn sẽ nhận được một danh sách các bộ chọn CSS. Đối với mỗi bộ chọn, một số cho biết số lần chọn được sử dụng. Dịch vụ này có một vài hạn chế. Câu lệnh @import không được hỗ trợ. Bạn không thể định cấu hình và tải xuống tệp CSS sạch mới.
CSSESS là một bookmarklet giúp bạn tìm các bộ chọn CSS không sử dụng trên bất kỳ trang web nào. Công cụ này khá dễ sử dụng nhưng nó sẽ không cho phép bạn định cấu hình và tải xuống các tệp CSS sạch. Nó sẽ chỉ liệt kê các tệp CSS không sử dụng.
Tốc độ trang của Google có thể làm điều đó cho bạn (nó thực sự làm được nhiều hơn là chỉ cho bạn biết CSS nào không được sử dụng). Trên FireFox, nó có sẵn như là một tiện ích bổ sung FireBug. Sau đó, có một phiên bản trực tuyến.
Công cụ khai thác CSS tốt hơn trong C # loại bỏ các kiểu dư thừa;
Bạn cũng sẽ muốn sử dụng Dust-Me với điều này.
Hãy ghi nhớ, nếu có bất kỳ nội dung nào hiện không thể nhìn thấy đối với tôi, bạn có thể loại bỏ các kiểu bạn cần.
EDIT: liên kết đã bị hỏng nhưng archive.org có cả trang và mã.
Phần mở rộng Firebird để xem quy tắc CSS nào thực sự được sử dụng.
Sử dụng CSS là một tiện ích mở rộng cho Fireorms (do đó cần phải cài đặt Fireorms) cho phép bạn biết các quy tắc kiểu CSS không sử dụng. Nó xác định CSS bạn sử dụng và không sử dụng. Nó cho phép bạn chỉ ra những phần không cần thiết có thể được gỡ bỏ. Bạn chắc chắn nên sử dụng tiện ích bổ sung này để giữ cho các tệp CSS của bạn nhẹ nhất có thể.
Có vẻ như ai đó đã cập nhật Bộ chọn DustMe để hoạt động lại với Firefox dưới một tên mới - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198
Sử dụng Thanh công cụ dành cho nhà phát triển Internet Explorer , s View> CSS Selector Match : Xem báo cáo về tất cả các quy tắc kiểu được đặt và số lần chúng được sử dụng trên trang hiện tại.
Hãy xem PageSpeed của Firefox cho Firefox . Nó làm điều này, và toàn bộ tải nhiều hơn.
Rõ ràng một plugin Chrome cũng đang được phát triển.