ti-enxame.com

Quais são as melhores maneiras de implementar CSS entre navegadores?

Quais são as melhores maneiras de implementar CSS entre navegadores?

Regra: uma abordagem para uma resposta.

4
stacker

Você pode usar comentários condicionais para corrigir problemas com o Internet Explorer. Além disso, você nunca precisará segmentar o Firefox/Chrome/Opera separadamente, pois todos eles suportam os padrões.

O cache não deve entrar nele; você deve veicular o mesmo código para todos os navegadores.

4
DisgruntledGoat

A melhor e mais fácil maneira de usar uma biblioteca. Bibliotecas como OOCSS, Blueprint ou 960gs já foram projetadas para replicar sua exibição nos principais navegadores. Tudo o que resta depois disso, na maioria das vezes, é garantir que seus estilos personalizados sejam compatíveis com vários navegadores e que sua marcação não produz problemas.

Evite hacks como a praga, se possível (sim, use condicionais).

2
Kenneth Love

Quando leio perguntas e respostas como essa, começo a pensar que posso estar louco, mas escrevi sites bastante complexos usando bastante css, incluindo css3 e outros truques, e nunca tive que recorrer nem mesmo a comentários condicionais.

No entanto, verifico constantemente meu trabalho em vários navegadores (codifico predominantemente no Chrome e testo no firefox e ie7) durante a codificação. Quando vejo problemas surgirem, apenas dou um passo para trás, entendo por que as coisas estão renderizando de maneira diferente e, geralmente, escolho uma abordagem ligeiramente diferente.

Dito isto, tenho um interesse intelectual por diferentes métodos e hacks. Eu particularmente gosto de ler sobre as técnicas usadas pelo CSS3 PIE e pelo modernizr.

A melhor maneira de abordar a codificação em vários navegadores é estar ciente das diferentes maneiras em que diferentes navegadores interpretarão seu código e gravá-lo de uma maneira que eles não possam ajudar, mas acertar.

1
Zach Lysobey

projetar e desenvolver com os padrões da web
valide seus documentos e folhas de estilo constantemente!
teste entre navegadores/plataformas diferentes diariamente!
, no mínimo, antes de você enviar uma solicitação pull ou fazer uma confirmação em um repositório.

de qualquer maneira, você deve escrever documentos em conformidade, mas isso é crucial para a criação de CSS em vários navegadores/plataformas.

nota: o verdadeiro poder da validação não está em conformidade 100% do tempo; você terá super poderes quando entender o que não precisa ser validado, pode ser adiado e deve ser corrigido imediatamente.
e esse é o poder: a validação constante reforça as regras das especificações e você será versado. os testes constantemente entre navegadores/plataformas mantêm você interessado em quais folhas de estilo de agente de usuário do navegador você está enfrentando mais. conforme seus estilos, você tem ainda menos problemas.

você pode usar bibliotecas e estruturas, se quiser, mas está abstraindo toda a dor e sofrimento de seus fluxos de trabalho e nunca terá uma visão detalhada dos estilos que está solicitando aqui. no entanto, libs/frameworks fazem um bom trabalho em conceder a você esse poder, embora isso normalmente ocorra com o inchaço da página.

reset.css, normalizr.css e até o *{border:none; margin:0; padding:0) reset são armas no seu arsenal para igualar o campo de jogo entre o navegador e seus estilos.

sim, eu recomendei o * "hack", com duas outras opções. cada um tem seu próprio lugar ao lutar com agentes de usuários.

além disso, é um absurdo não tirar proveito das falhas de certos agentes usuários, porque essas falhas não serão renderizadas com 100% de continuidade e precisam ser solucionadas. Ao fazê-lo, as próprias falhas fornecem o gancho perfeito para detectar recursos ou até farejá-los, para que possam ser tratados de acordo!

use todos os truques, falhas, recursos e não recursos em que você possa colocar suas mãos para dobrar o domínio e forçar os navegadores na linha.

...... se você precisar. mas se você estiver desenvolvendo com os padrões da web, descobrirá que não precisará deles tanto quanto antes.

e como você conta com menos deles, quando tiver a oportunidade de usar um para solucionar um problema, use-o com rapidez! você já sabe qual é o problema e também possui uma solução direcionada ao problema e nada mais.

cada navegador tem suas próprias maneiras de ser segmentado exclusivamente, sendo os mais óbvios comentários condicionais.
use comentários condicionais para ie6-9 e use compilação condicional para renderizar estilos para ie10 e ie11.
mas, novamente, se você é dwws e dvwws, pode incluí-los em todos os documentos que criar, mas descubra que as folhas de estilo são estéreis, hospedando um punhado de estilos visando apenas diferenças de 1 a 3 pixels ou obtendo um plano de fundo -colors para esticar (ou não) 100%, etc.

1
albert

O que faço é usar um CSS redefinido e depois instruções condicionais. O CSS de redefinição corrige quase todos os problemas e o condicional corrige todos os problemas no IE. Se houver diferenças entre os outros navegadores, geralmente tento contorná-los, como aumentar a largura de todos os navegadores ou o tamanho da fonte.

Eu pessoalmente uso o CSS de redefinição YUI.

0
Darryl Hein

CSS3 PIE parece bastante promissor como uma camada de compatibilidade com CSS3. Obviamente, existem outras preocupações entre navegadores nas versões CSS anteriores.

Pergunta relacionada ao IE6, muitas informações úteis: Devo me preocupar em dar suporte ao IE6?

0
JasonBirch

Prefaciando isso com um aviso contra o uso de hacks CSS.

Do ponto de vista do desempenho puro, o armazenamento em cache será mais eficaz com um único arquivo se, por outro motivo, não responder uma vez a uma única solicitação HTTP do cliente. Além de servir o mesmo arquivo para todos os usuários, independentemente do navegador, Comentários condicionais bloqueiam downloads em algumas situações.

Para segmentar todas as versões diferentes do Internet Explorer em um único arquivo, existem vários hacks CSS. Lembre-se de que isso tornará seu CSS inválido (se a validação for uma preocupação para você).

corpo {
 cor: vermelho;/* todos os navegadores */
 cor: verde\9;/* IE8 e abaixo */
 * Cor: amarelo;/* IE7 e abaixo */
 _Color: laranja;/* IE6 */
}

O bloqueio de comentários condicionais é realmente apenas um problema em alguns casos no IE8, quando há um comentário condicional. Dependendo do que você pensa em oferecer suporte ao Internet Explorer, isso pode ou não ser um problema.

Eu pessoalmente uso comentários condicionais. Pessoalmente, acredito que os hacks de CSS são terríveis e que qualquer resultado de desempenho proveniente de comentários condicionais, reais ou imaginários, é não vale a pena que os hacks de CSS causa frequentemente.

Os comentários condicionais são relativamente fáceis de implementar e há um ótimo artigo sobre o uso deles no Quirksmode. A seguir, abordaremos apenas o IE6:

<! - [se IE 6]> 
 <link rel = "stylesheet" type = "text/css" href = "/ media/css/ie6.css" /> 
 <! [endif] ->

Há uma sintaxe que permitirá que você direcione o Internet Explorer para uma versão igual a, menor que, maior que, menor que ou igual a, maior que ou igual a um número de versão especificado. O exemplo acima é igual a.

0
Bryson