Usando diferentes estilos CSS para navegadores específicos

Question

¿Cuál es la mejor manera de tener CSS separado para IE y otros navegadores? Estoy pensando en apuntar solo a los usuarios de IE, Firefox y Safari. Especialmente ahora con soporte CSS3 en la mayoría de los navegadores pero IE.

Las diversas formas de hacer esto que he encontrado son

1. cargando hojas de estilo separadas condicionalmente usando <!--[if IE] >
2. subrayar hack y varios otros hacks IE en línea

Prefiero (2) ya que (1) es un trabajo extra, especialmente cuando se está desarrollando. Pero (2) no parece funcionar todo el tiempo. ¿Cuál es la forma más eficiente?

Answer 1

Tendría una hoja de estilo que todo recoge en la parte superior de su documento.

debajo de esto haz tu        [! - [si IE]] hoja de estilo condicional.

Aquí solo anula los estilos que causan problemas en IE. - el último estilo para una clase particular que se selecciona es el que se seguirá.

Answer 2

Nuestro equipo maneja CSS siguiendo tres reglas:

1. Asegúrese de que los archivos CSS generales / comunes funcionen como deberían con todos los navegadores lo más cerca posible.
2. Manejar todos los IE " errores " en archivos separados, controle cargar las hojas de estilo con condiciones de IE.
3. No se permiten hacks a menos que no sea posible hacerlo funcionar siguiendo las primeras dos reglas.

Answer 3

Estoy de acuerdo con mantener todos los CSS principales en un solo archivo. Si está usando ASP.NET, puede usar un WebHandler para administrar qué CSS realmente se envía. Estoy seguro de que otros idiomas tienen soluciones similares. Esto le permite enviar solo lo que necesita y permitir que se almacene en caché. El otro beneficio es que puede combinar múltiples archivos css (si así es como lo hace) y presentar solo uno. Esta es una BUENA práctica ya que reduce el número de solicitudes al servidor web.

Luego puede escribir cosas como [if lt IE 8] margin: 0px; y no se enviaría a IE8 o FF, etc.

Si solo está utilizando HTML, entonces debe seguir las condiciones de estilo [! - [if IE]] mencionadas anteriormente.

Usamos un WebHandler en nuestro gran proyecto y nunca lo haría de otra manera.

Consulte http://www.conditional-css.com/download . Está disponible para PHP, C # y C

Buena suerte.

Answer 4

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

Este truco utiliza ampliamente Yandex (también conocido como " ruso google ") para reducir las solicitudes HTTP. market.yandex.ru utilizando esto, por ejemplo.

Answer 5

También puede usarlo de esta manera; algunas veces las condiciones pueden no funcionar donde necesitamos escribir los estilos en el medio del 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 el $browser con:

IE & # 8211; & # 8220; MSIE & # 8221;

Firefox & # 8211; & # 8220; Firefox & # 8221;

Safari & # 8211; & # 8220; Safari & # 8221;

Opera & # 8211; & # 8220; Opera & # 8221;

Chrome & # 8211; & # 8220; Chrome & # 8221;