rotate - css cross browser generator
CSS si las declaraciones... ¿es correcto? (4)
Soy nuevo con el CSS condicional. Mi pregunta es, ¿es correcto usarla para tratar problemas con navegadores cruzados?
Por ejemplo:
#header
{
[if IE 7] width: 600px;
[if Webkit] width:300px;
}
Nota del editor: Es muy probable que OP lo use: http://www.conditional-css.com/
En cuanto a la validez de sus declaraciones, JackJoe tiene una buena respuesta. Pero, generalmente, no es una buena práctica. Es una mejor idea, en lo que respecta al diseño, obtener un buen diseño que funcione a través del navegador y no ensuciar con problemas de diseño específicos del navegador. En su lugar, preocúpese por los problemas específicos de las funciones. Definitivamente hay momentos en los que simplemente no se puede solucionar un problema de IE6 y en ese momento es probable que deba aplicar algún código específico del navegador para que no se da un dolor de cabeza.
En general, sin embargo, eso ni siquiera es una buena idea.
Nota al margen: ¿Por qué en nombre de Tim Berners-Lee todavía intentas soportar IE5?
Es común usar variaciones de esta técnica para IE, creo que se hizo popular por HTML5 Boilerplate [cita requerida]:
<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->
Ahora puede orientar los elementos sin IE hacks en sus archivos CSS principales de esta manera:
.ie6 .header li {
/* some ie6 only styles here */
}
Para mí, esto es mucho más fácil de mantener que usar hojas de estilo separadas, pero sufre el revés muy leve de otros navegadores que leen (pero no aplican) los estilos de IE.
Si tiene problemas con Webkit, lo más probable es que esté haciendo algo mal. No Absolutamente, pero es muy probable.
EDITAR: Muchos navegadores permiten extensiones propietarias que le permiten establecer reglas que solo se aplicarán a ese navegador. Ejemplo:
-moz-property {}
-webkit-property {}
-o-property {/* Opera */}
Tenga en cuenta que esto no significa que pueda aplicar ninguna propiedad CSS, tendrá que ver qué está disponible.
La mejor referencia que pude encontrar rápidamente: http://reference.sitepoint.com/css/vendorspecific
SO Editors, siéntanse libres de reemplazar este enlace si hay una mejor referencia
No, no lo es, puedes probar estos
Para IE 7 y 8:
width: 600px/9;
Para IE10:
width:300px/0/;
Para todos los navegadores:
width: 600px;
Pero si lo quiere en los tres navegadores por separado, IE, GC, FF lo usa así
width:300px; width: 600px/9; width:300px/0/;
¡Creo que esto es lo que estabas buscando!
Use declaraciones condicionales para los archivos CSS reales (o clases) pero en el html.
Por ejemplo, por ejemplo:
<!--[if lte IE 6]>
<link href="css/layoutIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
Esto está escrito en el archivo html, ¡no en el archivo CSS!
El formato que publicaste creo que en realidad no funciona y apuesto a que no valida, por lo que no es estándar.