たくさんのCSSファイルが取り込まれ、今は少しクリーンアップしようとしています。
プロジェクト全体で未使用のCSS定義を効率的に識別するにはどうすればよいですか？
179865 次
3 に答える
264
Chrome デベロッパー ツールには、未使用の CSS セレクターを表示できる [監査] タブがあります。
監査を実行し、[ Web ページのパフォーマンス] の下にある[未使用の CSS ルールを削除する]を参照してください。
于 2010-06-24T19:08:36.790 に答える
66
このサイトを見つけました – http://unused-css.com/
良さそうに見えますが、自分のサイトにアップロードする前に、出力された「クリーンな」css を徹底的にチェックする必要があります。
また、これらすべてのツールと同様に、スタイルのない ID とクラスを削除せず、JavaScript セレクターとして使用されていることを確認する必要があります。
以下のコンテンツはhttp://unused-css.com/から取得したものであるため、他のソリューションを推奨したことは彼らの功績によるものです。
Latish Sehgalは、使用されていない CSS クラスを見つけて削除するための Windows アプリケーションを作成しました。私はそれをテストしていませんが、説明から、html ファイルと 1 つの CSS ファイルのパスを提供する必要があります。その後、プログラムは未使用の CSS セレクターを一覧表示します。スクリーンショットから、このリストをエクスポートしたり、新しいクリーンな CSS ファイルをダウンロードしたりする方法がないように見えます。また、サービスは 1 つの CSS ファイルに限定されているようです。クリーニングしたいファイルが複数ある場合は、1 つずつクリーニングする必要があります。
Dust-Me Selectorsは、未使用の CSS セレクターを見つける Firefox 拡張機能 (v1.5 以降用) です。表示しているページのすべてのスタイルシートからすべてのセレクターを抽出し、そのページを分析して、使用されていないセレクターを確認します。その後、データは保存されるため、後続のページをテストするときに、セレクターが検出されたときにリストから除外できます。このツールは Web サイト全体をスパイダーできるはずですが、残念ながら機能させることができませんでした。また、スタイルを削除した CSS ファイルを構成してダウンロードできるとは思えません。
Topstyleは、CSS を編集するための多数のツールを含む Windows アプリケーションです。あまりテストしていませんが、未使用の CSS セレクターを削除する機能があるようです。このソフトウェアの価格は 80 米ドルです。
Liquidcity CSS クリーナーは、正規表現を使用して 1 つのページのスタイルをチェックする php スクリプトです。HTML コードで使用できないクラスが表示されます。このソリューションはテストしていません。
Deadweightは CSS カバレッジ ツールです。スタイルシートのセットと URL のセットを指定すると、実際に使用されるセレクターと「安全に」削除できるリストを決定します。このツールは Ruby モジュールであり、Rails Web サイトでのみ動作します。未使用のセレクターは、CSS ファイルから手動で削除する必要があります。
Helium CSS は、Web サイトの多くのページで使用されていない CSS を検出するための JavaScript ツールです。最初に、テストするページに JavaScript ファイルをインストールする必要があります。次に、ヘリウム関数を呼び出してクリーニングを開始する必要があります。
UnusedCSS.com は、使いやすいインターフェースを備えた Web アプリケーションです。サイトの URL を入力すると、CSS セレクターのリストが表示されます。各セレクターの数字は、セレクターが使用された回数を示します。このサービスにはいくつかの制限があります。@import ステートメントはサポートされていません。新しいクリーンな CSS ファイルを構成してダウンロードすることはできません。
CSSESSは、どのサイトでも使用されていない CSS セレクターを見つけるのに役立つブックマークレットです。このツールは非常に使いやすいですが、クリーンな CSS ファイルを構成してダウンロードすることはできません。未使用の CSS ファイルのみがリストされます。
于 2011-06-08T17:18:34.573 に答える