jerarquia - selectores de atributos css

Solución de canalización de activos de Rails para el selector IE 4096/límite de hoja de estilo

Question

El problema

La documentación de soporte de IE de Microsoft explica que en Internet Explorer 6-9:

1. No se aplican todas las etiquetas de estilo después de las primeras 31 etiquetas de estilo.
2. Todas las reglas de estilo después de las primeras reglas 4.095 no se aplican.
3. En páginas que usan la regla @import para importar continuamente hojas de estilo externas que importan otras hojas de estilo, se ignoran las hojas de estilo que tienen más de tres niveles de profundidad.

Hay mucha evidencia de este problema con las demos de scripts . Ver también Bless .

Solución necesaria

Necesitamos una manera de dividir las hojas de estilo compiladas generadas por Piñones en la canalización de activos para mantener el recuento máximo de selectores por debajo de 4096 y vincularlos en el HTML de una aplicación Rails desplegada. ¿Cómo podemos pasar el resultado compilado de los activos procesados ​​(específicamente las hojas de estilo) como un argumento para un método que luego puede modificar los archivos?

Vea los siguientes intentos para un lugar donde comenzar. Si alguien pudiera ayudarme a encontrar la manera de hacer que sea operacional (o una solución completamente nueva), ¡sería fantástico!

Intentos de solución existentes

• Bless se creó para resolver este problema dividiendo las hojas de estilo para mantener el recuento máximo de selectores por hoja por debajo del límite. Bless se ejecuta en el servidor en node.js. Todavía no he visto un equivalente de Ruby. Eric Fields intentó servir activos compilados con brújula a Bless (ejecutándose en el nodo), pero esa solución depende de que Compass maneje la compilación de activos, y por lo tanto no parece funcionar con la cartera de activos. Tenga en cuenta que en lugar de vincular a varias hojas de estilo, Bless agrega declaraciones @include a la primera hoja, que puede ser el camino a seguir para evitar tocar el marcado.

• Cuando Christian Peters (@crispy) descubrió este problema , implementó un divisor como Bless que también pasó la salida de Compass a un módulo personalizado, que funcionó muy bien antes de Rails 3.1. Más tarde, adaptó su divisor con un SprocketsEngine para su integración con la cartera de activos de Rails . He intentado implementar el nuevo código, pero parece que no funciona automáticamente (aunque el divisor funciona bien cuando se lo llama manualmente en la consola).

Información relacionada

Para obtener más información sobre los límites de CSS en IE 6-9, consulte estas preguntas relacionadas:

• ¿IE 8 tiene un límite en el número de hojas de estilo por página?
• Límites de reglas de CSS de Internet Explorer

Answer 1

La solución que estoy usando en producción es muy simple, no automatizada, pero funciona muy bien. Para mí, esto fue lo más obvio, así que tal vez ya lo pensaste y no me gustó. De cualquier forma, aquí vamos:

Asumo que estás usando sass, si no, creo que deberías :)

Primero , divida su application.css.scss en archivos separados, por ejemplo: application_a.css.scss y application_b.css.scss

En segundo lugar , en su archivo application.css.scss , use:

@import "application_a"
@import "application_b"

En tercer lugar , en su plantilla de diseño, incluya el archivo completo o ambas partes:

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

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

Nota al margen: no genere sus archivos de manifiesto de hoja de estilo a través de la canalización de activos, hágalo a través de sass y su declaración de @import ; todo lo demás dará lugar a problemas.

Answer 2

Tenemos una solución automatizada (aunque algo incómoda) que trabaja en producción para una aplicación Rails 3.1 con un inventario de activos en su lugar. Ryan ya hizo referencia a la solución en su pregunta, pero trato de encontrar una respuesta más completa.

La canalización de activos canaliza un activo a través de diferentes motores Sprocket.

Por lo tanto, puede tener, por ejemplo, un ie.css.sass.erb que se ejecuta a través del motor ERB Sprocket y luego pasa al motor Sass Sprocket, etc. Pero siempre hay un archivo dentro y otro fuera.

En este problema especial, nos gustaría tener 1 archivo de entrada yn archivos de salida. No hemos encontrado una manera de hacer esto posible con piñones. Pero encontramos una solución alternativa:

Proporcione un ie.css.sass que incluya la hoja de estilo completa y un ie_portion2.css.sass.split2 que solo importe el archivo ie.css completo:

//= include ''ie.css''

Para la extensión de archivo split2 , registramos un Sprockets Engine:

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

Al evaluar activos con la extensión split2, pasamos su contenido al CssSplitter y le ordenamos extraer la parte 2 (> 4095 selectores):

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

Esto también funcionaría para otras partes (split3, ...).

El divisor CSS reconoce lugares válidos donde las hojas de estilo se pueden dividir en partes con menos de 4096 selectores y devuelve la parte solicitada.

El resultado es un ie_portion2.css que debe vincular en la cabecera y precompilar por separado.

Espero que mi CSS Splitter Gist revisado esté lo suficientemente completo como para emplear la solución.

Actualizar:

El CssSplitter mentionend anterior ha sido lanzado como una gema ahora: https://github.com/zweilove/css_splitter