0

晚上好。

我有一个带有 +20 css 文件导入的 html 页面。如何将这些连接到一个 css 文件中并仅提取与 html 页面相关的 css 规则？

4

3 回答 3

1

这个问题不能解决OP的问题。但是，它留在这里作为来自搜索引擎的客人的参考。

您的方法略有缺陷。

请允许我将您重定向到 Chris Coyer @ CSS-Tricks 的一篇精彩文章：一二或三。

这是简短的版本，根据这种方法，每个页面最多应该有 3 个 CSS 文件：

  1. global.css - 包含站点级规则（正文背景、CSS 重置、排版等）。
  2. section.css - 包含部分级别的规则，我的意思是，Stack Overflow 的主页将具有某种风格，而所有常见问题解答共享另一个不同的常见问题解答特定规则文件。
  3. page.css - 包含页面级规则。如果需要特定页面的特定规则（例如，关于页面），它们会被放在这里。

原因是，不会更改的文件会被缓存。这意味着，用户只会下载一次 CSS 文件（假设它没有更改），并且在以后的访问中，文件将从用户的机器上加载，从而节省了宝贵的时间和带宽。

如果您提供一个文件，该文件是根据用户正在查看的页面生成的，那么您将失去缓存能力。因此，虽然文件大小会更小，但您需要一遍又一遍地下载文件。

tl;博士

制作一个保持静态的全局 CSS 文件，将其缩小并提供服务。然后制作一堆更具体的 CSS 文件，在您的网站/应用程序的不同部分提供。在您需要第三页特定文件的地方不会发生太多。

于 2012-10-02T17:50:13.907 回答
0

创建一个空白的 CSS 文件。将所有 CSS 复制到该文件中。缩小新的 CSS 文件。导入新的 CSS 文件并删除对所有其他 CSS 文件的引用。留给浏览器“只提取与html页面相关的css规则”。

于 2012-10-02T17:38:45.270 回答
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 回答