hacks CSS aceitáveis ??/ correções

StackOverflow https://stackoverflow.com/questions/504261

  •  21-08-2019
  •  | 
  •  

Pergunta

Existe uma lista de 'bom' hacks CSS limpas, que estão determinados a ser à prova de futuro?

Por exemplo, zoom:1 é seguro, desde que ele só serviu para IE, e se lembra de que ele está lá. O truque muito comum de usar seletores filho é não seguro porque IE7 suporta-los. Usando height:1% só se sente sujo (mas que poderia ser apenas me).

Não conheço ie7-js , assim IE6 erros não se preocupe me muito. Além disso, eu não estou procurando um debate religioso, apenas fontes.

Obrigado pelas respostas - eu selecionei aquele com melhores fontes como resposta .

Obrigado também pelas sugestões de usar arquivos CSS separados, ou não se preocupar com isso. Concordo inteiramente com você, e para mim, aqueles que são dados. Mas, quando confrontados com um problema de layout, eu quero uma solução segura que irá minimizar o risco de que eu vou ter que revisitar o problema no IE $ ou $ FF + 1. I Desculpe não fez essa mais clara.

Foi útil?

Solução

Este é um bom lugar para bugs do navegador bem documentados e bem testados e os hacks permitem que você trabalhe em torno deles:

http://www.positioniseverything.net/

Outras dicas

Para a maioria dos erros ou seja, eu acho que você é melhor fora de usar condicional comentários volta um link para um estilo específico browser. Ele tende a manter as coisas muito arrumado e é auto documentar bastante.

Eu usei Web site de Peter-Paul Koch " QuirksMode " um monte de questões que envolvem CSS e cruz compatibilidade -browser. Ele tende a carranca em métodos específicos de navegador, mas ele tem uma página sobre CSS Hacks .

Nicole Sullivan (AKA Stubbornella ) que trabalha para o Yahoo equipe de desempenho sugerido em os 7 Hábitos para Excepcional Perf que você deve usar o CSS underscore hack para consertar erros do IE6 porque:

  • Hacks devem ser poucos e distantes entre si.
  • Se você só terá 5-6 hacks (que já está muito), então não faria sentido colocar aqueles em um arquivo externo e, assim, separando-a de seu contexto.
  • Um arquivo extra levaria a penalidades de desempenho ( Yahoo Melhores Práticas, Regra 1 ).

No entanto, deve notar-se que este não é CSS válido.

Não há tal coisa como uma boa limpeza / aceitável [css] corte -. Sempre código para Padrões e use + folhas de estilo específicas versão do navegador para todos os hacks necessários para fazer as coisas funcionarem

Por exemplo:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
etc

Então, quando nova versão de um navegador são liberados, copiar hacks da versão anterior e retirar os bits que já não se aplicam (e adicionar novos bits, se necessário).

(carga de estilo individuais usando comentários condicionais para o IE, e user-agent sniffing para outros navegadores.)

Sublinhado-hack para o IE6-stuff funciona muito bem, por exemplo. 

min-height:50px;
_height:50px;

Não requer mover as coisas fora de contexto para novos CSS-arquivos, única IE6 recebe-los e eles são fáceis de filtrar, se você decidir parar de apoiar IE6. Eles também são muito mínima e não irá sobrecarregar o seu CSS muito.

Modificando o seu CSS para apoio específico para o navegador nunca está errado - contanto que você pode facilmente contê-lo. Como você vai notar, os navegadores compatíveis com padrões, * tosse * tudo , exceto MSIE, nunca romper com lançamentos futuros. Novos padrões W3C também não quebrar os padrões anteriores, eles costumam depreciar ou estender os padrões anteriores, no máximo.

As pessoas têm mencionou comentários condicionais que são grandes para lidar com IE. Mas você vai precisar de um pouco mais para lidar com todos os navegadores (móveis, gecko, webkit, ópera, etc.). Normalmente você vai analisar os cabeçalhos de solicitação de entrada para buscar o tipo de navegador e versão do param-User Agent. Baseado em que você pode começar a carregar seus arquivos CSS.

Eu acredito a forma como a maioria de nós fazê-lo é:

  • Primeiro desenvolvendo para um navegador compatível com os padrões (vamos dar FF por exemplo)
  • Uma vez que o CSS está completa você se aproxima apoio providig para o IE (isto pode ser feito facilmente com os comentários condicionais, como perviously mencionado)
    • Primeiro crie um arquivo CSS que irá multar tudo melodia para IE6 e qualquer outra versão abaixo
    • Em seguida, crie um arquivo CSS que irá lidar com tudo para IE7
    • Por último, crie um arquivo CSS que irá lidar com tudo para versões do IE do IE8 e maior
      • Uma vez IE9 vem de fora, certifique-se de definir IE8 + manipulação para IE8 específico, e criar um arquivo CSS IE9 + com as correções necessárias
  • Finalmente, crie um arquivo CSS adicional para correções webkit
    • Se necessário, você também pode criar arquivos adicionais para alvejar especificamente Chrome ou Safari, se necessário

No que diz respeito navegador implementações específicas CSS, eu normalmente agrupar todos aqueles em minha principal arquivo CSS (você pode facilmente fazer uma pesquisa para aqueles e substituí-los em um documento, se necessário). Então, se algo tem que ser transparente, eu definir tanto opacidade e filtros (MSIE) no mesmo bloco. Navegadores simplesmente ignorar implementações que não suportam, para que o seu seguro. implementações específicas eu tendem a evitar são implementações personalizadas (hey, eu como a caixa -moz acima do W3C, mas eu só não quero contar com ele).

Como vai com a herança CSS e substituindo, você não tem que redefinir todas as declarações CSS e definições em cada arquivo CSS. Cada arquivo CSS consecutivamente em carga deve única conter o seletor e definições específicas necessárias para a correção, e nada mais.

O que você acabar com, no final, é o seu (enorme) css principal e outros, que contém algumas linhas cada, para correções navegador específicos - que resume a algo que não é assim muito difícil de manter e acompanhar. É uma preferência pessoal qual navegador o arquivo css base será baseado fora, mas normalmente você vai ser alvo de um navegador que irá criar o mínimo de problemas para outros navegadores (Então, sim, desenvolver para o IE6 seria uma decisão muito pobre naquela ponto).

Como sempre, seguindo as boas práticas e ser pragmático e meticuloso com seletores e detalhes sobre cada classe e utilizando frameworks irá levá-lo no caminho do bem com raramente correções necessárias. Estruturação seus arquivos CSS é uma enorme vantagem a menos que queira acabar com uma bagunça sem sentido não-ordenada.

Centricle tem uma boa lista de hacks CSS e suas compatibilidades.

Eu não acho que você vai encontrar uma lista de hacks que estarão à prova de futuro, como saber se pode dizer o que coisa estúpida será implementado no IE seguinte.

Este artigo é um bom resumo de hacks CSS: http://www.webdevout.net/css -hacks

Aqui está um boa lista de filtros que são muito estáveis: 

/* Opera */
.dude:read-only { color: green; } 

/* IE6/IE7 */
@media, 
  { 
  .dude { color: silver;} 
  }

/* IE8  \0 */
@media all\0 
  { 
  .dude { color: brown; } 
  }

/* IE9 monochrome and \9 */
@media all and (monochrome: 0) 
  { 
  .dude { color: pink\9; } 
  }

/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
    /* 
    * > /**/ 
    /* hides from IE7; remove if unneeded */


/* Firefox */
@-moz-document url-prefix() 
  { 
  .dude { color: green; }
  }

Ao definir regras, acho que é bom para permitir a degradação natural ocorrer, por exemplo, em CSS3 não há suporte para modelos RGBA cores, mas não está em CSS2, então eu me vejo fazendo: 

 background-color: #FF0000; 
 background-color: rgba( 255,0,0, 50% );

De modo que quando a regra mais tarde falha em navegadores mais antigos que não suportam-lo, ele irá degradar ao estilo previamente definido.

Eu prefiro o técnica comentário condicional mundial descrita por Hiroki Chalfant;

acho que é útil para manter minhas regras IE-alvo lado-a-lado com as minhas regras padrões direcionados em uma única folha de estilo válido.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top