web-dev-qa-db-ja.com

未使用のCSS定義を識別する方法

プロジェクトで未使用のCSS定義を識別するのに役立つ良い方法はありますか?たくさんのcssファイルが引き込まれ、今は少し物事を片付けようとしています。

402
jswanson

Firefoxの拡張機能Dust-Meを https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ でご覧ください。

143
David Medinets

Chromeデベロッパーツール には監査タブがあり、未使用のCSSセレクタを表示できます。

監査を実行してから、Webページのパフォーマンスを参照してください。未使用のCSSルールを削除します

enter image description here

257
Derek Adair

私はちょうどこのサイトを見つけました - http://unused-css.com/

よさそうですが、私のサイトにアップロードする前に、出力された 'clean' cssを徹底的にチェックする必要があります。

また、これらすべてのツールと同じように、IDやクラスをスタイルなしで削除せずにJavaScriptセレクターとして使用されていることを確認する必要があります

下記の内容は http://unused-css.com/ から引用されています。

Latish Sehgal は未使用のCSSクラスを見つけて削除するためにwindowsアプリケーションを書きました。私はそれをテストしていませんが、説明から、あなたはあなたのhtmlファイルと一つのCSSファイルのパスを提供しなければなりません。その後、プログラムは未使用のCSSセレクタを一覧表示します。スクリーンショットから、このリストをエクスポートしたり、新しいクリーンなCSSファイルをダウンロードしたりする方法がないようです。サービスは1つのCSSファイルに制限されているようにも見えます。複数のファイルを削除したい場合は、それらを1つずつ削除する必要があります。

Dust-Me Selectors は、未使用のCSSセレクターを見つけるFirefoxの拡張機能(v1.5以降用)です。表示しているページのすべてのスタイルシートからすべてのセレクタを抽出し、そのページを分析して、使用されていないセレクタを確認します。その後データが保存されるので、後続のページをテストするときに、セレクタが発生したときにセレクタがリストから削除される可能性があります。このツールは、ウェブサイト全体をくぐらせることができるはずですが、残念ながらそれを機能させることができました。また、スタイルを削除した状態でCSSファイルを構成してダウンロードできるとは考えていません。

Topstyle はCSSを編集するためのたくさんのツールを含むWindowsアプリケーションです。あまりテストしていませんが、未使用のCSSセレクタを削除する機能があるようです。このソフトウェアの価格は80 USDです。

Liquidcity CSS cleaner は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ファイルのみが一覧表示されます。

65
megaSteve4

Google Page Speed あなたのためにそれをすることができます(それは実際にどのCSSが使われていないかをあなたに言うこと以上のことをします) FireFoxでは、FireBugアドオンとして利用可能です。それからオンライン版もあります。

21
Salman A

Aより良いCSS Minifier C#では冗長なスタイルをダンプします。

これと一緒にDust-Meを使用したいと思うでしょう。

現在目に見えないコンテンツがある場合は、必要なスタイルを捨ててください。

編集:リンクが壊れていたがarchive.orgはページとコードの両方を持っています。

8
mjc

CSSの使用法

どのCSSルールが実際に使用されているかを表示するためのFirebug拡張。

CSS UsageはFirebugの拡張機能です(Firebugをインストールするために必要です)。未使用のCSSスタイルルールを知ることができます。それはあなたが使用し、使用しないCSSを識別します。不要な部分を削除できることを指摘できます。 CSSファイルをできるだけ軽量に保つために、このアドオンを必ず使用してください。

7
Somnath Muluk

「CSS Roundup」 http://blog.brothersmorrison.com/?p=198 DustMeセレクタを新しい名前でFirefoxと動作するように更新したようです。

6
Josh

使用 Internet Explorer開発者ツールバー 、s表示> CSSセレクタの一致:設定されているすべてのスタイルルールとその回数のレポートを表示するそれらは現在のページで使用されています。

3
Jitendra Vyas

GoogleのFirefox用PageSpeed をチェックしてください。これをして全体の負荷をもっとします。

どうやらChromeプラグインも開発中です。

3
Drew Noakes