0

こんばんは。

+20cssファイルのインポートを含むhtmlページがあります。これらを1つのcssファイルに連結し、htmlページに関連するcssルールのみを抽出するにはどうすればよいですか？

4

3 に答える 3

1

この質問はOPの問題を解決しません。ただし、検索エンジンから到着するゲストのための参照としてここに残されています。

あなたのアプローチには少し欠陥があります。

Chris Coyer @ CSS-Tricks：One TwoorThreeによるすばらしい記事にリダイレクトさせてください。

これが短いバージョンです。このアプローチによると、各ページには最大3つのCSSファイルが必要です。

  1. global.css-サイトレベルのルール（本文の背景、CSSリセット、タイポグラフィなど）が含まれています。
  2. section.css-セクションレベルのルールが含まれています。つまり、セクションによって、Stack Overflowのメインページは特定のスタイルになりますが、すべてのFAQは、FAQ固有のルールの別の異なるファイルを共有します。
  3. page.css-ページレベルのルールが含まれています。特定のページに特定のルール（たとえば、aboutページ）が必要な場合は、ここに配置されます。

その理由は、変更されないファイルがキャッシュされるためです。つまり、ユーザーはCSSファイルを1回だけダウンロードし（変更されないと仮定）、今後のアクセス時にファイルがユーザーのマシンから読み込まれるため、貴重な時間と帯域幅を節約できます。

ユーザーが表示しているページに基づいて生成された1つのファイルを提供すると、そのキャッシュ機能が失われます。そのため、ファイルサイズは小さくなりますが、ファイルを何度もダウンロードする必要があります。

tl; dr

静的なままであるグローバルCSSファイルを作成し、それを縮小して提供します。次に、サイト/アプリのさまざまなセクションで提供される、より具体的なCSSファイルの束を作成します。その3番目のページ固有のファイルが必要な場合はあまり起こりません。

于 2012-10-02T17:50:13.907 に答える
0

簡単な解決策は考えられません。ただし、jQueryを使用する場合は、次のコードを試すことができます。CSSでDOM内のすべての要素を検索し、出力します。<script type="text/javascript"></script>セクションのタグに貼り付けて、<head>jQueryが含まれていることを確認してください。

Chromeと単純なテストサイトでのみテストされていますが、より複雑なスタイルシートとDOM構造でも機能するはずです。

$(function(){
    var styles = new Array;
    $('body, body *').each(function(index, element){
        //Get all stylesheets
        var sheets = document.styleSheets;
        for(var i in sheets) {
            //For every stylesheet...
            var rules = sheets[i].rules || sheets[i].cssRules;
            for(var r in rules) {
                //Check or every rule if it matches the element & check if already appended
                if($(element).is(rules[r].selectorText) &&
                   $.inArray(rules[r].cssText,styles) == -1){
                    //Append CSS to array
                    styles.push(rules[r].cssText);
                }
            }
        }
    });
    //Output
    $('body').text(styles.join(''));
});
        ​
于 2012-10-02T22:03:26.873 に答える
0

空のCSSファイルを作成します。すべてのCSSをそのファイルにコピーします。新しいCSSファイルを縮小します。新しいCSSファイルをインポートし、他のすべてのCSSファイルへの参照を削除します。「htmlページに関連するcssルールのみを抽出する」ためにブラウザに任せてください。

于 2012-10-02T17:38:45.270 に答える