🥇 Detectar e respeitar os limites do seletor CSS

O velho IE continua a causar dor ao mundo …

Caso você não saiba, o IE8 e o IE9 são navegadores horríveis. Eles
têm uma falha significativa em que não podem renderizar páginas da web se uma única folha de estilo tiver mais de 4095 seletores .
Esse problema afeta todos os navegadores da Microsoft até o IE10. Uau.

Infelizmente, estes terríveis navegadores ainda representam mais de 8% do tráfego mundos internet ,
e pode precisar de ser apoiadas para determinados projectos. Então, qual é a
maneira mais fácil de manter seu site compatível com essas versões antigas do IE sem
enlouquecer você?

Eu explorei várias ferramentas para automatizar a divisão de uma única folha de estilo grande
em outras menores para evitar atingir esse limite, incluindo blesscss ,
css_splitter e scripts home roll,
mas não achei nenhum deles um verdadeiro home run. Cada solução é
bastante complexa por natureza, o que faz sentido, dado o problema em questão.
Infelizmente, essa complexidade também torna a depuração dolorosa quando as coisas dão
errado. No final do dia, eu preferiria simplesmente ser notificado quando
meus arquivos CSS violarem o limite do seletor e, em seguida, corrigir o problema manualmente
dividindo os arquivos em arquivos logicamente relacionados (por exemplo: estilos de aplicativo versus
estilos de administrador).

Este é um ótimo caso de uso para testes de unidade e recentemente lancei a gem rspec-respect_selector_limit
que contém um matcher reutilizável para afirmar que suas folhas de estilo não
quebrarão o IE antigo. É uma ferramenta simples para integrar em seu conjunto de testes Rspec existente,
como:

it 'ensures application.css does not break old IE' do
  expect('application.css').to respect_selector_limit
end

Para aplicativos que já possuem várias folhas de estilo, o rspec-respect_selector_limit
gem tem um auxiliar adicional para afirmar que todos os seus arquivos CSS pré-compilados
atendem às limitações do antigo IE.

it 'ensures all configured CSS files do not break old IE' do
  expect(precompiled_css_files).to respect_selector_limit
end

Esta é uma solução simples que me mantém no controle de quando dividir as novas folhas de estilo
e , como sempre, contribuições são bem-vindas!

Related Posts