Chỉ trích xuất css được sử dụng trong một trang cụ thể


85

Giả sử bạn có một trang web được tạo động đã được làm việc bởi quá nhiều người, trong quá khứ và hiện tại, và bạn hiện có một bộ sưu tập các biểu định kiểu được chia sẻ chứa hơn 20.000 dòng CSS. Nó hoàn toàn không được tổ chức, có một số bộ chọn dựa trên lớp và id nhưng cũng có quá nhiều bộ chọn dựa trên thẻ. Và sau đó giả sử bạn có 100 mẫu sử dụng các kiểu này, thông qua một số bộ điều khiển.

Có một công cụ nào đó hoạt động giống như Firebug mà bạn có thể trỏ vào một url và nó sẽ xác định tất cả các bộ chọn CSS áp dụng cho trang đó và kết xuất chúng vào một tệp không? Về cơ bản, một số cách để tách các bảng định kiểu được chia sẻ trên cơ sở từng trang.


Câu trả lời:


17

Tôi đã sử dụng Dust-Me Selectors trước đây, là một plugin của Firefox. Nó rất dễ sử dụng và linh hoạt vì nó duy trì một danh sách kết hợp trên một số trang mà các giá trị CSS được sử dụng.

Nhược điểm là tôi không thể tự động hóa nó để tạo toàn bộ trang web, vì vậy tôi chỉ sử dụng nó trên các trang / mẫu chính của trang web của mình. Nó rất hữu ích.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Trái ngược với nhận xét ở trên, Dust-Me Selectors 2.2 tương thích với Firefox 3.6 (tôi mới cài đặt nó).


2
Nó có cách nào để xuất bản sao của một tệp css được chỉ định với tất cả những thứ không sử dụng đã bị xóa không?
rraallvv

1
@rraallw Đúng. Đây là công cụ duy nhất hoạt động và vẫn tôn trọng các truy vấn phương tiện. Nó có một lỗi khó chịu khi nó rải tệp CSS đầu ra với từ "undefined", nhưng tìm nhanh chóng sẽ sửa lỗi đó. Khi công cụ chạy, hãy nhấn nút "sạch" trên tab "Bộ chọn không sử dụng" cho mỗi trang tệp. Nó sẽ tạo CSS mà bạn có thể xuất.
Eric L.

2
Trang bổ trợ không còn tồn tại. Và liên kết đầu tiên chuyển hướng đến liên kết thứ hai.
Marian

56

Công cụ tốt nhất thực sự làm chính xác những gì bạn muốn bằng cách chỉ tải CSS đã sử dụng trên trang và cho phép bạn chỉ cần sao chép nó vào khay nhớ tạm là CSS của tiện ích mở rộng Chrome này đã sử dụng

Ví dụ về Hình ảnh Đẹp

nhập mô tả hình ảnh ở đây


Công cụ tuyệt vời ... Nhưng nó dường như bỏ qua các truy vấn phương tiện. :(
Eric L.

8
Tôi đã cập nhật tiện ích mở rộng cho các truy vấn phương tiện được hỗ trợ. Bên cạnh đó, tính năng xóa phông chữ / khung hình chính đã sử dụng, thậm chí một số bản hack IE hiện cũng được hỗ trợ.
PaintyJoy

1
Hỗ trợ các truy vấn phương tiện ngay bây giờ.
Atheaos

2
Điều đó thật tuyệt. Bạn thậm chí có thể chọn một phần tử trong DOM và nó sẽ cung cấp CSS được sử dụng cho vùng chứa cụ thể đó.
webnoob

2
Ahh rất yên bình khi bạn tìm đúng công cụ chính xác cho vấn đề của bạn :)
sinaza


10

(Không dành cho firefox nhưng có thể điều này giúp ích cho ai đó)

Nếu bạn đang làm việc trên chrome, bạn có thể sử dụng tiện ích mở rộng này:

CSS xóa và kết hợp ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh )

  • cho phép bạn tải xuống css kết hợp với tất cả các kiểu đã sử dụng
  • hiển thị các kiểu không sử dụng trong cửa sổ bật lên
  • bao gồm các kiểu đã tạo

Công cụ tuyệt vời nhưng nó bỏ qua CSS truy vấn phương tiện. Sau khi nó được kết hợp, trang web của tôi không phản hồi nữa.
Jonas T

"CSS xóa và kết hợp" có vẻ đã lỗi thời, không hoạt động trên Chrome 67
một

4

Tôi đã xem qua Uncss-Online - Máy chủ không chính thức, rất thuận tiện để thử nghiệm hoặc sử dụng một lần! Tôi nghĩ nó là công cụ tốt nhất mà tôi đã từng xem qua.

UnCSS là một công cụ loại bỏ CSS không sử dụng khỏi các bảng định kiểu của bạn. Nó hoạt động trên nhiều tệp và hỗ trợ CSS được chèn Javascript. Nó có thể được sử dụng theo cách này:

  • Sao chép và dán HTML và CSS của bạn vào các hộp được cung cấp
  • Nút bấm
  • Chờ điều kỳ diệu xảy ra
  • CSS không sử dụng đã biến mất, hãy lấy phần còn lại và sử dụng nó!

Bạn có thể kiểm tra Trang Github của họ để biết các cách nâng cao khác để sử dụng công cụ này


3

SnappySnippet

Có một quảng cáo mã nguồn mở của chrome có tên là SnappySnippet, tôi thấy nó tốt hơn nhiều so với việc mở rộng các công cụ dành cho nhà phát triển đã có sẵn trong chrome. Bạn thậm chí có thể chỉ trích xuất một phần của trang sẽ có tất cả css có liên quan. Nhìn vào bài đăng stackoverflow này


1
vâng nhưng nó thay đổi classnames một số id chung chung mà không phải là rất hữu ích
Shishir Arora

3

Đây là giải pháp của tôi sử dụng JavaScript:

    var css = [];
    for (var i=0; i<document.styleSheets.length; i++)
    {
        var sheet = document.styleSheets[i];
        var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
        if (rules)
        {
            css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
            for (var j=0; j<rules.length; j++)
            {
                var rule = rules[j];
                if ('cssText' in rule)
                    css.push(rule.cssText);
                else
                    css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
            }
        }
    }
    var cssInline = css.join('\n')+'\n';

Cuối cùng, cssInlinelà một danh sách văn bản của tất cả các tấm thép của trang và nội dung của chúng.

Thí dụ :

    /* Stylesheet : http://example.com/cache/css/javascript.css */
    .javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
    .javascript { color: rgb(172, 172, 172); }
    .javascript .imp { font-weight: bold; color: red; }

    /* Stylesheet : http://example.com/i/main_master.css */
    html { }
    body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
    a { color: rgb(204, 0, 51); text-decoration: none; }
    a:hover { color: rgb(153, 153, 153); text-decoration: none; }
    .icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
    #header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
    #super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
    #monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
    #header a { color: rgb(255, 255, 255); }
    #menu_2 { height: 290px; }

    /* Stylesheet : [inline styles] */
    .hidden { display: none; }

sẽ rất tuyệt nếu điều này có thể được sử dụng để áp dụng css từ một trang bên ngoài vào trang của riêng tôi. Tôi không biết làm thế nào để làm điều đó ...
johny tại sao

2
  • unss: Tìm công cụ CSS - cli không được sử dụng, sử dụng phantomjs và thực thi JS trên trang, có thể được sử dụng trên URL
  • grunt-uncss - chỉ hoạt động trên các tệp tĩnh
  • ( css quan trọng - trích xuất CSS cho các phần tử hiển thị trong cửa sổ trình duyệt)

2

Kiểm tra PurifyCSS và điều này cho những người có thể xử lý CLI hoặc Gulp / Grunt / Webpack

Bạn có thể xóa kiểu không sử dụng khỏi một trang hoặc nhiều trang hoặc khỏi toàn bộ dự án, mặc dù các lớp đang được chèn bởi javascript.

Nếu bạn có thể google, có rất nhiều tài nguyên trên mạng để bạn có thể tìm hiểu về PurifyCSS.


1

Tiện ích mở rộng này của Firefox có thể sẽ giải quyết được vấn đề của bạn, Dust-Me Selectors . Ngoài ra còn có một ứng dụng máy tính để bàn nhỏ có tên CssCleaner hoặc CssHelper nhưng tôi không thể tìm thấy liên kết đến nó ... (chỉ cần có nó ở đây trên máy của tôi đã được tải xuống cách đây khá lâu cho một tác vụ tương tự)


1

Nếu bạn đang xử lý các trang đơn lẻ, bạn cũng có thể sử dụng bookmarklet của tôi để nhanh chóng chỉ lấy CSS thực sự được sử dụng bởi trang web:

  1. Vào đây (nếu liên kết này bị hỏng, bạn cũng có thể lấy nó từ pastebin ).
  2. Kéo nút lớn bên dưới "Tải xuống Bookmarklet" vào thanh công cụ dấu trang của bạn.

Đó là nó. Bây giờ bất cứ khi nào bạn muốn đóng gói một trang tĩnh (tức là để làm cho nó di động hoặc nếu bạn định phân phát nó từ iframe của chính nó), chỉ cần nhấp vào dấu trang và nó sẽ hiển thị tất cả CSS đã sử dụng trên trang hiện tại trong một lớp phủ. Nhấp vào bóng để đóng lớp phủ.

Một điều tốt với giải pháp này là nó hỗ trợ các trang đáp ứng vì các truy vấn phương tiện cũng được trích xuất. Như một phần thưởng, các truy vấn phương tiện được sắp xếp theo đặc điểm kích thước khung nhìn (ví dụ: @media (max-width: 767px)sẽ đến sau @media (max-width: 1023px) ).

Nếu có nhu cầu, tôi cũng có thể thêm một tùy chọn để giảm thiểu CSS đã tạo. Vì tôi chỉ sử dụng bookmarklet này cho nhu cầu của riêng mình nên nó chưa được thử nghiệm rộng rãi, vì vậy vui lòng báo cáo bất kỳ vấn đề nào trong phần nhận xét.

LƯU Ý: Để làm cho bookmarklet này hoạt động với các tệp cục bộ trong Chrome, hãy thêm --allow-file-access-from-filesvào mục tiêu lối tắt của Chrome. Thí dụ:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

1

Hãy thử sử dụng công cụ này, chỉ là một tập lệnh js đơn giản https://github.com/shashwatsahai/CSSExtractor/ Công cụ này giúp lấy CSS từ một trang cụ thể liệt kê tất cả các nguồn cho các kiểu đang hoạt động và lưu nó vào một JSON với nguồn là khóa và các quy tắc dưới dạng giá trị. Nó tải tất cả CSS từ các liên kết href và cho biết tất cả các kiểu được áp dụng từ chúng. Bạn có thể lưu đầu ra trong tệp JSON với bất kỳ tên nào.


0

Hmm .. Tôi sẽ ném một chút bạo lực vào điều này bằng cách trích xuất các bộ chọn CSS khác nhau bằng cách sử dụng phân tích cú pháp phía máy chủ của tệp CSS, sau đó chạy từng bộ này dưới dạng bộ chọn jQuery trong trình duyệt. Không phải là rất thanh lịch, nhưng nên làm việc?


Nhưng có một công cụ hiện có để làm điều này?
Roger Halliburton

0

Tính đến tháng 9 năm 2020, câu hỏi này đã gần 10 năm tuổi. Hầu hết các giải pháp được cung cấp không còn hoạt động hoặc các dự án được liên kết đã biến mất.

Tuy nhiên, câu hỏi này vẫn cực kỳ liên quan vì Google hiện sử dụng tốc độ trang làm một trong những thước đo mức độ ưu tiên của mình.

Sau khi thực hiện một loạt nghiên cứu về tất cả các liên kết được liệt kê, tôi đã tìm thấy purgecss.com . Đây dường như là lựa chọn tốt nhất để dọn dẹp CSS không sử dụng trong các ứng dụng web / SPA hiện đại bằng Angular, React, Vue, v.v. Ngoài ra, còn có tích hợp xây dựng với PostCSS, Webpack, Grunt và Gulp.

Ngoài ra, UnCSS dường như vẫn được duy trì. Nó mạnh mẽ như PurgeCSS nhưng không được tích hợp vào các quy trình xây dựng hoặc các ứng dụng javascript một trang.


-1

Bạn cũng có thể sử dụng http://getcssusedinapage.com để sử dụng CSS trong một trang. Nó miễn phí, nhanh chóng và cung cấp cho bạn nhiều chi tiết cùng với mã CSS được thu nhỏ & tối ưu hóa mà bạn chỉ cần sao chép + dán vào trang web của mình

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.