Usando um estilo diferente CSS para navegadores específicos

Question

Qual é a melhor maneira de ter CSS separado para IE e outros navegadores? Estou pensando em apenas direcionada aos usuários de IE, Firefox e Safari. Especialmente agora com suporte CSS3 na maioria dos navegadores mas IE.

As várias maneiras de fazer isso que eu me deparei são

1. carregamento de folhas de estilo separadas condicionalmente usando <!--[if IE]>
2. sublinhado corte e vários outros embutidos IE hacks

Eu prefiro (2) como (1) é um trabalho extra, especialmente quando em desenvolvimento. Mas (2) não parece trabalhar o tempo todo. Qual é a maneira mais eficiente?

Answer 1

Eu tenho uma folha de estilo que tudo pega na parte superior do documento.

debaixo deste fazer a sua [! - [if IE]] folha de estilo condicional.

Em aqui apenas substituir os estilos que estão causando problemas no IE. -. O último estilo para uma classe particular que é captado é o que será seguido

Answer 2

Nossa equipe alças CSS três seguintes regras:

1. Certifique-se de arquivos gerais / common CSS funcionam como deveriam com todos os navegadores tão perto quanto possível.
2. Lidar com todos os "bugs" ou seja, em arquivos separados, o carregamento de controle as folhas de estilo com condições IE.
3. Não hacks permitido a menos que não é possível fazê-lo funcionar seguinte primeiras duas regras.

Answer 3

Eu concordo com a manutenção de todas as CSS seu núcleo em um único arquivo. Se você estiver usando ASP.NET, em seguida, você pode usar um WebHandler gerenciar quais CSS realmente é enviado. Eu tenho certeza que outras línguas têm soluções semelhantes. Isso permite que você envie apenas o que você precisa e permitir que ele seja armazenado em cache. O outro benefício é que você pode combinar vários arquivos CSS (se isso é como fazê-lo) e presente apenas um. Esta é uma boa prática, como você reduzir o número de pedidos para o servidor web.

Você pode então escrever coisas como [if lt IE 8] margin: 0px; e não seria enviado para o IE8 ou FF etc.

Se você estiver usando apenas HTML então você tem que ir com o [! - [if IE]]. Condições estilo mencionado acima

Nós usamos um WebHandler no nosso projeto muito grande e eu não iria nunca fazê-lo de outra maneira.

Consulte http://www.conditional-css.com/download . Ele está disponível para PHP, C # e C

Boa sorte.

Answer 4

<!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

Este truque amplamente usando Yandex (aka "google russa") para reduzir solicitações HTTP. market.yandex.ru usando este, por exemplo.

Answer 5

Você pode usar desta forma também;. Algumas vezes as condições não podem trabalhar onde precisamos escrever os estilos no meio do código

<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>  

Verifique a $browser com:

IE - “MSIE”

Firefox - “Firefox”

Safari - “Safari”

Opera - “Opera”

Chrome - “Chrome”