针对 IE 4096 选择器/样式表限制的 Rails 资产管道解决方案 [英] Rails asset pipeline solution for IE 4096 selector/stylesheet limit

问题描述

问题

Microsoft 的 IE 支持文档在 Internet Explorer 6-9 中解释了这一点:

<块引用>

1. 不应用前 31 个样式标签之后的所有样式标签.
2. 不应用前 4,095 条规则之后的所有样式规则.
3. 在使用@import 规则连续导入导入其他样式表的外部样式表的页面上，深度超过三层的样式表将被忽略.

脚本演示有很多证据表明存在此问题.另见祝福.

需要解决方案

我们需要一种方法来拆分资产管道中由链轮生成的编译样式表，以保持最大选择器计数低于 4096，并在已部署的 Rails 应用程序的 HTML 中链接到它们.我们如何将经过处理的资产(特别是样式表)的编译输出作为参数传递给可以修改文件的方法?

请参阅以下尝试以获取起点.如果有人能帮我找到一种方法来实现可操作性(或全新的解决方案)，那就太棒了！

现有解决方案尝试

• Bless 旨在通过拆分样式表来保持每个表的最大选择器数量来解决这个问题在限制之下.Bless 在 node.js 中的服务器上运行.我还没有看到 Ruby 等价物.Eric Fields 尝试 提供使用指南针编译的资产以祝福(在节点中运行)，但该解决方案依赖于 Compass 处理资产编译，因此似乎不适用于资产管道.请注意，Bless 不是链接到多个样式表，而是将 @include 语句添加到第一个表中，这可能是避免触及标记的方法.p>

• 当 Christian Peters (@crispy) 发现了这个问题，他实现了一个分离器，比如 Bless，它也将 Compass 输出传递给了一个自定义模块，在 Rails 3.1 之前运行良好.后来，他使用 SprocketsEngine 调整了他的拆分器，以便与 Rails 资产管道集成.我已尝试实现新代码，但它似乎无法自动运行(尽管在控制台中手动调用时拆分器工作正常).

相关信息

有关 IE 6-9 中 CSS 限制的更多信息，请参阅以下相关问题:

• IE 8 是否有每页的样式表数量有限制吗?
• Internet Explorer 的 CSS 规则限制

解决方案

我们有一个自动化(虽然有点笨拙)的解决方案，用于生产中的 Rails 3.1 应用程序，其中资产管道就位.Ryan 已经在他的问题中引用了解决方案，但我尝试提出更全面的答案.

资产管道通过不同的 Sprocket 引擎管理资产.

所以你可能有例如一个ie.css.sass.erb，它运行在ERB Sprocket引擎中，然后传递给Sass Sprocket引擎等等.但它总是一进一出.

在这个特殊问题中，我们希望有 1 个入站文件和 n 个出站文件.我们还没有找到用链轮实现这一点的方法.但我们找到了一种解决方法:

提供包含完整样式表的 ie.css.sass 和仅导入完整 ie.css 文件的 ie_portion2.css.sass.split2:>

//= 包含 'ie.css'

对于 split2 文件扩展名，我们注册一个链轮引擎:

需要'css_splitter'Rails.application.assets.register_engine '.split2', CssSplitter::SprocketsEngine

在评估带有 split2 扩展的资产时，我们将其内容传递给 CssSplitter 并指示它提取第 2 部分(> 4095 个选择器):

需要'倾斜'模块 CssSplitter类链轮引擎 <倾斜::模板def self.engine_initialized?真的结尾准备结尾def 评估(范围，本地，& 块)part = scope.pathname.extname =~/(d+)$/&&$1 ||0CssSplitter.split_string 数据，part.to_i结尾结尾结尾

这也适用于其他部分(split3，...).

CSS 拆分器 识别可以将样式表拆分为小于4096 个选择器并返回请求的部分.

结果是一个 ie_portion2.css，你必须在头部链接并单独预编译.

我希望我修改后的 CSS Splitter Gist 足够完整以使用该解决方案.

更新:

上面提到的 CssSplitter 现在已经作为 gem 发布了:https://github.com/zweilove/css_splitter

The problem

Microsoft's IE support documentation explains that in Internet Explorer 6-9:

1. All style tags after the first 31 style tags are not applied.
2. All style rules after the first 4,095 rules are not applied.
3. On pages that uses the @import rule to continously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

There is a lot of evidence of this problem with script demos. See also Bless.

Solution needed

We need a way to split up compiled stylesheets generated by Sprockets in the asset pipeline to keep the max selector count below 4096, and link to them in the HTML of a deployed Rails application. How can we pass the compiled output of processed assets (specifically stylesheets) as an argument to a method that can then modify the files?

See the below attempts for a place to start. If someone could help me find a way to make either operational (or an entirely new solution), that would be fantastic!

Existing solution attempts

• Bless was created to solve this problem by splitting up stylesheets to keep the max selector count per sheet under the limit. Bless runs on the server in node.js. I haven't seen a Ruby-equivalent yet. Eric Fields tried to serve assets compiled with compass to Bless (running in node), but that solution depends on Compass handling asset compilation, and thus doesn't seem to work with the asset pipeline. Note that instead of linking to multiple stylesheets, Bless adds @include statements to the first sheet, which may be the way to go so as to avoid touching the markup.

• When Christian Peters (@crispy) discovered this problem, he implemented a splitter like Bless that also passed Compass output to a custom module, which worked great before Rails 3.1. Later he adapted his splitter with a SprocketsEngine for integration with the Rails Asset pipeline. I've tried implementing the new code, but it doesn't seem to function automatically (though the splitter works fine when called manually in the console).

Related information

For more information on the CSS limits in IE 6-9, see these related questions:

• Does IE 8 have a limit on number of stylesheets per page?
• Internet Explorer's CSS rules limits

解决方案

We have an automated (albeit somehow awkward) solution working in production for a Rails 3.1 app with asset pipeline in place. Ryan already referenced the solution in his question but I try to come up with a more comprehensive answer.

The asset pipeline pipes an asset through different Sprocket engines.

So you might have e.g. a ie.css.sass.erb that runs through the ERB Sprocket engine and then passed to the Sass Sprocket engine etc. But it is always one file in and one file out.

In this special problem, we would like to have 1 inbound file and n outbound files. We have not found a way to make this possible with sprockets. But we found a workaround:

Provide an ie.css.sass that includes the complete stylesheet and a ie_portion2.css.sass.split2 that just imports the complete ie.css file:

//= include 'ie.css'

For the split2 file extension, we register a Sprockets Engine:

require 'css_splitter'
Rails.application.assets.register_engine '.split2', CssSplitter::SprocketsEngine

When evaluating assets with the split2 extension, we pass its content to the CssSplitter and instruct it to extract the part 2 (> 4095 selectors):

require 'tilt'
module CssSplitter

  class SprocketsEngine < Tilt::Template
    def self.engine_initialized?
      true
    end

    def prepare
    end

    def evaluate(scope, locals, &block)
      part = scope.pathname.extname =~ /(d+)$/ && $1 || 0
      CssSplitter.split_string data, part.to_i
    end
  end
end

This would also work for further parts (split3, ...).

The CSS Splitter recognizes valid places where stylesheets can be split into parts with less than 4096 selectors and returns the requested part.

The result is a ie_portion2.css which you have to link in the head and precompile separately.

I hope my revised CSS Splitter Gist is complete enough to employ the solution.

Update:

The CssSplitter mentionend above has been release as a gem now: https://github.com/zweilove/css_splitter

这篇关于针对 IE 4096 选择器/样式表限制的 Rails 资产管道解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！