A diferença entre @import e link para arquivos CSS

click fraud protection

Sites diferentes incluem seus Cascading Style Sheets de maneiras diferentes - usando a abordagem @import ou vinculando a esse arquivo CSS. Qual é a diferença entre @import e link para CSS, e como você decidiu qual é o melhor para você?

A diferença entre @import e link

A vinculação é o primeiro método para incluir uma folha de estilo externa em suas páginas da web. Destina-se a vincular sua página à sua folha de estilo. É adicionado à cabeça do seu Documento HTML.

A importação permite importar uma folha de estilo para outra. Isso é um pouco diferente do cenário de link porque você pode importar folhas de estilo dentro de uma folha de estilo vinculada.

Do ponto de vista dos padrões, não há diferença entre vincular a uma folha de estilo externa ou importá-la. Qualquer uma das formas está correta e funcionará igualmente bem na maioria dos casos. No entanto, existem alguns motivos pelos quais você pode querer usar um em vez do outro.

Por que usar @import?

Muitos anos atrás, o motivo mais comum dado para usar @import (ou junto com) é porque navegadores mais antigos não reconheciam @import, então você podia ocultar estilos deles. Ao importar suas folhas de estilo, você basicamente as estará disponibilizando para navegadores mais modernos e compatíveis com os padrões, enquanto as "esconde" do

instagram viewer
versões mais antigas do navegador.

Outro uso do método @import é usar várias folhas de estilo em uma página, incluindo apenas um único link no cabeçalho do documento. Por exemplo, uma empresa pode ter uma folha de estilo global para cada página do site, com subseções com estilos adicionais que se aplicam apenas a essa subseção. Vinculando à folha de estilo da subseção e importando os estilos globais na parte superior desse estilo folha, você não precisa manter uma folha de estilo gigantesca com todos os estilos para o site e cada subseção. O único requisito é que quaisquer regras @import precisem vir antes do resto de suas regras de estilo. Herança ainda pode ser um problema.

Por que usar o link?

O principal motivo para usar folhas de estilo vinculadas é fornecer folhas de estilo alternativas para seus clientes. Navegadores como Firefox, Safari e Opera suportam o atributo rel = "alternate stylesheet" e, quando houver um disponível, permitirá que os visualizadores alternem entre eles. Você também pode usar um alternador de JavaScript para alternar entre as folhas de estilo no IE - mais frequentemente usado com Layouts de zoom para fins de acessibilidade.

Uma das desvantagens de usar @import é que se você tiver um cabeçalho muito simples com apenas a regra @import, suas páginas podem exibir um "flash de conteúdo não estilizado" enquanto carregam. Uma solução simples para isso é garantir que você tenha pelo menos um link ou elemento de script adicional em sua cabeça.

E quanto ao tipo de mídia?

Muitos escritores afirmam que você pode usar o tipo de mídia para ocultar folhas de estilo de navegadores mais antigos. Freqüentemente, eles mencionam essa ideia como um benefício de usar @import ou, mas você pode definir a mídia digite com qualquer um dos métodos, e navegadores mais antigos que não suportam tipos de mídia não os verão em nenhum caso.

Então, qual método você deve usar?

A maioria dos desenvolvedores hoje usa link e, a seguir, importa folhas de estilo para folhas de estilo externas. Dessa forma, você só tem uma ou duas linhas de código para ajustar em seus documentos HTML. Mas o resultado final é que depende de você. Se você está mais confortável com o @import, vá em frente! Ambos os métodos são compatíveis com os padrões e, a menos que você planeje oferecer suporte a navegadores realmente antigos, não há um forte motivo para usá-los.

instagram story viewer