Soy nuevo con el CSS condicional. Mi pregunta es, ¿es correcto usarla para tratar problemas con navegadores cruzados?CSS if declaraciones ... ¿es correcto?
Por ejemplo:
#header
{
[if IE 7] width: 600px;
[if Webkit] width:300px;
}
Nota del editor: OP es muy probable que tenga esto: http://www.conditional-css.com/
Use sentencias condicionales para los archivos CSS reales (o clases), pero en el html.
Así 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 el archivo CSS!
El formato que ha publicado creo que en realidad no funciona y apuesto a que no lo valida, por lo que no es estándar.
¡Sume la misma respuesta! – Hacknightly
Gracias ... JackJoe! Vi su tipo de solución en la web ... La pregunta es cómo puedo hacer lo mismo con un archivo CSS ... y no con diferentes archivos para cada caso – BorisD
@BorisD, depende de tener un método estándar o no. . La solución que sugerí está dentro de los estándares, si quieres una solución no estándar, utiliza el método "hackear", como agregar un carácter de subrayado a la propiedad de la clase, por ejemplo: '_font: Arial' (funciona con IE6 al menos), o usa el truco "estrella" (agrega un asterisco a la propiedad de clase, funciona con IE7. ¡Ten en cuenta que este método es muy difícil de solucionar en un gran archivo CSS! – jackJoe
En cuanto a la validez de sus declaraciones, jackJoe tiene una buena respuesta. Pero, en general, 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 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 dé 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 intentan soportar IE5?
Se ha convertido en común el uso de variaciones de esta técnica para el 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 su CSS principal archivos de esta manera:
.ie6 .header li {
/* some ie6 only styles here */
}
Para mí, esto es mucho más fácil de mantener que el uso de hojas de estilo separadas, pero sufre el revés muy leve de otros navegadores de lectura (pero que no se aplica) la pocilga IE les.
Si tiene problemas con Webkit, lo más probable es que esté haciendo algo incorrecto. 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 se puede aplicar cualquier propiedad CSS, que tendrá que ver lo que está disponible.
mejor referencia que pude encontrar de forma rápida: http://reference.sitepoint.com/css/vendorspecific
ahí que los editores, no dude en reemplazar este enlace si hay una mejor referencia
Esa es una muy buena solución, ¡gracias por compartir! – jackJoe
Tenga en cuenta que esto fue copiado/pegado de la fuente HTML5Boilerplate, no estoy seguro de por qué '' se usa para buscar navegadores que no sean IE ... Vale la pena investigar, no soy del todo familiarizado con los pormenores de los comentarios condicionales de IE. –
De todos modos, este es un método tan simple e inteligente;) – jackJoe
, no lo es, Usted puede probar estos
Para IE 7 & 8:
width: 600px\9;
Para IE10:
width:300px\0/;
Para todos los navegadores:
width: 600px;
Pero si quieres que en los tres navegadores separado IE, GC, FF y luego utilizar de esta manera
width:300px; width: 600px\9; width:300px\0/;
Creo que esto es lo que estaba buscando ¡para!
¿De dónde sacaste ese ejemplo? –
Visite http://www.conditional-css.com/advanced –
@BalaR: ¡Interesante! Nunca he oído hablar de esto. Debe señalarse en la pregunta para atraer las respuestas adecuadas. –