post icon

Aplicar condicionalmente CSS al navegador / browser

La diferencia que existe hoy día entre un navegador y otro es mucho más estrecha que hace unos años atrás en donde era una odisea realmente diseñar para más de un navegador nuestros sitios web’s. Si bien es cierto que aun existe eso, es menos que antes, pero aún necesitamos aplicar algunas propiedades especificas para un navegador y otro.

La forma de hacerlo es muy sencilla, es condicionar con etiquetas preestablecidas que solo las interpreta cada navegador en particular.

Google Chrome (realmente todos los navegadores usen WEBKIT)

<style type="text/css">
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		#EstiloX
		{
			width:486px;
		}
	}
</style>

Mozilla Firefox

<style type="text/css">
	@-moz-document url-prefix() {
		#EstiloX {
			width: 486px;
		}
	}
</style>

Internet Explorer

<!--[if IE]>
	<style type='text/css'>
		#EstiloX
		{
			width:486px;
		}
	</style>
<![endif]-->

Nota: si se agrega un numero al costado de IE, determina solo para una version especifica Ej: [if IE 6], [if IE 8]

iPhone y WebKit Movil

<style type="text/css">
	@media screen and (max-device-width: 480px)
		#EstiloX
		{
			width:486px;
		}
	}
</style>

Nota: se puede determinar para el ancho maximo de la resolucion del movil

22 febrero 2014

Comentarios desde Facebook:

Sin Comentarios aun, puedes tú ser el primero en comentar!

Deja tu Comentario

Responder