desenv-web-rp.com

Combinando arquivos CSS com relação a @media

Temos um site em que as acelerações usuais de sites de alto desempenho e sites mais rápidos dividendos pagos.

No entanto, negligenciamos as folhas de estilo (devido às dificuldades descritas abaixo) e finalmente chegou a hora de nos morder, com o CSS representando 500ms de nosso carregamento de página de 1600ms (a proporção de ambos os resultados é bastante consistente entre os benchmarks - os números reais retratados aqui são da referência mais conveniente que temos à mão).

Paralelamente, para tornar os seletores mais eficientes, o número total de solicitações HTTP deve ser reduzido. Aqui está um exemplo (sem text="text/css" charset="utf-8" por questões de brevidade):

<link rel="stylesheet" href="global.css" media="all" />
<link rel="stylesheet" href="page.css" media="all" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="alternative stylesheet" href="print.css" media="all" title="Print" />

Essa parece ser uma configuração comum (folha de estilo global, por folha de estilo por página/categoria e layout de impressão), mas estamos tendo problemas reais para descobrir uma solução viável, pois todas as opções possuem uma faca de dois gumes:

  • global.css e page.css podem ser combinados, no entanto, global.css seria baixado repetidamente ao lado de page.css (como page.css é por categoria/página especial) se o usuário continuasse pulando para páginas/categorias especiais e deveria ser servido por conta própria

  • o arquivo print.css pode ser combinado e usar as regras CSS2 @media, mas isso não funcionaria com os navegadores CSS1 (este site deve funcionar com o IE6)

  • a versão do print.css vinculada usando rel="alternative stylesheet" media="all" title="Print" não parece ser necessária, mas os desenvolvedores têm Cargo Culted em todos os projetos sem saber o que fazem e temos medo de removê-lo

Como essa configuração parece tão comum, o que outras pessoas fizeram quando se deparam com uma configuração semelhante ?, alguém pode lançar alguma luz sobre folhas de estilo alternativas para impressão?

5
Metalshark

Você tem apenas um page.css ou existem muitas versões diferentes para páginas e categorias diferentes?

Supondo que exista apenas um, sugiro:

  • Combine global.css e page.css em uma folha de estilo. Após a primeira solicitação, o usuário terá uma versão em cache disso de qualquer maneira.

  • Mesclar suas regras de impressão na folha de estilo acima usando @media. Você pode adicionar um comentário condicional ao IE6 apenas para obter uma folha de estilo de impressão funcional.

  • A 'folha de estilo alternativa' dará aos navegadores de suporte a opção de usar essa folha de estilo em vez da principal. No seu caso, isso parece ser uma maneira fácil de fornecer ao usuário uma 'visualização imprimível'. Se você deseja manter isso, precisará manter o print.css separado. Portanto, não se preocupe em mesclar as regras de impressão no arquivo principal.

Como tenho certeza de que os livros que você vinculou dizem, você também desejará exibir essas folhas de estilo compactadas e com cabeçalhos expirados para maximizar os benefícios.

3
Tim Fountain