Condicionales CSS para todos los navegadores

Como sabras, si alguna vez te has puesto a diseñar tu web sobre un navegador, en el 99% de los casos, cuando has terminado, te sientes muy orgulloso y la abres en otro, siempre hay alguna cosa que falla, un pixel que se va de su sitio, algo que esta fuera de sitio, eso que no tenía que flotar en esa dirección… pues si quieres dar con una solución para ello, este artículo te interesa.

El solucionar estos problemas es muy sencillo con estas lineas de código que os voy a dejar.

Vamos a empezar con el mayor generador de problemas del mercado, ese no es otro que Internet Explorer, con estas lineas podréis detectar la version del navegador que es, y redirigirlo a la pagina de correspondiente.

[if IE] // Si el explorador es Intener Explorer (cualquier versión)

[if IE 7] // El valor de la versión IE (En este caso, el 7)

[if !IE] // El valor NOT, invierte el significado de la expresión.

[if lt IE 7] // Menor que

[if lte IE 6] // Menor o igual que

[if gt IE 6] // Mayor que

[if gte IE 7] // Mayor o igual que

[if !(IE 7)] // Invierte el significado de la expresión entre parentesis.

[if (gt IE 5)&(lt IE 7)] // Operador lógico AND

[if (IE 6)|(IE 7)] // Operador lógico OR

Aquí un pequeño ejemplo de su uso.

<!--[if lte IE 8]>
     	<link rel="stylesheet" href="ie8.css" type="text/css" />
 <![endif]-->

A parte de estos, existen otros que no van en las paginas , … de nuestra web, si no que van directamente sobre el codigo CSS, para hacer pequeños cambios y ajustes. Os los dejo a continuación.

Para detectar Firefox.

@-moz-document url-prefix()
 {
   #div { display: block; }
 }

Para los navegadores con motor webkit, como son Safari y Chrome.

@media screen and (-webkit-min-device-pixel-ratio:0)
 {
   #div { display: block; }
 }

Para el navegador Opera.

@media all and (-webkit-min-device-pixel-ratio:10000),
 not all and (-webkit-min-device-pixel-ratio:0)
 {
   #opera { display: block; }
 }

Esto es todo en lo que a web estamos hablando, pero en próximos artículos os pondré los condicionales para detectar teléfonos móviles, iPhone, iPad, etc.

Aquí os dejo la fuente de donde he sacado este magnífico artículo para que vosotros lo podáis disfrutar.

Etiquetas: , , , ,

Estudiante de Ingeniería Informática. Tecnico Superior en Desarrollo de Aplicaciones Informáticas. Creador de elCSS.com | Web Oficial DiegoBerges.com

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.