CSS específico II (detectando el browser)

A propósito de lo tratado en el post anterior (CSS específico, lidiando con los browsers), adjunto una utilidad JavaScript para agregarle las clases correspondientes al browser del cliente.

El código original esta tomado de la librería ExtJS de Sencha, más específicamente del archivo ext-all-debug.js.

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 *
 * Modified by Valentin Starck
 * valentin.starck@gmail.com
 * http://blog.aijoona.com
 */
(function() {
	var
		t = {},
		ua = navigator.userAgent.toLowerCase(),
		DOC = document,
		docMode = DOC.documentMode,
		cls = "";

	function check(r) {
		return r.test(ua);
	}

	t.strict = DOC.compatMode == "CSS1Compat";
	t.opera = check(/opera/);
	t.chrome = check(/\bchrome\b/);
	t.webkit = check(/webkit/);
	t.safari = !t.chrome && check(/safari/);
	t.safari2 = t.safari && check(/applewebkit\/4/); // unique to safari 2
	t.safari3 = t.safari && check(/version\/3/);
	t.safari4 = t.safari && check(/version\/4/);
	t.ie = !t.opera && check(/msie/);
	t.ie7 = t.ie && (check(/msie 7/) || docMode == 7);
	t.ie8 = t.ie && (check(/msie 8/) && docMode != 7);
	t.ie6 = t.ie && !t.ie7 && !t.ie8;
	t.gecko = !t.webkit && check(/gecko/);
	t.gecko2 = t.gecko && check(/rv:1\.8/);
	t.gecko3 = t.gecko && check(/rv:1\.9/);
	t.borderbox = t.ie && !t.strict;
	t.windows = check(/windows|win32/);
	t.mac = check(/macintosh|mac os x/);
	t.air = check(/adobeair/);
	t.linux = check(/linux/);

	for(var p in t) {
		if(t.hasOwnProperty(p) && t[p]) {
			cls +=" "+p;
		}
	}

	try {
		document.getElementsByTagName("body")[0].className += cls;
	} catch(e) {}

	return t;
})();

Ya con solo incluirlo, el script adjunta al body la definición del browser como clases:

Browser sniffingActualización

Del blog de aNieto2K, rescato el link a una librería que hace lo propuesto en esta entrada de manera más completa: CssUserAgent.



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>