Fórum CataBits
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Fórum sobre tecnologia da informação.


Marcação CSS para múltiplos navegadores

2 participantes

Fórum CataBits :: Web e design :: Assuntos gerais

Ir para baixo

Marcação CSS para múltiplos navegadores Empty Marcação CSS para múltiplos navegadores

Mensagem  wallyvianna 9/4/2011, 10:31

Precisava desenvolver marcações CSS para mais de um navegador, de preferência em uma única folha de estilos.

1) Atualmente resolvo a questão de duas formas:
(a) criando dois arquivos CSS, um para cada página (ou grupo de páginas); um CSS para o IE e outro CSS para os demais navegadores Mozilla-compatíveis:


Código:
em uma folha de estilos defino um código CSS "menos específico"

<style type="text/css">
#div_teste {/*para navegadores Mozilla*/
width:100px;
height:100px;
background-color: orange;
}
</style>

e na outra folha o mesmo código "mais específico"
<style type="text/css">
#nome-da-pagina #divcontainer #div_teste {/*para Internet Explorer */
width:200px;
height:200px;
background-color: yellow;
}
</style>

Outra variante da mesma solução seria:
Código:
fazer um CSS para a página "A" (navegadores Mozilla)
#div_teste { background-color: orange; }

e copiar o CSS para a página "B", incluindo marcações com maior especificidade apenas onde as alterações são necessárias (no Internet Explorer):
#div_teste { background-color: yellow; !important}
#div_teste { background-color: orange; }


2) Uma das dicas que colhi na web seria desenvolver marcações assim:
Código:
<style type="text/css">
#div_teste {/*para Internet Explorer*/
width:100px;
height:100px;
background-color: orange;
}

html>body #div_teste {/*para outros navegadores*/
width:200px;
height:200px;
background-color: yellow;
}
</style>

Outra informação mais fundamentada que colhi recomendava inserir marcações assim:
Código:
<!-- para Internet explorer-->
<!--[if IE]>
<style type="text/css">
#div_teste {
width:100px;
height:100px;
background-color: orange;
}
</style>
<![endif]-->

<!-- para outros navegadores-->
<style>
#div_teste {
width:200px;
height:200px;
background-color: yellow;
}
</style>

Como não fui feliz nas minhas tentativas de usar os códigos do tópico "2", queria ajuda para resolver essa questão de uma maneira melhor do que ando fazendo (tópico "1").

wallyvianna

Mensagens : 91
Data de inscrição : 01/07/2010

Ir para o topo Ir para baixo

Marcação CSS para múltiplos navegadores Empty Re: Marcação CSS para múltiplos navegadores

Mensagem  Luferat 10/4/2011, 10:19

Realmente, CSS é uma questão delicada, ainda mais quando falamos de sites fortemente focados no design. O problema cresce na medida que novas versões do Explorer são lançadas e temos que nos preocupar ainda com as tais "funções de compatibilidade" que a MS insiste em manter com as versões antigas. Mas nunca se sabe se a opção está ativa ou não no cliente.

O Explorer tem alguns bugs em relação a sintaxe do CSS que podem ser exploraros. Eu costumo definir as CSS no padrão W3C e no mesmo objeto fazer pequenos ajustes usando esses "bugs". Exemplo:

Código:
font-family: 'trebuchet ms', trebuchet;
font-size: x-small;

/* ajustes gerais para IE */
_font-size : 8pt;
*font-size: 8pt;

/* ajustes para IE 6 e anteriores */
font-size/* */:/**/small;

/* ajustes para IE 7 e posteriores */
font-size: /**/small;
Mas só fica bom em sites sem compromisso extremo com as normas.

O exemplo que você deu, usando:

Código:
<!--[if IE 6]>
...
<![endif]-->
<![if !IE]>
...
<![endif]>
Funciona bem comigo, mas acho que suja demais o código, dificultando muito a validação pelo W3C!

Uma dica é usar o JavaScript para detectar o navegador e incluir os estilos específicos quando for o caso, usando a classe/objeto navigator.

Por essas e outras que, quando preciso fazer sites "intimamente dependentes do design", prefiro o uso das boas, velhas e (erroneamente) malfadadas tabelas...

Vamos ver se o HTML5 e a revisão das CSS2 resolvem de vez a questão (pessoalmente acho que vai piorar).

Cá entre nós, já viu os código fonte de alguns serviços do Google? Como você acha que eles mantém a mesma aparência no IE e "no resto"?
Luferat
Luferat
Admin

Mensagens : 85
Data de inscrição : 17/03/2010
Idade : 52

http://forum.catabits.com.br

Ir para o topo Ir para baixo

Marcação CSS para múltiplos navegadores Empty Idéia

Mensagem  wallyvianna 10/4/2011, 11:24

Então uma idéia interessante seria fazer um código JS que executasse esse algoritmo?

Código:
<html>
<cabeçalho>
<titulo>JScript escreve CSS por vari&aacute;vel</titulo>

<roteiro linguagem="JavaScript" tipo="text/javascript">
funcão escreveCSS() {
var CSSmozilla = "<estilo tipo='text/css'>#div-teste {largura:200px; altura:200px; fundo-coor:yellow}</estilo >"
var CSSIE = "<estilo tipo='text/css'>#div-teste {largura:100px; altura:100px; fundo-coor:lightyellow}</estilo >"

se navegador.nomeDaAplicação for igual a "netscape"
documento.escrever(CSSmozilla)
ou
"internet explorer"
documento.escrever(CSSIE)
}
</roteiro>

<corpo>
<roteiro>escreveCSS()</roteiro>
<div id="div-teste">texto de teste</div>
</corpo>
</html>

wallyvianna

Mensagens : 91
Data de inscrição : 01/07/2010

Ir para o topo Ir para baixo

Marcação CSS para múltiplos navegadores Empty Re: Marcação CSS para múltiplos navegadores

Mensagem  Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum CataBits :: Web e design :: Assuntos gerais

 
Permissões neste sub-fórum
Não podes responder a tópicos