Não use @import
Postado por: Pedro Rogério emO que é @import?
A utilização de @import dentro da tag <style> em HTML era utilizada anteriormente para esconder folhas de estilo do Netscape 4, que não tinha suporte a @import, de maneira que, opcionalmente poderíamos proporcionar um CSS com estilos básicos para esse browser e utilizar diferentes regras em CSS com a utilização de da tag <link />. Esta técnica quando não era proporcionada um estilo com a utilização de <link>, ocorria o inconveniente de o conteúdo aparecer sem qualquer estilo CSS, o famoso FOUC (Flash of Unstyled Content).
Uma outra técnica também que poderia ser utilizada para esconder estilos do Netscape 4 era de especificar o atributo media como “all”, ou uma combinação de vários atributos media, já que ele só entendia o atributo media “screen”.
<link /> versus @import
Existem 2 formas de carregar folhas de estilo no HTML. As duas funcionam de formas diferentes, mas ambas com o mesmo objetivo, carregar um arquivo CSS e dar cor e forma ao nosso conteúdo.
<link />
Se trata da tag que os padrões web indicam que deve ser utilizada entre as tags <head></head>, essa tag indica uma relação com um arquivo externo. Com ele indicamos os arquivos RSS, favicons e os arquivos CSS. Em conjunto com o atributo rel, e posteriormente o atributo href, indicamos o caminho do arquivo relacionado com o arquivo HTML. Vale lembrar também a utilização do atributo media que indica a que dispositivo é destinado o arquivo.
<link rel="stylesheet" href="a.css" media="screen" />
@import
Trata-se de uma funcionalidade no CSS que nos permite carregar um arquivo CSS a partir de um arquivo CSS. É igual ao anterior, onde podemos indicar a rota e que tipo de dispositivo irá utilizar esse arquivo CSS.
Essa funcionalidade omite o atributo rel, pois deve ser chamada a partir da tag <style> ou a partir de um arquivo CSS, entendendo que trata-se de um arquivo CSS.
<style type="text/css">
@import url("a.css") screen;
</style>
Qual opção utilizar?
Steve Souders publicou um interessante artigo, mostra através de testes todas as opções disponíveis e nos ensina a melhorar o rendimento de nossas páginas com a utilização de <link />
@import @import
<style>
@import url("a.css");
@import url("b.css");
</style>
Esse teste opta por carregar os arquivos css a partir de @import onde os mesmos são carregados de uma só vez. Se vocÊ usa esse sistema não deverá passar por problemas de rendimento já que ambas requisições são feitas simultaneamente evitando tempos de espera desnecessários.
<link /> @import
<link rel="stylesheet" type="text/css" href="a.css">
<style>
@import url("b.css");
</style>
A utilização do sistema acima é falha em todas as versões do Internet Explorer(6,7 e 8), onde todos os arquivos CSS se carregam sequencialmente, primeiro carrega-se a, após o termino do carregamento de a, carrega-se b e assim por diante.
<link /> com @import
//HTML
<link rel="stylesheet" type="text/css" href="a.css">
//CSS
@import url("b.css");
Entenda que o arquivo a.css contém a chamada para o arquivo b.css. Dessa forma não só ocorre no Internet Explorer, mas também em todos os browsers, o carregamento dos arquivos ocorre sequencialmente. Faz sentido já que carregamos a.css e uma vez já carregado o processamos e esse chama b.css.
Vários <link /> @import
//HTML
<link rel="stylesheet" type="text/css" href="a.css">
<link rel="stylesheet" type="text/css" href="proxy.css">
//PROXY.CSS
@import url("b.css");
Utilizando esse sistema, descobrimos que o Internet passa por um comportamento estranho. Unicamente no Internet Explorer, ocorre o carregamento do arquivo a.css e simultaneamente o arquivo proxy.css(que possui a chamada para o arquivo b.css), uma vez terminado o carregamento de proxy.css ele é interrrompido esperando que termine o carregamento de a.css para efetuar a chamada de b.css. Veja na imagem abaixo:
Vários @import
<style type="text/css">
@import url("a.css");
@import url("b.css");
@import url("c.css");
@import url("d.css");
@import url("e.css");
@import url("f.css");
</style>
<script src="one.js" type="text/javascript"></script>
Mais uma vez o Internet Explorer nos prega uma peça, o carregamento do arquivo one.js acontece antes dos arquivos CSS, fazendo com que a relação com todas as regras CSS não funcionem corretamente. Após o carregamento do arquivo JavaScript, acontece o carregamento sequencial dos arquivos CSS.
<link /> <link />
<link rel="stylesheet" type="text/css" href="a.css"> <link rel="stylesheet" type="text/css" href="b.css">
Sem dúvida é a melhor opção, pois em todos os browsers ocorre o carregamento de forma simultânea dos arquivos CSS.
Referências
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
interessante, mas eu to com uma duvida:
ultimamente eu ando modulando tudo
normalmente no html eu uso
blz né?
ai nesse arquivo “geral.css” eu importo todos
@import url(reset.css);
@import url(classes.css);
@import url(layout.css);
@import url(nav.css);
sendo que só o layout.css é o que sempre muda.
seria incorreto?
ai, ele trato a tag de link q eu coloquei ali…, mas eh so um link rel=”stylesheet”(…)
Ótimo post, sempre aprendendo.
O @import só serve mesmo para modularizar e organizar o css, funcionando como se fosse um “include” do próprio CSS. Mas em termos de renderização, a requisição é feita da mesma forma que a tag link, e até mais lento, pois o browser precisa fazer o “parse” no arquivo css para descobrir onde tem @imports e fazer as requisições necessárias, enquanto que com a tag link no html, isso já está explícito para ele, poupando assim um processamento quase desnecessário. Boa dica
@Gustavo,
Não, você só vai passar por problemas no Internet Explorer como citei acima.
Se eu modular meu css e tiver que carregar todos eles em todas as páginas é correto eu criar um php com todos os e usar um include desse arquivo em todas as páginas?
Muito bom pedro, algo que não sabia e sempre tive duvida de saber qual era a verdadeira diferença.
Vlw
@Fabiano,
Não há problema algum em fazer isso, mas se você utilizar @import passará pelos problemas descritos acima.
Muito bom post! Parabéns!
Vou ser sincero não lí todo o post, resumindo não use @import rs.
Importante isso! Tem muita gente ainda seguindo guidelines antigas e ultrapassadas, a explicação do Steve também está bastante científica e você resumiu bem.
Ótimo Artigo, vivendo e aprendendo.
Parabéns
bom, pelo que entendi, é: ou você usa só UM, ou você usa só o outro para ter o mesmo rendimento né?
[...] de obter um carregamento mais rápido você terá ele simultâneo usando várias tags links. O blog CSS no Lanche traduziu o artigo que comprovou este [...]