css the Решение для конвейера Rails для IE 4096. Селектор/лимит таблиц стилей




the asset is not present in the asset pipeline (2)

Проблема

Документация поддержки Microsoft в IE объясняет, что в Internet Explorer 6-9:

  1. Все теги стиля после первых 31 тегов стиля не применяются.
  2. Все правила стиля после первых 4095 правил не применяются.
  3. На страницах, которые используют правило @import для непрерывного импорта внешних таблиц стилей, которые импортируют другие таблицы стилей, таблицы стилей, содержащие более трех уровней, игнорируются.

Существует много свидетельств этой проблемы с демонстрацией скриптов . См. Также Bless .

Необходимое решение

Нам нужен способ разделить скомпилированные таблицы стилей, созданные Sprockets в конвейере активов, чтобы сохранить максимальный селектор ниже 4096 и связать их с HTML в развернутом Rails-приложении. Как мы можем передать скомпилированный вывод обработанных активов (в частности, таблицы стилей) в качестве аргумента в метод, который может затем модифицировать файлы?

См. Приведенные ниже попытки начать создание места. Если кто-то может помочь мне найти способ сделать либо оперативное (или совершенно новое решение), это будет фантастично!

Существующие попытки решения

  • Bless было создано для решения этой проблемы путем разделения таблиц стилей, чтобы максимальное количество селекторов на листе было ограничено. Bless запускается на сервере в node.js. Я еще не видел эквивалент Ruby. Эрик Филдс пытался обслуживать активы, скомпилированные с компасом Bless (работает в узле), но это решение зависит от компиляции активов Compass и, следовательно, похоже, не работает с конвейером активов. Обратите внимание, что вместо привязки к нескольким таблицам стилей Bless добавляет операторы @include к первому листу, что может быть способом сделать так, чтобы не касаться разметки.

  • Когда Кристиан Питерс (@crispy) обнаружил эту проблему , он реализовал сплиттер типа Bless, который также передал вывод Compass в пользовательский модуль, который отлично работал до Rails 3.1. Позже он адаптировал свой сплиттер с помощью SprocketsEngine для интеграции с конвейером Rails Asset . Я пробовал реализовать новый код, но он, похоже, не работает автоматически (хотя сплиттер отлично работает при вызове вручную в консоли).

Связанная информация

Дополнительные сведения о ограничениях CSS в IE 6-9 см. В следующих связанных вопросах:


Решение, которое я использую в производстве, очень просто, не автоматизировано, но работает очень хорошо. Для меня это было очевидным делом, поэтому, возможно, вы об этом уже подумали и не понравились - в любом случае, здесь мы идем:

Я предполагаю, что вы используете 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 , все остальное приведет к проблемам.


У нас есть автоматизированное (хотя и неудобное) решение, работающее на производстве для приложения Rails 3.1 с конвейером на месте. Райан уже ссылался на решение в своем вопросе, но я пытаюсь найти более полный ответ.

Конвейер активов соединяет актив с помощью разных двигателей Sprocket.

Таким образом, у вас может быть, например, ie.css.sass.erb который запускается через механизм ie.css.sass.erb ERB, а затем передается движку Sass Sprocket и т. Д. Но это всегда один файл и один файл.

В этой специальной проблеме мы хотели бы иметь 1 входящий файл и n исходящих файлов. Мы не нашли способ сделать это возможным с помощью звездочек. Но мы нашли обходное решение:

Предоставьте ie.css.sass который включает полную таблицу стилей и ie_portion2.css.sass.split2 которая просто импортирует полный файл ie.css:

//= include 'ie.css'

Для split2 файла 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, ...).

Разделитель CSS распознает допустимые места, где таблицы стилей можно разделить на части с селекторами менее 4096 и вернуть запрошенную часть.

Результатом является ie_portion2.css, который вы должны связать в голове и предварительно скомпоновать отдельно.

Надеюсь, мой пересмотренный CSS Splitter Gist будет достаточно полным, чтобы использовать решение.

Обновить:

Сегодня упоминание о CssSplitter было выпущено как драгоценный камень: https://github.com/zweilove/css_splitter







sprockets