Aquí podría ser tu PUBLICIDAD


¿Hay alguna manera de hacer un CSS condicional específico del navegador dentro de un archivo * .css?

votos
8

¿Hay alguna manera de hacer un CSS condicional específico del navegador dentro de un archivo * .css? Quiero definir todos los estilos dentro del mismo archivo físico.

Publicado el 12/03/2009 a las 19:56
fuente por usuario craigmoliver
En otros idiomas...        العربية       

8 respuestas

votos
6

Hay una manera de hacerlo en IE aprovechando los errores en el navegador y @import. El mejor método que he visto está aquí , cortesía de Bobince (y sin duda supero mi respuesta, je).

En general, sin embargo, no. Incluso los comentarios condicionales son específicos del navegador para IE.

Respondida el 12/03/2009 a las 08:11
fuente por usuario Daniel Lew


Aquí podría ser tu PUBLICIDAD


votos
5

He estado trabajando en esto durante muchos, especialmente los últimos navegadores - la mayoría de las versiones de Firefox, WebKit, y las versiones de Internet Explorer. Más recientemente, las versiones de Safari y Chrome son capaces de ser separados. Algunos de ellos he puesto en browserhacks.com

Siempre es mejor empezar con la mejor CSS se puede hacer en primer lugar, pero éstos están disponibles para cuando el tiempo es corto y se necesita algo ... ayer.

Actualmente para referencia, Internet Explorer es la versión 11, Safari es la versión 8, Firefox es hasta 36 versiones en Desarrollo / Aurora, y Chrome es hasta el 41 en el desarrollo / versiones Canarias en el momento de esta publicación.

Estos son muy específicos, si se alteran, eliminando las partes no funcionarán correctamente.

Para hacer referencia a cualquier versión de Firefox [NO en iOS! Vea abajo]:

/* Firefox (any) */

_:-moz-tree-row(hover), .selector { color:red; }

Para detectar nuevas versiones de Chrome:

(Esto no es para Chrome en iOS !!! --- los desarrolladores utilizan el motor de Safari en iPads y iPhones en lugar de cromo o Mozilla - por lo que utilizar el Safari hackear para las versiones de IOS de estos navegadores en su lugar)

/* Chrome 29 and newer */

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
    .selector { color:red; }
}

Si desea hacerlo usted también puede dirigirse a Chrome un poco más atrás con una combinación piratear trabajé fuera (esto es CSS extraño pero funciona - copiarlo exactamente como lo ve aquí):

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
   .selector {-chrome-:only(; 
       color:red; 
   );} 
}

Para detectar nuevas versiones de Safari fue tan difícil de resolver como Chrome, éste usando un par anidado de preguntas de los medios:

/* Safari 6.1-10.0 */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
   .selector { color:red; } 
}}

Safari actualizado a finales de marzo de 2017 por lo que éste trabaja para 10.1:

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) 
{ @media {
   .selector { color:red; } 
}}

Para las versiones (7.1 y superiores) se puede utilizar éste:

/* Safari 7.1+ (10.1 is the current version as of April 2017) */

_::-webkit-full-page-media, _:future, :root .selector { color:red; }

Para hacer referencia a las nuevas versiones de Internet Explorer:

/* Internet Explorer 11 */

_:-ms-fullscreen, :root .selector { color:red; }


/* Internet Explorer 10+ AND Microsoft Edge */

_:-ms-lang(x), .selector { color:red; }


/* Internet Explorer 9-11 */

_::selection, .selector { color:red\0; }

/* Microsoft's Edge Browser */

@supports (-ms-ime-align:auto) { .selector { color:red; } }

Éstos son los fundamentos, sino para ver más de mis creaciones para apuntar muchas diferentes versiones de navegadores ver mi blog:

https://jeffclayton.wordpress.com

o mis páginas de prueba en vivo CSS Hack:

https://browserstrangeness.bitbucket.io/css_hacks.html ESPEJO: https://browserstrangeness.github.io/css_hacks.html

¡Disfrutar!

Respondida el 20/12/2014 a las 06:44
fuente por usuario Jeff Clayton

votos
4

puede usar este ingenioso archivo javascript, Selector de navegador CSS: http://rafael.adm.br/css_browser_selector/

le permite dirigirse a navegadores específicos utilizando nombres de clase tales como:

.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
Respondida el 14/03/2009 a las 03:32
fuente por usuario Ara_Abc

votos
3

Solo por medio de hacks. Los comentarios condicionales solo se definen para los archivos de marcado, no para los archivos .CSS.

Respondida el 12/03/2009 a las 08:00
fuente por usuario AaronSieb

votos
1

No. El propósito de usar archivos CSS es que cada archivo representa un estilo particular. Si desea escribir scripts, debe usar PHP o algo así, CSS es simplemente una descripción de un solo estilo.

Respondida el 12/03/2009 a las 08:13
fuente por usuario Malcolm

votos
0

No creo que hay una mejor navegador selector de CSS del que se menciona anteriormente por Rafael Lima, así que no voy a añadir el enlace aquí o ejemplos que se encuentran en mismo puesto y tomado de la página de Rafael Lima.

La advertencia es que sólo se puede utilizar fuera del selector de CSS y no se dirige a líneas específicas de CSS, pero es más robusto que los métodos estándar y fácil de leer.

Respondida el 06/11/2014 a las 11:27
fuente por usuario Brad Elfman

votos
0

Hay varios hacks (vea esta tabla algo desactualizada como ejemplo)

Y hay soluciones basadas en el servidor, como conditional-css para php

Pero un css bien estructurado y bien estructurado no debería necesitar muchos hacks, solo los parciales, por ejemplo, fix.

Respondida el 13/03/2009 a las 12:20
fuente por usuario spiral

votos
0

No estoy seguro de una manera de hacer eso exactamente. Simplemente configuramos el archivo CSS basado en el navegador de los usuarios en código subyacente.

Respondida el 12/03/2009 a las 08:00
fuente por usuario Jeremy Cron