Share
¿No es divertido jugar con las últimas técnicas de CSS, como sombras y transiciones? Solo hay un problema: ¿cómo compensamos o, lo que es más importante, detectamos los navegadores que no los admiten? Bueno, hay algunas soluciones. En este tutorial y screencast, sin embargo, crearemos una función de JavaScript que aceptará un nombre de propiedad CSS como su parámetro y devolverá un booleano, indicando si el navegador soporta o no la propiedad pasada.
Suscríbete a nuestra página de YouTube para ver todos los videos tutoriales.!
Comencemos por determinar cómo queremos llamar a nuestro función. Vamos a mantener las cosas simples aquí; Algo como lo siguiente debería hacer el truco:
Accentsconagua
if (admite ('textShadow')) document.documentElement.className + = 'textShadow'; Esa debería ser la final función llamada. Cuando pasamos un nombre de propiedad CSS a la apoya () función, devolverá un booleano. Si cierto, adjuntaremos un nombre de la clase al documentElement, o . Esto nos proporcionará un nuevo nombre de 'clase' para enganchar, desde nuestra hoja de estilos.
A continuación, construiremos el apoya la función ().
var admite = (función () ) ();
Porque no estamos haciendo apoya igual a una función estándar? La respuesta es porque tenemos un poco de deberes trabajar para hacer primero, y no hay absolutamente ninguna razón para repetir esas tareas una y otra vez cada Una sola vez se llama a la función. En casos como este, es mejor hacer apoya igual a lo que se devuelve de la función auto-ejecutable.
Para probar si el navegador soporta o no propiedades específicas, necesitamos crear un elemento * dummy *, para probar. Este elemento generado nunca se insertará en el DOM; Piense en ello como un maniquí de prueba!
var div = document.createElement ('div'); Como probablemente sepas, hay un puñado de prefijos de proveedores que podemos usar cuando trabajamos con las propiedades de CSS3:
Nuestro JavaScript necesitará filtrar esos prefijos y probarlos. Por lo tanto, vamos a colocarlos en una formación; lo llamaremos, vendedores.
var div = document.createElement ('div'), vendors = 'Khtml Ms O Moz Webkit'.split ("); Utilizando la
división()función para crear unaformacióna partir de unacuerdaEs ciertamente perezoso, pero ahorra unos pocos segundos.!
Como vamos a filtrar a través de esto formación, Seamos buenos chicos y chicas, y cachéemos longitud del formación también.
var div = document.createElement ('div'), vendors = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; los deberes el trabajo, arriba, es estático, por naturaleza, y no necesita repetirse cada vez que llamamos apoya (). Por eso solo lo ejecutamos una vez, cuando se carga la página. Ahora vamos a regreso la función que en realidad será asignado a la apoya variable.
función de retorno (prop) ;
La belleza de
cierreses que, aunqueapoya ()es igual a la devueltafunción, todavía tiene acceso a ladiv,vendedores, ylenvariables.
La prueba inmediata: si la propiedad pasada está disponible para el dives estilo atributo, sabemos que el navegador soporta la propiedad; asi que volver verdadero.
return function (prop) if (prop en div.style) return true; ;
Piense, digamos, la sombra de texto Propiedad CSS3. La mayoría de los navegadores modernos lo admiten, sin la necesidad de un prefijo de proveedor. Con eso en mente, ¿por qué filtrar a través de todos los prefijos si no es necesario? Por eso colocamos esto. comprobar en la cima.
Es probable que estés acostumbrado a escribir nombres de propiedades de CSS3, así: -moz-box-shadow. Sin embargo, si, en Firebug, revisa el estilo objeto, encontrarás que está escrito, MozBoxShadow. Como tal, si probamos:
'mozboxShadow' en div.style // false
Falso Será devuelto. Este valor distingue entre mayúsculas y minúsculas.
Esto significa que, si el usuario pasa sombra de la caja al apoya () función, va a fallar Pensemos en el futuro y verifiquemos si la primera letra del argumento está en minúsculas. Si es así, arreglaremos el error para ellos..
return function (prop) if (prop en div.style) return true; prop = prop.replace (/ ^ [a-z] /, function (val) return val.toUpperCase ();); ;
Expresiones regulares al rescate! Arriba, estamos comprobando si hay una sola letra minúscula al principio de la cadena (^). Sólo con la condición de que se encuentre uno, utilizamos el toUpperCase () función para capitalizar la letra.
A continuación necesitamos filtrar a través de la vendedores array, y prueba si hay una coincidencia. Por ejemplo, si sombra de la caja se pasa, deberíamos probar si el estilo atributo de la div contiene cualquiera de los siguientes:
Si se encuentra una coincidencia, podemos volver verdadero, Porque el navegador, de hecho, proporciona soporte para sombras de cuadro!
return function (prop) if (prop en div.style) return true; prop = prop.replace (/ ^ [a-z] /, function (val) return val.toUpperCase ();); while (len--) if (vendors [len] + prop en div.style) return true; ;
Aunque podríamos usar un para declaración para filtrar a través de la formación, no hay necesidad real de hacerlo en este caso.
mientras Las declaraciones son más rápidas de escribir y requieren menos caracteres. No se confunda por vendedores [len] + prop; simplemente reemplaza esos nombres con sus valores de la vida real: MozBoxShadow.
Pero, ¿qué pasa si ninguno de esos valores coincide? En ese caso, el navegador no parece ser compatible con la propiedad, en cuyo caso deberíamos falso retorno.
while (len--) if (vendors [len] + prop en div.style) return true; falso retorno;
¡Eso debería hacerlo por nuestra función! Vamos a probarlo aplicando un nombre de la clase al html elemento, si el navegador soporta, digamos, el trazo de texto propiedad (que solo lo hace el webkit).
if (admite ('textStroke')) document.documentElement.className + = 'textStroke'; Con un clase nombre que podemos ahora gancho en, vamos a probarlo en nuestra hoja de estilo.
/ * fallback * / h1 color: negro; / * compatibilidad con texto-trazo * / .textStroke h1 color: blanco; -webkit-text-stroke: 2px negro;
var admite = (función () var div = document.createElement ('div'), vendors = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; return function (prop) if (prop in div.style) return true; prop = prop.replace (/ ^ [az] /, function (val) return val.toUpperCase ();); while (len--) if (vendors [len] + prop in div.style) // browser admite box-shadow. Haga lo que necesite. // O use una explosión (!) para comprobar si el navegador no lo hace. return true; return false;; (); if (admite ('textShadow')) document.documentElement.className + = 'textShadow'; Para obtener una solución más completa, consulte la biblioteca Modernizr.
