Rails资产管道解决方案为IE 4096选择器/ stylesheet限制 [英] Rails asset pipeline solution for IE 4096 selector/stylesheet limit

问题描述

Microsoft的IE支持文档说明在Internet Explorer 6-9中：

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

1. 不应用前31个样式标签之后的所有样式标签。


2. 不应用前4,095个规则后的所有样式规则。


3. 在使用@import规则持续导入导入其他样式表的外部样式表的页面上，会忽略超过三个级别的样式表。

有很多证据证明这个问题与脚本演示。另请参见祝福。

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

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

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!

• Bless 是为了解决这个问题而创建的，方法是拆分样式表以保留每张工作表的最大选择器数量限制。 bless在node.js的服务器上运行。我还没有看到一个Ruby的等价物。 Eric Fields试图将使用指南针编译的资源投放到Bless （正在运行在节点），但该解决方案依赖于Compass处理资产编译，因此似乎不适用于资产管道。注意，Bless不是链接到多个样式表，而是将 @include 语句添加到第一个工作表，这可能是为了避免触摸标记。

• 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.

当Christian Peters（@crispy）发现此问题，他实施了分隔符像Bless，也通过Compass输出到一个自定义模块，它在Rails 3.1之前工作得很好。之后，他使用SprocketsEngine修改了其拆分器，用于与Rails Asset管道集成。我尝试实现新的代码，但它似乎没有自动函数（虽然分离器工作正常时，在控制台中手动调用）。

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).

有关IE 6-9中CSS限制的详细信息，请参阅以下相关问题：

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

• IE 8对每页样式表的数量有限制吗？


• Internet Explorer的CSS规则限制

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

推荐答案

我们有一个自动化（虽然有点尴尬）解决方案工作在生产Rails 3.1应用程序，资产管道到位。 Ryan已经在他的问题中引用了解决方案，但我尝试提供更全面的答案。

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.

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

The asset pipeline pipes an asset through different Sprocket engines.

所以你可能有eg通过ERB Sprocket引擎运行，然后传递到Sass Sprocket引擎等的 ie.css.sass.erb 。但它总是一个文件和一个文件。

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.

在这个特殊问题中，我们希望有1个入站文件和n个出站文件。
我们还没有找到一种方法使这可能用链轮。但我们找到了一个解决方法：

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:

提供 ie.css.sass ，包括完整的样式表和 ie_portion2.css.sass.split2 只是导入完整的ie.css文件：

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'

对于 split2 文件扩展名，我们注册一个Sprockets引擎：

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

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

我们将其内容传递给CssSplitter并指示它提取第2部分（> 4095个选择器）：

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

这也适用于其他部分（split3，...）。

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

CSS拆分器识别有效位置，其中样式表可以拆分为小于4096个选择器的部分，并返回请求的部分。

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

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

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.

更新：

上面的CssSplitter提示现已发布为一个宝石： https://github.com/ zweilove / css_splitter

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

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