css – Rails资源管道解决方案为IE 4096选择器/ stylesheet限制

问题

Microsoft’s IE support documentation解释说，在Internet Explorer 6-9中：

All style tags after the first 31 style tags are not applied.

All style rules after the first 4,095 rules are not applied.

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.

有很多证据表明与script demos这个问题。另见Bless。

需要解决方案

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

请参阅下面的尝试开始一个地方。如果有人可以帮助我找到一种方式使操作(或一个全新的解决方案)，那将是太棒了！

现有解决方案尝试

> Bless是为了解决这个问题，通过拆分样式表来保持每张表的最大选择器计数在限制之下。 bless在node.js的服务器上运行。我还没有看到一个Ruby的等价物。 Eric Fields试图使用serve assets compiled with compass to Bless(在节点上运行)，但是该解决方案依赖于Compass处理资产编译，因此似乎不适用于资产管道。注意，Bless不是链接到多个样式表，而是将@include语句添加到第一个工作表，这可能是为了避免接触标记。
>当Christian Peters(@crispy)discovered this problem，他implemented a splitter喜欢Bless，也通过Compass输出到一个自定义模块，它在Rails 3.1之前工作得很好。后来他adapted his splitter with a SprocketsEngine for integration with the Rails Asset pipeline.我已经尝试实现新的代码，但它似乎没有自动功能(虽然分离器工作正常时，在控制台中手动调用)。

解决方法

我们有一个自动化(虽然有点尴尬)解决方案工作在生产的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：

//= include 'ie.css'

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

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

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

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，…)。

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

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

我希望我修订的CSS Splitter Gist完成足够采用的解决方案。

更新：

上面的Csssplitter提到了现在作为一个宝石发布：https://github.com/zweilove/css_splitter

css – Rails资源管道解决方案为IE 4096选择器/ stylesheet限制

解决方法

相关文章