Imagine having this scenario
/*
css for elements section #1 in page
css for elements section #2 in page
*/
@media screen and (max-width: 960px) {
/* redefines/alters CSS for elements in section #1 in page */
}
@media screen and (max-width: 700px) {
/* redefines/alters CSS for elements in section #2 in page */
}
I've encountered conflicting information regarding the priority of media queries. Some sources claim only one media query is matched at a time, while others suggest that cascading may occur depending on window size.
In my personal tests, I noticed that when resizing the browser window, @media screen and (max-width: 960px) seems to take precedence initially. Subsequently, as the window size decreases further, the styles from @media screen and (max-width: 700px) are applied without overriding the previous ones.
This raised the question for me - is this behavior purely coincidental and against standard specifications? Or am I overlooking something fundamental?