Performance: Many CSS files for media queries vs 1 big CSS file with queries inside?
I am wondering what is better for performance. If I have media queries defined like this:
Now let's say my browser width is 600. Does the browser load EVERY css file in advance, or does it only load the almost_mobile.css, and when I minimize below 630px, it will then load mobile.css?
<link rel='stylesheet' media='screen and (min-width: 150px) and (max-width: 630px)' href='mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 631px) and (max-width: 768px)' href='almost_mobile.css' />
If it loads all files at once on page load, then it would probably be smarter to include all the CSS in one big file (http requests) and configure the media queries inside of this CSS file, right?