Web サイト内で未使用の画像や CSS スタイルを見つけるにはどうすればよいですか?[閉まっている]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
未使用の画像ファイルを見つけるために使用できる方法（試行錯誤以外）はありますか?サイト内に存在すらしない ID やクラスの CSS 宣言はどうすればよいでしょうか?
サイトをスキャンしてプロファイリングし、どの画像やスタイルが読み込まれないかを確認するスクリプトを作成する方法があるようです。
解決
ページ上の未使用の CSS セレクターを検索する Firefox 拡張機能があります。サイト全体をスパイダー化するオプションがあります。バージョン 3.01 は、新しいバージョンの Firefox で動作するはずです。
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
そして、ここに別のオプションがあります。
他のヒント
Web サービスに料金を支払ったり、アドオンを検索したりする必要はありません。これは Google Chrome の F12 ですでにインストールされています。 (Inspector)->Audits->Remove unused CSS rules
スクリーンショット:
アップデート：2017 年 6 月 30 日
Chrome 59 が提供するようになりました CSS および JS コード カバレッジ. 。見る https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
ファイルレベルで:
wget を使用してサイトを積極的にスパイダーし、http サーバーのログを処理してアクセスされたファイルのリストを取得し、これをサイト内のファイルと比較します。
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
CSS 冗長性チェッカー はローカルで実行するツールで、スタイルシートと、URL のリストまたは HTML ファイルのディレクトリを渡します。ツールのサイトに記載されている説明は次のとおりです。
CSS StyleSheetとHTMLファイルのURLをリストする.txtファイルリストのいずれか、またはHTMLファイルのディレクトリのいずれかを与えられた簡単なスクリプトは、それらすべてを繰り返し、HTMLでは呼ばれないStyleSheetのCSSステートメントをリストします。
基本的に、CSS ファイルを適切かつコンパクトに保つのに役立ちます。そして、それはかなり正確です。
Tim Murtaugh が A List Apart ブログ投稿で指摘したように、「CSS をクリーンに保つための 2 つのツール":
CSSCSSは、提供するCSSファイルを解析し、どのルールセットが複製された宣言を示しているかを知らせます。
そして、質問に最も関連するのは、
ヘリウムCSS
Heliumは、Webサイト上の多くのページで未使用のCSSを発見するためのツールです。
このツールは JavaScript ベースであり、ブラウザから実行されます。
Heliumは、サイトのさまざまなセクションのURLのリストを受け入れ、各ページをロードおよび解析して、すべてのスタイルシートのリストを作成します。次に、URLリストの各ページにアクセスし、スタイルシートで見つかったセレクターがページで使用されているかどうかを確認します。最後に、各スタイルシートと、指定されたページで使用されていないことがわかったセレクターを詳述するレポートを生成します。
Adobe Dreamweaver または Adobe Golive には、孤立したスタイルと画像の両方を検索する機能があったことを思い出します。今はどれだったか思い出せません。おそらく両方ですが、その特徴はうまく隠されていました。
トップスタイル には、孤立したクラスを見つけて処理するための一連のツールがあります。また、HTML 内で ID とクラスが使用されている場所に関するレポートも提供されるため、関連するマークアップを開いてそこにスキップすることができます。この機能に関する Web サイトの宣伝文は次のとおりです。
現場レポート:あなたのサイトでスタイルが使用されている一目を見てください。スタイルシートで定義されていないスタイルクラスを適用した場所を確認するか、使用していないスタイルクラスを確認してください。
馴染みのないウェブサイトを分析するのに非常に役立ちます。
ただし、未使用の画像は見つかりません。
Chrome Canary ビルドには、開発者ツールバーに「CSS カバレッジ」 実験的な開発者機能の 1 つとして。このオプションはタイムライン タブに表示され、未使用の CSS のリストを取得するために使用できます。
開発者ツールバーの設定でもこの機能を有効にする必要があることに注意してください。この機能はおそらく正式な Chrome リリースに組み込まれるはずです。
Firefox のすべてのバージョンで動作するこのツールを見つけました。仕組みを理解するには少し時間がかかりますが、一度開始するとかなり良いようです。リマークアウトされた CSS セレクターを含む新しいバージョンの CSS が保存されるため、必要に応じてすぐに元に戻すことができます。
この小さなツールは、一部の HTML で使用されている CSS ルールのリストを提供します。
ここにあります コードペン
クリック コードスニペットを実行する, をクリックしてから、 全ページ それに入るために。次に、スニペットの指示に従います。ページ全体を実行して、HTML / CSS で動作することを確認できます。
ただし、ツールとしてコード ペンをブックマークするだけの方が簡単です。
/* CSS CLEANER INSTRUCTIONS
1. Paste your HTML into the HTML window
2. Paste your CSS into the CSS window
5. The web page result now ends with a list of just the CSS used by your HTML!
*/
function cssRecursive(e) {
var cssList = css(e);
for (var i = 0; i < e.children.length; ++i) {
var childElement = e.children[i];
cssList = union(cssList, cssRecursive(childElement));
}
return cssList;
}
function css(a) {
var sheets = document.styleSheets,
o = [];
a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (a.matches(rules[r].selectorText)) {
o.push(rules[r].cssText);
}
}
}
return o;
}
function union(x, y) {
return unique(x.concat(y));
};
function unique(x) {
return x.filter(function(elem, index) {
return x.indexOf(elem) == index;
});
};
document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
var cssRule = allCss[i];
document.write(cssRule + "<br/>");
}
document.write("</code>");ここにリストされているツールはすべて CSS に最適です。Dreamweaver & Co については知りません。しかし、少し前に、Web サイトのプロジェクトをクリーンアップするのに役立つ小さなプログラムを作成しました。
CSS などには役に立ちませんが、孤立した画像やその他の種類のファイルには役に立ちません。
それが役に立てば幸い！
Helium CSS はこれに最適なツールです。ただし、このツールは Web サイトの開発バージョンまたはローカル バージョンで実行する必要があることに注意してください。これを実稼働バージョンで実行すると、訪問者は Helium テスト環境を確認できるようになります。
未使用の画像ファイルを見つけるツールに関する質問に答えるには、次のコマンドを使用できます。 ゼヌ・リンク・スルース サイトをスパイダーして、サイトで使用されているすべての画像を検索します。次に、Xenu はディレクトリをクロールして孤立したファイルを見つけることができるように、FTP アクセスを要求します。まだ実稼働サーバーで使用していませんが、検討する価値はありそうです。
編集：JavaScriptで使用されている画像を削除しないように注意する必要があります。
