Sabemos que existem duas maneiras de referenciar CSS externo em páginas web, a saber: @import e link Muitas vezes ouvimos dizer que é melhor usar link para introduzir CSS, mas você sabe por quê?
link
O link serve para conectar CSS externo a páginas da web. O formulário específico é.
@importar
A diferença entre importar e vincular é que ele pode introduzir vários outros arquivos CSS em um arquivo CSS.
Por que usar @import
A maioria das pessoas usa @import porque navegadores antigos não suportam @import, o que significa que podemos usar @import para introduzir estilos CSS que somente navegadores modernos podem analisar.
Use o código a seguir para evitar que os navegadores IE6 e anteriores analisem o CSS (os métodos abaixo do IE6 estão inutilizáveis e serão omitidos aqui)
Tela @import url(../style.css); Outro motivo principal é quando sua página da web precisa introduzir vários arquivos CSS externos. Você pode usar o link para introduzir um CSS e, em seguida, usar o método @import neste arquivo CSS. vários outros arquivos CSS Isso parece mais fácil de gerenciar.
Por que usar link
Uma das principais razões para usar o método link é que você pode permitir que os usuários alternem os estilos CSS. Navegadores modernos como Firefox, Opera e Safari suportam o atributo rel="folha de estilo alternativa" (ou seja, você pode escolher estilos diferentes. no navegador). Claro, você também pode usar Javascript para permitir que o IE ofereça suporte à mudança de estilo dos usuários.
Se você não entendeu, entre nesta página e clique em "Visualizar - Estilo da página" no Firefox.
Pequenos problemas com @import
Se a tag head da sua página web for muito simples, com apenas o atributo @import, quando o usuário navegar em uma velocidade lenta da Internet, ele verá uma página sem estilos, e então poderá ver a página conforme o arquivo CSS é baixado . Para evitar tais problemas, você precisa garantir que haja pelo menos um script ou tag de link no cabeçalho.
Atualização 04-11: @import tornará o tempo geral de carregamento do CSS mais longo e fará com que a ordem de download do arquivo seja alterada no IE. Por exemplo, os arquivos de script colocados após @import serão baixados antes do CSS.
Para obter detalhes, consulte http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Qual método deve ser usado?
Atualmente, parece que o link é mais adequado (ou mais popular) para sites pequenos. Claro, se precisarmos modularizar o CSS no futuro, definitivamente usaremos @import.