Webページで使用されているCSSスタイルまたは使用されていないCSSスタイルを確認する方法はありますか？

121

Webページで現在使用されているCSSスタイルを知りたい。

css

— 助けて
ソース

2

CSSインスペクターを備えたブラウザーを使用します。SafariとChrome（別名Webkit）では、これを開発者ツールの一部として提供しています。Firefoxでは、これはFirebugプラグインによって提供されます。Internet Explorerには、私が認識している類似のものはありません。インスペクタを使用すると、要素を選択して右クリックし、[要素の検査]を選択できます。選択した要素に適用されているセレクタと個々のルールが表示されます。

— Lee

@Lee ie8開発者ツールバーはcssセレクターのfirebugと同じように動作し、右側に適用されたスタイルを選択して確認できます。

— 神戸

特定のページで使用されているcssのみ

— cweiske

58

Firebug用のCSS Usageアドオンをインストールし、そのページで実行します。そのページで使用されているスタイルと使用されていないスタイルがわかります。

— 神戸
ソース

@Harry、あなたはそれがあなたがネットを持っており、すべての////私はあなたが何かを必要とする場合は知らせて放火犯の一部としてタブになりますプラグインこれをインストールしたら

— 神戸

33

Chromeにこのようなものはありますか？

— Pedro Luz、2012年

3

これはもう機能していないようで、残念ながらもはやサポートされていません。

— nostromo 2013

1

Firebugが保守されなくなったことに注意してください。このアドオンは、Firefoxに組み込まれているDevToolsでは機能しないと思います。

— Andrew

検査中にChromeで監査オプションを使用できます。この図は、その特定のページで使用されていないCSSのみを示しています。

— サラスハリ2017

81

Google Chromeには、未使用のCSSを確認する2つの方法があります。

1. [監査]タブ： >ページで[右クリック] + [要素を検査]をクリックし、[監査]タブを見つけて監査を実行し、[Webページのパフォーマンス]がオンになっていることを確認します。

未使用のCSSタグをすべてリストします -下の画像を参照してください。

更新： --------------または--------------

2. [カバレッジ]タブ： >ページの右クリック+ [要素を検査]で右端の3つのドットを見つけ（画像で円で囲んで）、コンソールドロワーを開いて（またはEscキーを押して）、最後にドロワーの左側の3つのドットをクリックします（丸で囲んで）画像）カバレッジツールを開きます。

Chromeは未使用のCSSとJSを表示するツールをリリースしました -Chrome 59の更新記録（画像の赤い四角）を開始および停止して、ページ上のユーザーエクスペリエンスをより適切にカバーできるようにします。

ファイル内のすべての使用済みおよび未使用のCSS / JSを表示します -以下の画像を参照してください。

— コーデル
ソース

3

どちらが使用されているかを確認するのは素晴らしいことですが、これは素晴らしいことです。

— Serj Sagan 2017

私が知る限り、何が使用されているかを知りたい場合は、Chromeのプラグインをインストールするのが最善策です-申し訳ありません

— Cordell

新しいChrome 59アップデートでは、使用済み/未使用のCSSとJSを確認できます

— Cordell

これを行うためにChromeはどのライブラリを使用しますか？

— Alexey Shevelyov

1

@UMAR multi-page website coverage == (single-page coverage) * n ここで、n = Webサイトの各ページ。ツール/この答えを「役に立たない」として分類しても、誰にも利益はありません。

— Shai Cohen

40

完全を期すため、そしてコメントで質問されたため、同じ目的でChromeに CSS監査ツールも追加されました。ここにいくつかの詳細：

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— ヤン・ペツォルド
ソース

3

この回答が参照している「CSS監査ツール」がChromeデベロッパーツールの[ 監査 ]タブと同じかどうかはわかりませんが、使用されていないCSSルールがわかります（例：「Some.css：42％現在のページでは使用されていません。」）。

— ケニーエビット2014年

11

見てくださいUnCSSを。使用済みCSSのCSSファイルを作成するのに役立ちます。

— ロバート・ブリシータ
ソース

1

それは素晴らしいプログラムです。ありがとう！ロブ

— r0berts

1

一度限りの良いウェブツール。ty

— ビリーノア2017

1

これはすごい--nevermind UnCSS cannot be run on non-HTML pages, such as templates or PHP files.......

— Brian Powell

@ brian-powellはい、テンプレート出力を最初に生成する必要があります。UnCSSは他にどのようにして必要なものを知るのでしょうか？

— Robert Brisita

8

CSS Digを使用しています。クローム用に作られていますが、素晴らしいツールだと思います！

— cs.matyi
ソース

私はこれを試してみました-それはcssdig.comのホームを呼び出すことですべてを行うので、ローカルでホストされているものを表示または分析することはできません。

— ブリリアント

0

単純なjsスクリプトであるこのツールを使用してみてくださいくださいhttps://github.com/shashwatsahai/CSSExtractor/このツールは、アクティブなスタイルのすべてのソースをリストする特定のページからCSSを取得し、ソースを値としてのキーとルール。これは、hrefリンクからすべてのCSSをロードし、それらから適用されるすべてのスタイルを通知します。コードを変更して、すべてのCSSを.cssファイルに保存できます。それにより、すべてのCSSを組み合わせます。

— シャシュワットサハイ
ソース

0

サードパーティのツールやアプリがなくても、[カバレッジ]タブでChrome開発ツールを使用して、未使用のCSSとJavaScriptを見つけることができます。google開発者からの以下の投稿を読んでください。 Chromeカバレッジタブ

— マハディサファリ
ソース