Diferença entre @import e link em CSS

118

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!

css import hyperlink

— Omar Abid
fonte

142

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.

— mercator
fonte

Obrigado - bons links - especialmente aquele primeiro.

— Faisal Vali de

6

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.

— merkuro
fonte

6

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.).

— Zenazn
fonte

5

Especificar a mídia também é possível para instruções @import.

— Georg Schölly de

Realmente? Eu acho que você poderia colocar um tipo de mídia em sua etiqueta de estilo, mas isso parece um pouco como um hack para mim.

— Zenazn

5

Você pode fazer, por exemplo, "@import url (style.css) screen, print", embora o IE7 e anteriores não suportem os tipos de mídia.

— mercator

5

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)

— Ape-inago
fonte

2

Este artigo pode ser útil aqui: 4 métodos para adicionar CSS ao HTML: link, embed, inline e import

— Matthew James Taylor
fonte

1

Citação: "Vamos imaginar que temos um site de 1000 páginas e temos um link para um arquivo CSS de todas as páginas do site. Agora, vamos imaginar que queremos adicionar um segundo arquivo CSS a todas essas páginas. Poderíamos editar todos os 1000 arquivos HTML e adicione um segundo link CSS ou uma maneira muito melhor seria importar o segundo arquivo CSS do primeiro arquivo. Acabamos de economizar muitas horas de trabalho! "

— Casebash de

1

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.

— Barry Gallagher
fonte

1

@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).

— Gabriel Hurley
fonte

0

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 tinha

@import url("print.css") print;
@import url("speech.css") aural;

que 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:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

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.

— Silas S. Brown
fonte