34

未使用のスタイルでいっぱいになった古いスタイルシートがあります。問題は、必要なものと不要なものを識別することです。これを支援するツールはありますか？

4

7 に答える 7

26

CSS の使用は、優れた Firefox アドインです。複数のページをブラウズすることができ、それらのいずれにも使用されていないルールが特定されるため、単一のページをスキャンするツールよりも正確です。

于 2010-08-26T10:20:53.847 に答える
3

Firefox Dust-Me Selectorsアドオンを試すことができます。

于 2010-08-26T10:19:51.713 に答える
2

firebug 用の Google の pagespeed プラグインをインストールします。

http://code.google.com/speed/page-speed/

次に、Firebug で [ページ速度] タブを開き、[パフォーマンス] を選択して [パフォーマンスの分析] をクリックします。

現在のページに未使用のスタイル ルールがある場合は、他の多くの有用な提案とともに、「未使用の Css を削除する」というラベルの付いたリスト項目が表示されます。クリックして展開すると、現在のページに表示されている未使用の css ルールのリソース別の内訳と、未使用のルールを削除することで節約されるメモリ サイズが表示されます。

これは、ページ速度ツールキットの小さな機能の 1 つにすぎません。クライアント側でのページ パフォーマンスに少しでも興味がある場合は、十分に理解しているはずです。

yahoo が開発した firebug 用の同様のツールである yslow にも興味があるかもしれません。

于 2010-12-29T04:04:51.017 に答える
0

npm install uncss -g

それで

uncss http://example.com/ > out.css

于 2015-07-24T02:43:34.783 に答える
0

Grunt を使用して未使用の CSS を自動的に削除する

Gruntfile.js

module.exports = function (grunt) {

    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'css/test.css' }
                ]
            }
        },
      cssmin: {
            dist: {
                files: [
                    { src: 'css/test.css', dest: 'cleancss/testmin.css' }
                ]
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-uncss');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default tasks.
    grunt.registerTask('default', ['uncss', 'cssmin']);

};
于 2014-04-17T08:46:01.933 に答える