CSSSplitter 技术文档

1. 安装指南

在 Rails 3.1+ 应用中使用 Asset Pipeline 时，若遇到 IE 浏览器样式表选择器超过 4095 的限制，可以使用 CSSSplitter 进行样式表的拆分。要安装 CSSSplitter，只需在 Gemfile 中添加以下代码：

gem 'css_splitter'

然后执行 bundle install 命令安装依赖。

2. 项目的使用说明

CSSSplitter 能够与 Rails 3.1+ 的 Asset Pipeline 集成，自动生成超过 4095 选择器的额外拆分样式表，以确保在旧版 IE 浏览器中能够正确应用所有样式。

拆分样式表

首先，需要确定哪些样式表超过了 4095 选择器的限制。对于需要拆分的样式表，创建一个新的文件，文件名在原文件名后添加 _splitN 后缀，文件扩展名为 .css。

例如，对于 too_big_stylesheet.css.scss，需要创建一个新文件 too_big_stylesheet_split2.css，并在该文件中添加以下内容：

/*
 *= require 'too_big_stylesheet'
 */

如果样式表非常大，需要进一步拆分，可以创建 _split3、_split4 等文件，这些文件的内容应与 _split2 文件相同。

同时，确保将这些新文件添加到 Asset Pipeline 的预编译列表中：

# config/application.rb
module MyApp
  class Application < Rails::Application
    config.assets.precompile += %w( too_big_stylesheet_split2.css )
  end
end

包括拆分的样式表

在完成样式表的拆分后，需要修改 HTML 布局，以确保旧版 IE（IE9 及以下版本）使用拆分的样式表。

可以使用 split_stylesheet_link_tag 助手来实现，例如：

# app/views/layout/application.html.erb
<%= split_stylesheet_link_tag "too_big_stylesheet", :media => "all" %>

如果样式表被拆分为多个文件，可以使用 split_count 选项指定文件总数：

<%= split_stylesheet_link_tag "too_big_stylesheet", :split_count => 3 %>

或者，手动创建类似的 HTML 代码。

3. 项目API使用文档

CSSSplitter 提供了 split_stylesheet_link_tag 助手，用于生成包含拆分样式表的 HTML 链接标签。

使用方式如下：

<%= split_stylesheet_link_tag "stylesheet_name", options = {} %>

其中 options 可以包含以下参数：

• :media：指定样式表的媒体类型。
• :split_count：当样式表被拆分为多个文件时，指定文件的总数。

4. 项目安装方式

如安装指南所述，通过将 gem 'css_splitter' 添加到 Gemfile 中，然后运行 bundle install 来安装 CSSSplitter。

确保将 split_stylesheet_link_tag 助手用于 Rails 应用的布局文件中，并且将拆分的样式表文件添加到预编译列表中。