¿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.¿Hay alguna forma de hacer CSS condicional específicos del navegador dentro de un archivo * .css?
Hay una manera de hacerlo en IE aprovechando los errores en el navegador y @import. El mejor método que he visto es here, cortesía de bobince (y sin duda supero mi respuesta, heh).
En general, no. Incluso los comentarios condicionales son específicos del navegador para IE.
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.
Solo por medio de hacks. Los comentarios condicionales solo se definen para los archivos de marcado, no para los archivos .CSS.
No. El propósito de utilizar 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.
Hay múltiples cortes (ver este somewhat outdated table como ejemplo)
y no hay soluciones basadas en el lado del servidor, tales como conditional-css para php
Pero bien escrito, css bien estructurada no debería necesitar que muchos hacks, solo el ocasional, es decir, arreglar.
puede utilizar este archivo javascript inteligente, CSS Browser Selector: http://rafael.adm.br/css_browser_selector/
que le permite orientar los navegadores específicos mediante el uso de nombres de clases 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
}
No creo que hay una mejor Selector de navegador CSS distinto al referido anteriormente por Rafael Lima, por lo que no agregaré el enlace aquí o los ejemplos que se encuentran en la misma publicación y que se tomaron 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.
Esto debería ser un comentario –
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 se pueden separar. Algunos de estos los he puesto en browserhacks.com
Siempre es mejor comenzar con el mejor CSS que puedes hacer primero, pero estos están disponibles para cuando tu tiempo es corto y algo se necesita ... ayer.
Actualmente, para referencia, Internet Explorer es la versión 11, Safari es la versión 8, Firefox es hasta 36 en las versiones Desarrollo/Aurora, y Chrome es hasta 41 en las versiones Desarrollo/Canarias en el momento de esta publicación.
Estos son muy específicos, si se alteran quitando cualquier pieza, no funcionarán correctamente.
Para orientar cualquier versión de Firefox [NO en iOS!Ver más 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ña pero funciona, cópialo exactamente como lo ves 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 funciona para 10.1:
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm)
{ @media {
.selector { color:red; }
}}
para 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 apuntar 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 de hackeo en vivo de CSS:
https://browserstrangeness.bitbucket.io/css_hacks.html MIRROR: https://browserstrangeness.github.io/css_hacks.html
¡Disfrútalo!
Si utiliza un truco para apuntar específicamente a un navegador (incluso si no está revisando los agentes de usuario), su código podría romperse o tener efectos no deseados cuando el navegador finalmente resuelva el problema que está trabajando. En su lugar, intente encontrar una forma más estandarizada de solucionar el problema, o investigue para ver si es un error del navegador o no. –