¿Cómo se determina el tipo de medio en Javascript?

StackOverflow https://stackoverflow.com/questions/494235

Pregunta

Miré a mi alrededor y todavía no vi esta pregunta.

¿Cuál es una forma confiable en Javascript de determinar el tipo de medio (p. ej., pantalla, impresión, dispositivo portátil) de la página? He visto referencias a document.styleSheets[0].media, pero no he tenido suerte usando esto, ya sea por problemas de soporte del navegador o porque no entiendo algo.

Pregunto porque quiero que JavaScript oculte algo en la vista de pantalla, pero no en la vista de impresión. No se puede confiar en los estilos dependientes de los medios para hacer esto porque estoy usando Prototype para ejecutar un interruptor de palanca para el elemento, y Prototype no permitirá que un elemento se cambie a visible si se declaró invisible (display: none ) con CSS * no en línea. Traté de establecer estilos en línea específicos del medio para el elemento (<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">), pero por lo que puedo decir, eso no es compatible.

Sé que puedo recorrer las hojas de estilo y verificar si una hoja de estilo vinculada específica de impresión está activa o no, pero actualmente estoy en una situación en la que varias declaraciones de estilo específicas de los medios se mezclan en una sola hoja de estilo vinculada, así que eso no es bueno. Y sí, puedo dividir las hojas de estilo en diferentes tipos de medios, pero primero me gustaría averiguar si puedo extraer el tipo de medios del DOM de manera confiable con Javascript, completamente independiente de CSS . Ah, y he intentado ese truco de & "; Ocultar un elemento para la vista de impresión, luego verifique si es visible con Javascript &"; pero eso siempre da como resultado (cuando cargo la vista previa de impresión) Javascript que detecta que los elementos supuestamente ocultos son visibles y realiza cualquier manipulación DOM que le diga, a pesar del hecho de que esos elementos no son visibles. Si alguien quisiera más detalles sobre lo que estoy hablando aquí, puedo elaborarlo en una edición.

* Esto es algo que no he entendido y que me irrita constantemente. Cualquiera que pueda darnos una idea al respecto recibe un gran voto de mi parte.

¿Fue útil?

Solución

  

[..], Prototype no permitirá que un elemento se cambie a visible si se declaró invisible (display: none) con CSS no en línea. Esto es algo que no he entendido y que me irrita constantemente. Cualquiera que pueda darnos una idea al respecto recibe un gran voto de mi parte.

Probablemente ya haya visto esto, pero la documentación para, p. show (hay otras funciones relacionadas con la misma nota) establece que:

  

Element.show no puede mostrar elementos ocultos a través de hojas de estilo CSS. Tenga en cuenta que esto no es una limitación de prototipo, sino una consecuencia de cómo funciona la propiedad CSS display.

Entonces, es un problema conocido y culpan a CSS. Sin embargo, considere el siguiente documento (no he usado Prototype antes, así que no estoy seguro si esta es la forma recomendada de esperar a que se cargue el DOM, pero parece funcionar): 

<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
  $("victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!

Como ya sabes, esto no funcionará. ¿Por qué? Bueno, ¿cómo podría saber Prototype qué & Quot; reset & Quot; la propiedad p#victim a cuando le dices p a block sí mismo? (En otras palabras: ¿cómo puede averiguar cuál debería haber sido el valor de element.style.display si '' no estaba presente en el conjunto de reglas con el selector style.) La respuesta es simple: no puede. (Piénselo por un segundo. ¿Qué pasaría si otro conjunto de reglas modificara el valor de element.style si style="display:none;" no estuviera presente en nuestro conjunto de reglas con el selector style=""? (Es decir, no podemos suponer que, por ejemplo, <= > siempre debe establecerse en <=>, otros conjuntos de reglas pueden haber cambiado ese valor). No podemos eliminar la propiedad <=> de un conjunto de reglas en una hoja de estilo, y no podemos eliminar toda la conexión entre el elemento y el conjunto de reglas porque puede contener otras propiedades, etc. (incluso si fuera posible sería, en mi opinión, no es obvio encontrar con qué conjunto de reglas para hacer esto). Por supuesto, podríamos ir sigue y sigue con esto, pero afaik no hay una solución conocida para este problema).

Entonces, ¿por qué funciona la alternativa en línea? Primero, veamos cómo se implementa <=>: 

show: function(element) {
  element = $(element);
  element.style.display = ''; // <-- the important line
  return element;
}

Afaict lo único importante que hace esta función es establecer <=> en una cadena vacía (<=>), que " elimina " <=> de <=>. ¡Excelente! Pero ¿qué significa eso? ¿Por qué querríamos eliminarlo? Primero tenemos que descubrir qué <=> representa y modifica realmente cuando modificamos sus valores.

La documentación de MDC para <=> establece que:

  

Devuelve un objeto que representa el atributo <=> del elemento.

Tenga en cuenta la última palabra: atributo . <=> & # 8800; el " calculado " estilo para el elemento, es solo una lista de las propiedades en el atributo <=> (vea MDC para una explicación más larga / mejor).

Considere el siguiente documento: 

<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
  $("victim").show();
});
</script>
<p id="victim" style="display:none;">Hello world!

<=> oculta <=> pero cuando el DOM termine de cargar Prototype lo cambiará a <=>, y el navegador volverá a calcular el valor de la propiedad <=> (el valor de la hoja de estilo predeterminada del navegador en este caso ).

Pero , considere el siguiente documento: 

<!doctype html>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("#victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!

jQuery maneja las hojas de estilo correctamente, ¡en este caso de todos modos! Esto no es tan simple de explicar como la solución Prototype y hay muchas capas de asombro que puedo leer en este momento, y hay muchos casos en los que jQuery no puede calcular el valor correcto para <=>. (Última nota rápida: Firebug ..., pero supongo que usa algunas cosas exclusivas de Firefox o algo así).

Otros consejos

EDITAR: Lo siento (Nota personal: RTFQ Rob, sheesh!). Se buscó en Google rápidamente esto arriba y un jquery plugin si eso sirve de algo. Básicamente está usando las reglas de @media pero no está en línea, por lo que puedo decir, por lo que el soporte de su navegador puede variar, pero creo que es lo mejor que puede esperar :(

Vea si esto funciona ... Creo que puede hacer esto para cada tipo y simplemente verifique si la declaración devuelve nulo o equivalente, luego aplique sus reglas.

Desde este sitio: http: //www.webdeveloper. com / forum / showthread.php? t = 82453

  

IE:

     

if (document.styleSheets[0].media == 'screen'){...}

     

FF / NS:

     

document.getElementsByTagName ('LINK')[0].getAttribute ('media')

     

o

     

document.styleSheets[0].media.mediaText

y un script para verificarlo en todos los navegadores (excepto algunos nuevos, así que tenga cuidado :))

http://student.agh.edu.pl/~marcinw / cssmedia /

¡este script funciona en una declaración if como un booleano verdadero / falso! ¡Espero que lo haga funcionar! 

document.getElementsByTagName('link').each(function( link )
{
  //do something with link.media
  //hide whatever you need to hide, etc
});

He probado mi script mencionado anteriormente; ahora funciona con todos los navegadores nuevos, incl. IE8 final.

El script se movió aquí: http://cssmedia.pemor.pl/ Siéntase libre de usarlo si solo lo desea.

Con saludos Marcin Wiazowski

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top