Diferença entre inportar CSS

[RinaldFN 0]

Olá a todos,Gostaria de saber a diferença entre usar CSS na página usando:@importe<link rel="stylesheet" etc..Obrigado

[Paulo de Tarso F. M. 24]

É, realmente, eu nunca usei o import... Quem sabe nos dizer?

[Poe 0]

Quando você usa @import você INSERE no seu documento HTML o código CSS ou outro que você chamou nas propriedades.

 

Já o link mantém um relacionamento com um arquivo externo, definindo a execução do arquivo externo sem alterar o código HTML de fato. Por isso o link é utilizado também para definir um FAVICON e JavaScripts externos! :D

[Paulo de Tarso F. M. 24]

Quando você usa @import você INSERE no seu documento HTML o código CSS ou outro que você chamou nas propriedades.

 

Já o link mantém um relacionamento com um arquivo externo, definindo a execução do arquivo externo sem alterar o código HTML de fato. Por isso o link é utilizado também para definir um FAVICON e JavaScripts externos! :D

Humm... Bom, Poe, aproveitando o assunto @import, o q você acha de importar fonte? É confiável? Demora pra carregar? Como funciona exatamente? você sabe explicar? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Poe 0]

Bom, o ideal, para acessibilidade e melhorar a performance da página, é que a fonte seja a mais genérica possível. Porém, você pode colocar o download da fonte se o seu site for visto sem problemas pelo resto das pessoas que não tenha essa fonte (ou não queira baixá-la).O indicado (e o mais correto) é você utilizar fontes especiais somente através de imagens, você pode fazer isso com CSS de uma forma até que simples. Existem várias técnicas, cada um tem as suas preferências. :D O meu conselho é nunca usar download de fontes, nem de arquivos .wav e afins. Se é pra fazer "frescura de design", utilizar-se de flash e imagens sempre é a melhor alternativa (lembre-se de inserir o flash corretamente, além de ter conteúdo alternativo para cada uma das opções mencionadas). Abraço.

[hunternh 2]

No site do Maujor tem uma explicação detalhada:

http://www.maujor.com/tutorial/faq.php

 

Folhas de estilo inline, incorporadas, lincadas e importadas (@import) nesta ordem, têm do maior para o menor pêso (estilos inline têm o maior pêso). Entre várias folhas de estilo lincadas têm maior prioridade aquela importada por último (mais próxima da tag </head>. O mesmo ocorre entre as folhas importadas (@import).

 

Eu pelo menos só uso o import e consigo com uma técnica utilizando php esconder o css até mesmo do FF.

[Giovani 104]

Eu pelo menos só uso o import e consigo com uma técnica utilizando php esconder o css até mesmo do FF.

Esconder?Pq?

[Poe 0]

Pra mim o LINK é a forma mais interessante de se usar CSS, ele permite que você selecione a midia e até mesmo a função que o CSS terá. IMPORT logo logo vira deprecated, quase certeza.

 

Aliás, esse "esconder" seu aí, hunternh, soou meio como "gambiarra". Sempre tem um jeito de fazer o negócio dar certo sem torcer muito o código. ;)

[Hunter_ 0]

Eu particularmente uso o @import para fazer o encadeamento de folhas de estilocrio um estilo base, uma folha para os containers e outra para as classes, para organizar melhor as folhas de estilo

[hunternh 2]

O que eu queria dizer com esconder é o seguinte, se alguem quiser visualizar ou fazer o download do arquivo, não vai conseguir, só que essa técnica eu uso mais é para não permitir a vizualização dos meus arquivos js, para não poder ver como eu faço determinada validação e coisas do tipo.

[Poe 0]

Mas, Hunter_, até onde eu saiba o @import não melhora a sua performance e você não pode selecionar, por exemplo, a que midias o CSS se refere.

 

Quando você usa o @import você obriga toda vez o navegador a inserir o código CSS, mas quando você usa a tag link você baixa um arquivo que fica armazenado no cash do usuário.

 

O que isso significa? Que cada vez que o usuário acessa uma página do seu site que use o default.css, por exemplo, ele não precisa fazer o download desse arquivo novamente. Agora, com o @import, cada vez que a pessoa acessar uma página ela vai importar o default.css outra vez.

 

Isso diminui a performance do seu site.

 

Outra coisa importante é: como eu vou pode selecionar a mídia do meu CSS?

 

Existe um atributo no link que permite isso, o media. Você escolhe para o que aquele CSS serve e define por ele.

 

Ex. de CSS alternativo:

 

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" />
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="Red Site" />
<link rel="alternate stylesheet" type="text/css" href="sheet3.css" title="Acqua Site" />

 

Ex. de CSS de acordo com a mídia:

 

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen" />
<link rel="stylesheet" type="text/css" href="print1.css" title="Default" media="print" />

 

 

Agora, ao outro "caçador", lol ;) :

 

O que eu queria dizer com esconder é o seguinte, se alguem quiser visualizar ou fazer o download do arquivo, não vai conseguir, só que essa técnica eu uso mais é para não permitir a vizualização dos meus arquivos js, para não poder ver como eu faço determinada validação e coisas do tipo.

Bom, aí é contigo, mas eu acho que dá pra fazer a criptografia do seu material com uma função ou coisa que o valha.

 

Para JavaScript eu não vou opinar muito, porque a minha área é (X)HTML, CSS e design, mas para arquivos CSS o melhor, sem sombra de dúvidas é a tag LINK.

[hunternh 2]

Em relação a escolha de media a tag style tb permite essa escolha:

 

<style type="text/css" media="screen"><!--	@import url("padrao.css");--></style>

Sobre perfomance não sei dizer porque nunca testei, só sei que se eu retorno para uma tela que já havia carregado o retorno é instantâneo, sem o carregamento que há na primeira vez.

 

Em relação ao "esconder" o código: eu não faço nenhuma criptografia, simplesmente não permito a visualização nem o download.

[Hunter_ 0]

Caros, não falei em melhora de performance, falei? falei em organização, apenas!!É apenas uma metodologia de trabalho que uso, não toquei em perfomance, desempenho nada! Quanto aos toques dados, obrigado, você ta pregando para um pastor ;) mas fica as dicas para os que fizerem buscas futuras.

[Poe 0]

Caros, não falei em melhora de performance, falei?

Eu não disse que você falou, só falei porque a vantagem de se usar o link no lugar do @import (eu usava o @import também, mas a minha vida ficou mais feliz depois que optei pelo link lol).

 

Quanto aos toques dados, obrigado, você ta pregando para um pastor ;)

Oras, mas pastores podem sempre adicionar versículos a sua lista de citações! :D lol

 

Bem, acho que é isso.

 

Um abraço! :D

[RinaldFN 0]

Pessoal,

 

Valeu mesmo o esclarecimento!..

 

Não é atoa que este é o melhor forum sobre o assunto! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Hunter_ 0]

Com certeza Poe,

 

Não tava reclamando!! ehehehhe dibouas o nivel daqui do fórum ta muito bom, fico feliz em participar de algo com um nível tão bom!

 

P.S: Deixando claro q crio o estilo base, "linko" ele no documento e dentro do estilo base eu importo os demais arquivos de folhas de estilo.