プロジェクトで未使用のcss定義を特定するのに役立つ良い方法はありますか?たくさんのcssファイルが取り込まれましたが、今は少し片付けようとしています。
プロジェクトで未使用のcss定義を特定するのに役立つ良い方法はありますか?たくさんのcssファイルが取り込まれましたが、今は少し片付けようとしています。
回答:
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/にあるFirefox拡張機能Dust-Meをご覧ください。
Chromeデベロッパーツールには、未使用のCSSセレクターを表示できる[ 監査 ]タブがあります。
監査を実行し、[ Webページのパフォーマンス]で[ 未使用のCSSルールを削除する]を参照してください
このサイトを見つけました– http://unused-css.com/
見た目は良いですが、出力された「クリーン」なCSSを自分のサイトにアップロードする前に徹底的にチェックする必要があります。
これらすべてのツールと同様 と同様に、スタイルのないIDとクラスが削除されていないことを確認する必要がありますが、JavaScriptセレクターとして使用されています。
以下のコンテンツは http://unused-css.com/ているため、他のソリューションを推奨するためにクレジットを提供してください。
ラティッシュセーガルは、未使用のCSSクラスを見つけて削除するWindowsアプリケーションを作成しました。私はそれをテストしていませんが、説明から、htmlファイルと1つのCSSファイルのパスを提供する必要があります。プログラムは、未使用のCSSセレクターをリストします。スクリーンショットから、このリストをエクスポートしたり、新しいクリーンなCSSファイルをダウンロードしたりする方法はないようです。また、サービスは1つのCSSファイルに制限されているようです。クリーンアップするファイルが複数ある場合は、1つずつクリーンアップする必要があります。
Dust-Meセレクターは、未使用のCSSセレクターを検出するFirefoxの拡張機能(v1.5以降用)です。表示しているページのすべてのスタイルシートからすべてのセレクターを抽出し、そのページを分析して、使用されていないセレクターを確認します。次にデータが保存されるので、後続のページをテストするときに、セレクターが検出されたときにリストから除外できます。このツールはウェブサイト全体をスパイダーできるはずですが、残念ながら動作させることができました。また、スタイルを削除したCSSファイルを設定してダウンロードできるとは思いません。
Topstyleは、CSSを編集するための一連のツールを含むWindowsアプリケーションです。あまりテストしていませんが、未使用のCSSセレクターを削除する機能があるようです。このソフトウェアの費用は80米ドルです。
Liquidcity CSSクリーナーは、正規表現を使用して1つのページのスタイルをチェックするphpスクリプトです。HTMLコードで利用できないクラスを教えてくれます。私はこのソリューションをテストしていません。
DeadweightはCSSカバレッジツールです。一連のスタイルシートと一連のURLが与えられると、実際に使用されるセレクターと「安全に」削除できるリストが決定されます。このツールはrubyモジュールであり、rails Webサイトでのみ機能します。未使用のセレクターは、CSSファイルから手動で削除する必要があります。
ヘリウム CSSは、Webサイトの多くのページで未使用のCSSを検出するためのJavaScriptツールです。最初に、テストするページにJavaScriptファイルをインストールする必要があります。次に、ヘリウム関数を呼び出してクリーニングを開始する必要があります。
UnusedCSS.comは、使いやすいインターフェイスを持つWebアプリケーションです。サイトのURLを入力すると、CSSセレクターのリストが表示されます。各セレクターの数値は、セレクターが使用された回数を示します。このサービスにはいくつかの制限があります。@importステートメントはサポートされていません。新しいクリーンなCSSファイルを構成してダウンロードすることはできません。
CSSESSは、任意のサイトで未使用のCSSセレクターを見つけるのに役立つブックマークレットです。このツールはかなり使いやすいですが、クリーンなCSSファイルを構成してダウンロードすることはできません。未使用のCSSファイルのみがリストされます。
Google Page Speedがそれを行います(実際には、使用されていないCSSを通知するだけではありません)。FireFoxでは、FireBugアドオンとして利用できます。それからオンライン版もあります。
より良いCSS縮小版C#のは冗長なスタイルをダンプします。
これと一緒にDust-Meを使用することもできます。
ダストミーに現在表示されていないコンテンツがある場合は、必要なスタイルを破棄する可能性があることに注意してください。
編集:リンクは壊れていましたが、archive.orgにはページとコードの両方があります。
誰かがDustMe Selectorsを更新してFirefoxを新しい名前で再び使用できるように見えます-'CSS Roundup' http://blog.brothersmorrison.com/?p=198
使用Internet Explorerの開発者ツールバーは、sのビュー> CSSセレクタにマッチ:Viewは、すべてのスタイル設定ルールと何回、彼らは現在のページで使用されているのを報告しています。
GoogleのPageSpeed for Firefoxをご覧ください。これを行うと、全体の負荷が増えます。
どうやらChromeプラグインも開発中です。