用于IE 4096选择器/样式表限制的Rails资产管道解决方案

Question

问题所在

微软的IE支持文档解释说，在Internet 6-9中：

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

有很多证据表明脚本演示存在这个问题。另见保佑。

所需解决方案

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

请参阅下面的尝试，以便找到一个起点。如果有人能帮我找到一种方法，使之运作(或一个全新的解决方案)，那就太棒了！

现有解决方案尝试

• 创建保佑是为了解决这个问题，方法是将样式表拆分，使每个工作表的最大选择器计数保持在限制范围内。Bless运行在node.js中的服务器上。我还没见过类似红宝石的。Eric试图使用向Bless提供用指南针汇编的资产 (在节点中运行)，但该解决方案依赖于Compass处理资产编译，因此似乎无法处理资产管道。注意，Bless没有链接到多个样式表，而是将@include语句添加到第一个工作表中，这可能是避免接触标记的方法。
• 当Christian Peters (@crispy) 发现了这个问题时，他喜欢Bless，它也将Compass输出传递给一个定制模块，这个模块在Rails 3.1之前工作得很好。后来他用SprocketsEngine调整了他的拆分器，以便与Rails资产管道集成。我尝试过实现新代码，但它似乎并不是自动运行的(尽管分配器在控制台中手动调用时运行良好)。

相关信息

有关IE6-9中CSS限制的更多信息，请参见以下相关问题：

• IE8对每页样式表的数量有限制吗？
• 的CSS规则限制

Answer 1

我们有一个自动化的(尽管有点尴尬)解决方案在生产Rails 3.1应用程序和资产管道到位。瑞安已经在他的问题中提到了解决方案，但我试图提出一个更全面的答案。

资产管道通过不同的链轮引擎输送资产。

因此，您可能有一个ie.css.sass.erb，它通过ERB链轮引擎运行，然后传递给Sass链轮引擎等等。但是它总是一个文件在里面，一个文件出。

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

提供一个包含完整样式表的ie.css.sass和一个只导入完整ie.css文件的ie_portion2.css.sass.split2：

//= include 'ie.css'

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

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

CSS拆分器识别样式表可以被分割成小于4096选择器的部分的有效位置，并返回所请求的部分。

结果是一个ie_portion2.css，您必须在头中链接并分别预编译。

我希望我修改过的CSS分离器基足够完整，可以使用这个解决方案。

更新：

上面提到的CssSplitter现在已经作为一个宝石发布了：分离器

Answer 2

我在生产中使用的解决方案非常简单，不是自动化的，但效果很好。对我来说，这是一件显而易见的事情，所以也许你已经想过了，但你并不喜欢它--不管是哪种方式，我们都要这样做：

我假设你在使用sass，如果没有，我认为你应该:)

First，在单独的文件中拆分application.css.scss，例如：application_a.css.scss和application_b.css.scss

第二个，在您的application.css.scss文件中，使用：

@import "application_a"
@import "application_b"

在布局模板中的第三包含完整的文件，或者包含两个部分：

<!--[if !IE]><!-->
  # link to application.css.scss
<!--<![endif]-->

<!--[if IE]>
  # link to application_a.css.scss
  # link to application_b.css.scss
<![endif]-->

附带注意:不要通过资产管道生成样式表清单文件，通过sass和它的@import语句这样做，其他的一切都会导致问题。