Me di cuenta de que la consulta de medios de JavaScript parece tener efecto después de las equivalentes de CSS.
He creado dos ejemplos que demuestran de lo que estoy hablando:
HTML:
<div class="foo"> bar </div>CSS:
.foo { background-color: orange; } @media(max-width: 300px) { .foo { background-color: blue; transform: translateY(100px); transition: all 300ms ease-out; } }El enlace jsbin es: aquí
Aquí ocurre la transición, cuando el ancho de la pantalla se convierte en 300 px o menos desde algo más grande.
Pero cuando se crea un diseño receptivo, esa transición puede ser molesta. Estoy tratando de deshacerme de ellos. El siguiente Javascript y CSS resuelve el problema, pero no estoy seguro de si es confiable o no.
HTML
<div class="foo"> bar </div> <button>toggle translateY to 200px</button>CSS
.transition { transition: all 300ms ease-out; } .foo { background-color: orange; } @media(max-width: 300px) { .foo { background-color: blue; transform: translateY(100px); } } .translateY { transform: translateY(200px); }JavaScript:
const w = window.matchMedia("(max-width: 300px)"); const div = document.querySelector(".foo"); const button = document.querySelector('button'); function fun(e) { if (e.matches) { div.classList.add('transition'); } else { div.classList.remove('transition'); } } // for initial screen width change detection fun(w); w.addEventListener('change', fun); button.onclick = function() { div.classList.toggle('translateY'); }El enlace jsbin está aquí
Aquí parece que sucede lo siguiente en orden cuando el ancho de la pantalla se convierte en 300 px o menos de algo más grande:
transform: translateY(100px) se procesa en un instante.transition a div . Al hacer clic en el botón, se asegura de que la clase de transition esté funcionando.
Este ejemplo no provoca ninguna transición no deseada ya que el tamaño de la pantalla se convierte en 300 px o menos desde algo más grande.
Entonces parece que cualquier consulta de medios CSS se procesa antes que las consultas de medios equivalentes de JavaScript. Creo que es algo bueno. Pero no estoy seguro, ¿es el comportamiento estándar bien respaldado? ¿Es seguro construir una lógica basada en este comportamiento?
Esto es parte de la especificidad de CSS.
Los estilos en línea agregados a un elemento ( p. ej.,
style="font-weight: bold;") siempre sobrescriben cualquier estilo en las hojas de estilo externas y, por lo tanto, se puede considerar que tienen la mayor especificidad .
El código javascript que publicó agregará estilos en línea ( a través de la propiedad de style del elemento ) y, por lo tanto, tiene la mayor especificidad. ( no tiene nada que ver con la consulta de medios js, solo tiene que ver con cómo aplica el estilo en el JS al elemento )
Actualización después de los comentarios/actualización en cuestión
Nuevamente, depende de cuándo cargue el CSS y el JS. Si primero incluye el archivo CSS, dado que es un recurso de bloqueo de procesamiento, se aplicará primero.
Sin embargo, no estoy seguro, ¿por qué no aplica todas las reglas a través de consultas de medios CSS?
const div = document.querySelector(".foo"); const button = document.querySelector('button'); button.onclick = function() { div.classList.toggle('translateY'); } .foo { background-color: orange; } @media(max-width: 300px) { .foo { background-color: blue; transform: translateY(100px); transition: all 300ms ease-out; } } .translateY { transform: translateY(200px); } <div class="foo"> bar </div> <button>toggle translateY to 200px</button>