2012-04-20 31 views
16

La etiqueta HTML <blink>, en los navegadores que lo admiten (es decir, Mozilla Firefox y Opera), hace que su contenido parpadee, pareciendo el efecto de una luz estroboscópica lenta.¿Cómo puedo detectar si un navegador admite la etiqueta de parpadeo?

Estoy escribiendo un conjunto de polyfills para HTML no estándar, incluida la etiqueta blink. La implementación de parpadear comportamiento es bastante simple

(function blink(n) { 
    var blinks = document.getElementsByTagName("blink"), 
     visibility = n % 2 === 0 ? "visible" : "hidden"; 
    for (var i = 0; i < blinks.length; i++) { 
     blinks[i].style.visibility = visibility; 
    } 
    setTimeout(function() { 
     blink(n + 1); 
    }, 500); 
})(0); 

(Puede see this in action)

Pero esto no detecta si el navegador ya es compatible con la etiqueta blink, y en los navegadores que son compatibles con ella, habrá una efecto de doble parpadeo. Necesito alguna detección de características que determine si el navegador admite el parpadeo, y si no lo hace, volverá a caer en mi polyfill de Javascript.

No quiero hacer la detección del navegador, porque esa solución no es escalable, y como las personas pueden desactivar el comportamiento blink en sus preferencias de Firefox, esa solución no es efectiva.

¿Hay alguna manera de detectar el soporte para el elemento blink?

+2

Buena pregunta, sin embargo, no creo que alguien haya utilizado ese elemento. [El propio wiki de W3] (http://www.w3.org/wiki/HTML/Elements/blink) dice 'No, realmente, no lo use. Es simplemente malvado. ¿Puedo preguntar para qué quieres usarlo? –

+0

@PeterOlson entiendo totalmente ... eliminar mi comentario después de volver a leer su pregunta :-) – ManseUK

+5

Usted podría simplemente anular el comportamiento de todos modos, y reemplazar el elemento con span, manteniendo el mismo contenido. –

Respuesta

7

que acabo de hacer un poco de investigación en la materia y creo puedo encontrado una respuesta ...

estoy seguro de que está consciente de la detección de la característica de propiedades de CSS? Bueno, hay una propiedad CSS text-decoration: blink. Por lo tanto, si el navegador es compatible con <blink>, también debe ser compatible con la propiedad CSS.

Esta propiedad es normal, es decir, CSS detección para detectar textDecoration se admite hacer esto:

if (document.createElement("detect").style.textDecoration === "") { 
    // textDecoration supported 
} 

Tal vez usted podría intentar algo como esto:

if (document.createElement("detect").style.textDecoration === "blink") { 
    // textDecoration: blink supported ? 
} 

oa lo largo de esas líneas ...

Actualización

Tengo 4 buscadores & tan probado esto con 4 navegadores. De esos 4 solo FireFox admite la etiqueta de parpadeo. <blink> está registrado en el documento HTML como un elemento "Span" en FF, pero en los otros 3 navegadores está registrado como un elemento unknown.

<html> 

<head> 
<script type="text/javascript"> 
function investigate() { 
    var blinker = document.getElementsByTagName("blink")[0]; 
    document.getElementById("monitor").innerHTML += blinker; 
} 
</script> 
</head> 

<body onload="investigate()"> 
<blink>Hello, blink!</blink> 
<div id="monitor"> </div> 
</body> 

</html> 

salida

Internet Explorer [7,8,9] no apoyaron

Hola, abrir y cerrar!
[objeto]

Chrome [18] no apoyaron

Hola, abrir y cerrar!
[HTMLUnknownElement objeto]

Safari [5] no soportado

Hola, abrir y cerrar!
[HTMLElement objeto]

FireFox [3,6] apoyaron

Hola, abrir y cerrar!
[objeto HTMLSpanElement]

+0

Es una buena idea, pero todos los navegadores admiten la propiedad 'textDecoration', el problema es que no todos reconocen' blink' como el valor de esa propiedad. Sin embargo, me ha dado algunas ideas para probar ... –

+0

@PeterOlson Agregué otra idea, también ... – Ozzy

+0

Opera también admite 'blink', pero emite' [object HTMLElement] '. El problema es que la función 'toString' para un objeto DOM es específica de la implementación. –

Cuestiones relacionadas