document.ready & window.onload vs CSS Media Queries

Question

While doing research on CSS and JS codes that run before the user sees the content, something was stuck to my mind. When exactly were CSS media queries were running? Which js and jquery function run first (document.onload, document.ready etc.)? When I did research on it I found This and This questions which explain the difference between domcontentloaded, document.ready and window.onload functions. However, I could not figure out when exactly media queries in CSS run compared to these functions. So I checked it through JSFiddle in here.

In HTML part I only wrote a div with and ID;

<div id="testDiv">
  Test Media Queries And JS Functions
</div>

In CSS there was only 1 media query that ran;

@media screen and (min-width:1px){
  #testDiv{
    color: black;
  }
}

And in JS part, there was different load functions

$('document').ready(function() {
  document.getElementById("testDiv").style.color = "blue";
});

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("testDiv").style.color = "red";
});

window.onload = function() {
  document.getElementById("testDiv").style.color = "yellow";
};

The CSS code and its effects were visible for a brief moment. And than the div was turning to blue when I ran the code. However, I encountered a strange problem. Only in Google Chrome New Tab (Not Incognito), the code ran as yellow which means window.onload was running last and in all other browsers and tabs shows the div as blue.

Google Chrome Not Incognito Tab

Google Chrome Incognito Tab and Safari New Tab

First of all is this some kind of bug that I encountered or somehow is it intended to run like this?

Second of all, I could not find any documentation on when exactly media queries run compared to these functions.

If anyone has a link for documentation on CSS queries and their exact execution time, I would really appreciate it.

My computer is Macbook Pro 2020 13.3 with Intel Chip and I checked it in Google Chrome 3 application. A little side note. — Ahmet Umut Alkan, Nov 10 '21 at 08:34

score 5 · Accepted Answer · answered Nov 10 '21 at 11:46

Second Answer First

From Here You already familiar that if you use Javascript (that is not async or defer) then the DOM creation will wait for the JS to load. Since JS also modifies CSS, so JS will wait for the CSSOM to load, and in this way you got the answer that media queries runs earlier.

Now First one

Basically

The DOMContentLoaded event is fired when the DOM is created.

The jQuery $(document).ready() event is fired when the DOM is ready.

The load event is fired when the DOM, CSSOM and all other resources are loaded (jQuery library is one of them).

In this case

First DOM creation will wait for the JS to load when it is loaded then DOM is created, and DOMContentLoaded event fires at first place so color:red overrides color:black applied by media query.

Now load event is fired at second place because JS is already loaded and DOM and CSSOM is also loaded so color:yellow overrides color:red,

And document.ready event is fired at third place when DOM is ready so color:blue overrides color:yellow. and you see color blue.

Important

If you add an image just like Here then you'll see that

First DOM creation will wait for the JS to load when it is loaded then DOM is created, and DOMContentLoaded event fires at first place so color:red overrides color:black applied by media query.

Now document.ready event is fired at Second place when DOM is ready so color:blue overrides color:red.

And load event is fired at Third place because image is not loaded when DOM was ready and so color:yellow overrides color:blue after image is loaded,

document.ready & window.onload vs CSS Media Queries

1 Answers1