关键词：

【中文标题】针对 IE 4096 选择器/样式表限制的 Rails 资产管道解决方案【英文标题】：Rails asset pipeline solution for IE 4096 selector/stylesheet limit 【发布时间】：2012-08-21 00:06:50 【问题描述】：

问题

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

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

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。我已尝试实现新代码，但它似乎无法自动运行（尽管在控制台中手动调用拆分器时工作正常）。

相关信息

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

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

【问题讨论】：

值得指出的是，虽然如此大量的 CSS 在 IE 中可能会完全崩溃，但要发送到 any 浏览器的代码很多，并且可能是全面的绩效影响。您可能需要考虑如何优化它。有了这么多代码，很可能有一些重要的优化机会。 【参考方案1】：

我在生产中使用的解决方案非常简单，不是自动化的，但效果很好。 对我来说，这是显而易见的事情，所以也许你已经考虑过了但不喜欢它——不管怎样，我们开始吧：

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

首先，将您的 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 语句来生成，其他一切都会导致问题。

【讨论】：

似乎将 CSS_splitter 库作为预处理器可以解决问题，但该函数 has yet to be implemented with the Rails asset pipeline（当前读取为 'TODO'）。【参考方案2】：

我们有一个自动化的（尽管有点尴尬）解决方案在生产中用于具有资产管道的 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 引擎：

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 现已作为 gem 发布：https://github.com/zweilove/css_splitter

【讨论】：

只有ie 9不渲染完整的css？

...ie9上最常见的错误和限制并对其进行了测试。我统计了css选择器的数量，限制是4096，这个样式表有3000个。所以不是这样。css文件中没有@import语句。很遗憾，该项 查看详情

css之选择器

...，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。CSS就是控制页面布局 查看详情

是否有针对 IE10 的特定 CSS 选择器？

】是否有针对IE10的特定CSS选择器？【英文标题】：AreThereSpecificCSSSelectorsTargetingIE10?【发布时间】：2011-11-1108:59:42【问题描述】：由于IE在版本10中摆脱了条件cmets，我迫切需要找到专门针对IE10的“CSShack”。请注意，被“黑”的必... 查看详情

针对相同的孩子，但只针对某些不同的父母——CSS和jQuery选择器样式

】针对相同的孩子，但只针对某些不同的父母——CSS和jQuery选择器样式【英文标题】：TargetingSameChildren,butonlyCertain,DifferingParents--CSSandjQuerySelectorStyle【发布时间】：2012-07-3119:01:33【问题描述】：有没有办法只针对选定父母的某些... 查看详情

css

...式 2.内部样式表 3.外部样式表 4.外部导入样式三、css选择器 ID选择器 class选择器 标签选择器 组合选择器 子代选择器 后代选择器 通用选择器 伪类选择器:hover鼠标悬浮上去的样式四、c 查看详情

前端学习~css学习：样式表和选择器

...方式：行内样式表、内嵌样式表、外部样式表CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器CSS几种扩展选择器：后代选择器、交集选择器、并集选择器CSS样式优先级CSS概述CSS：CascadingStyleSheet，层叠样式表。... 查看详情

css初识-选择器&背景&浮动&盒子模型

...功能，如字体、颜色、背景的控制及整体排版等，而且还针对不同的浏览器设置不同的样式。 引入CSS样式（书写位置）内部样式表内嵌式 查看详情

css样式表｛二｝

1选择器的优先级　　选择器的优先主要考虑选择器的权重　　可以将各种选择器的权重以数值来表示，数值越大，优先级越高　　选择器权重值标签selector1类选择器10ID选择器100行内样式1000  　　复杂选择器优先级的计算... 查看详情

phpdrupal克服ie31样式表限制(代码片段)

查看详情

前端随堂笔录3

....行内样式 2.内部样式表 3.外部样式表 4.外部导入样式 css选择器 ID选择器 class选择器 标签选择器 组合选择器 子代选择器 后代选择器 通用选择器 伪类选择器:hover鼠标悬浮上去的样式 css样式的优先级 1.根据权重来确定 2.如果权 查看详情

刚刚接触样式表的时候应该注意的问题

...高但可重复性最不好而外部样式表的可重复性最好。2、选择器可分为：标签选择器class选择器ID选择器复合选择器，要牢牢记住各种选择器的表达方法比如标签选择器是直接以标签名作为选择器的，class选择器是以“.”开头加上&... 查看详情

css样式表的选择器与分类

...表用于给网页设置各种样式css样式的语法由3部分组成，选择器，属性和值。css的分类：主要分：内联，内嵌，与外联。 内联：写在标签里，控制精准，代码重复性差，优先级最高。内嵌：嵌在 查看详情

为啥我的css样式表在火狐游览器里没有起来作用?

...试看userchrome参考技术A您好！感谢您对火狐产品的支持！针对firefox的css样式现在大部分都是用!important.hack，对于firefox测试可以正常显示，现在写一个CSS可以这样：#1color:#333;/*Moz*/*html#1color:#666;/*IE6*/*+html#1color:#999;/*IE7*/那么在firefo... 查看详情

css样式表选择器

...面叫做内联<styletype="text/css">内嵌<style="样式">在选择器里必须加px标签选择器在<head></head>里面标签选择器里所选的标签所有标签全部统一class选择器.123{}<pclass="123"></p>id选择器#div1｛｝<divid="div1"> 查看详情

样式表（选择器））（样式）

一。选择器（样式表用来选取元素的）。标签：根据标签名选取元素。class（.点）（根据class名来选取元素）。id（#井号）（根据id名来筛选出唯一元素）。复合：（逗号并列div，span）（空格后代#listli）（点筛选div·s）二。... 查看详情

web前端篇：css使用，样式表特征，选择器(代码片段)

目录web前端篇：CSS使用，样式表特征，选择器1.CSS介绍2.CSS使用3.样式表特征4.CSS选择器5.选择器的优先级6.练习题：web前端篇：CSS使用，样式表特征，选择器1.CSS介绍CSS：CascadingStyleSheet层叠样式表作用：修饰和美化页面元素，实现... 查看详情

有没有办法在 C# 中针对 XML/HTML 使用 JQuery 样式选择器？

】有没有办法在C#中针对XML/HTML使用JQuery样式选择器？【英文标题】：IsthereawaytouseJQuerystyleselectorsagainstXML/HTMLinC#?【发布时间】：2013-04-2016:15:36【问题描述】：我需要一种从XML中选择节点的基于字符串的方法我知道XPATH，我正在寻... 查看详情

html初识样式表&选择器

样式表&类选择器分类样式表分类：1.内联式样式表：在标签内部写样式代码，精确但不方便，增加工作量，后期修改麻烦。2.嵌入式样式表：一般写在head内以<style>......</style>方式可以控制整个页面内的某个标签样式... 查看详情