Estou aprendendo CSS para ajustar meu modelo de projeto. Cheguei a esse problema e não encontrei uma resposta clara na web. Existe uma diferença entre usar @import ou link em CSS?
Uso de @import
<style>@import url(Path To stylesheet.css)</style>Uso de Link
<link rel="stylesheet" href="Path To stylesheet.css">Qual é a melhor maneira de fazer isso? e porque? Obrigado!
Em teoria, a única diferença entre eles é que @importo mecanismo CSS inclui uma folha de estilo e <link>o mecanismo HTML. No entanto, os navegadores os tratam de maneira diferente, dando <link>uma vantagem clara em termos de desempenho.
Steve Souders escreveu uma extensa postagem no blog comparando o impacto de ambos <link>e @import(e todos os tipos de combinações deles) chamada " não use @import ". Esse título fala por si mesmo.
Yahoo! também o menciona como uma de suas melhores práticas de desempenho (em coautoria com Steve Souders): Escolha em <link>vez de @import
Além disso, o uso da <link>tag permite definir folhas de estilo "preferidas" e alternativas . Você não pode fazer isso com @import.
Você pode usar o comando import para importar outro CSS dentro de um arquivo css, o que não é possível com o comando link. Navegadores realmente antigos não podem (IE4, IE5 parcialmente) lidar com a funcionalidade de importação. Além disso, algumas bibliotecas que analisam seu xhtml / html podem falhar ao obter a importação da folha de estilo. Esteja ciente de que sua importação deve vir antes de todas as outras declarações CSS.
fonte
Nenhuma diferença real hoje, mas
@importnão é tratado corretamente por navegadores mais antigos (Netscape 4, etc.), portanto, o@importhack pode ser usado para ocultar as regras CSS 2 desses navegadores antigos.Novamente, a menos que você esteja oferecendo suporte a navegadores realmente antigos, não há diferença.
Se eu fosse você, no entanto, usaria a
<link>variante em suas páginas HTML, porque permite que você especifique coisas como o tipo de mídia (impressão, tela, etc.).fonte
A diretiva <link> pode permitir que vários css sejam carregados e interpretados de forma assíncrona.
a diretiva @import força o navegador * a esperar até que o script importado seja carregado em linha com o script pai antes de ser processado corretamente por seu mecanismo, já que tecnicamente é apenas um script.
Muitos scripts de minimização de css (e linguagens como less ou sass) concatenarão automaticamente scripts vinculados no script principal, pois isso acaba causando menos sobrecarga de transferência.
* (depende do navegador)
fonte
Este artigo pode ser útil aqui: 4 métodos para adicionar CSS ao HTML: link, embed, inline e import
fonte
Quando eu uso a regra @import, geralmente é para importar uma folha de estilo dentro de uma folha de estilo existente (embora eu não goste de fazer isso para começar). Mas para responder à sua pergunta, não, não acredito que haja qualquer diferença. Apenas certifique-se de colocar o URL entre aspas duplas para cumprir com o XHTML válido.
fonte
@import geralmente deve ser usado em uma folha de estilo externa ao invés de embutida como em seu exemplo. Se você realmente deseja ocultar uma folha de estilo de navegadores muito antigos, pode usar isso como um hack para impedi-los de usar essa folha de estilo.
No geral, a
<link>tag é processada mais rapidamente do que a regra @import (que aparentemente é um tanto lenta no que diz respeito ao mecanismo de processamento css).fonte
O Microsoft Internet Explorer 9 (MSIE9) não parece lidar com o @import corretamente. Observe essas entradas do meu log do Apache (endereço IP oculto, mas
whoisdisse que era propriedade da própria Microsoft): o HTML principal vinculado a screen.css que tinhaque estou prestes a alterar para
linkelementos no HTML, porque parece que o MSIE9 emite duas solicitações incorretas para o servidor, obtendo erros 404 que eu poderia viver sem:Não foram pedidos adequados para esses arquivos depois, mas o que podemos fazer sem este "atirar no servidor pela primeira vez, de análise
urldepois de" lógica.fonte