Título: Condicionales para Internet explorer dentro de hojas de estilo Publicado por: WHK en 24 Enero 2012, 20:31 pm Estaba buscando si existian algunas condicionales similares al <!--[IF IE]> pero dentro de las hojas de estilo y encontré muchas pero todos son hacks, no pude encontrar nada que lo haga "a la buena".
Algunos de los que encontré son estos y ya los he probado y funcionan super bién, el problema es que no pasan los validadores como W3C. Ojala les sirvan. http://www.maestrosdelweb.com/editorial/hacks-en-css-que-te-evitaran-dolores-de-cabeza-en-internet-explorer/ En los comentarios también salen otras formas. Saludos. Estos fueron creados por Microsoft para su navegador y sólo son soportados por éste. Como comienzan con <!-- cualquier otro navegador asumirá que es un comentario y no ejecutará el código que hay dentro. Este tipo de condicional se sitúa entre las etiquetas <head> y </head>. Utilizándolo podremos detectar la versión del navegador y cargar el archivo CSS necesario. Código: <!--[if CONDICION]> Código HTML <![endif]–> En la condición podremos utilizar cualquiera de las que siguen. Pudiendo sustituir X por las versiones de Internet Explorer disponibles hasta el momento (5,5.5,6 o 7). Código: IE A continuación mostramos un ejemplo del uso de este condicional: Código: <!-- (…) --> El hack del guión bajo Para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo que no existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Esto es algo que podemos utilizar para definir propiedades en los estilos, destinadas sólo a este navegador. Código: #textbox{ Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje de funcionar en las próximas. Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejando establecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente. Código: body { En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox, negro para Internet Explorer 7 y gris para IE 6. El uso de !important Este operador es utilizado en los archivos CSS para que los navegadores respeten la importancia de la propiedad que lo contenga y evite que se sobrescriba con otras que se definan posteriormente. Internet Explorer 6 y las versiones anteriores no interpretan este operador; problema que fue solucionado en la versión 7 de este navegador. Código: p { En el ejemplo anterior el fondo de la página se mostrará rojo para IE 6, mientras que para Internet Explorer 7 y el resto de los navegadores se verá verde. Sin hacks en nuestros CSS El desarrollador Dean Edwards pone a disposición de todos, bajo licencia GNU LGPL, la librería javascript IE7, para hacer que Internet Explorer (Navegadores Microsoft IE) se comporten como un navegador que sigue los estándares. Además hace que los PNG transparentes funcionen correctamente en las versiones 5 y 6 del navegador y soluciona diversos problemas relacionados a la interpretación del CSS. Para utilizar esta librería debemos descargarla de Google Code y seguidamente agregar estas líneas entre las etiquetas : Código: <!--[if lt IE 7]> Con este código cargamos el script chequeando que el navegador sea Internet Explorer, utilizando para esto el condicional del que hablábamos al inicio. para que podamos tener los hacks sin perder de vista los estandares, podemos utilizar los siguientes hacks: Código: .class { Título: Re: Condicionales para Internet explorer dentro de hojas de estilo Publicado por: flacc en 26 Enero 2012, 06:31 am nunca se me había ocurido buscar sobre eso, muy útil la info, se agradece...saludos
|