On mobile we want to load styles conditionally based on resolution without resorting to JavaScript. To do this we will need to add ResourceLoader support for the following:
<link href="load.php?modules=foo" rel="stylesheet" media="all and (max-width: 1024px)">
See also:
The ability to restrict stylesheets of a module to a specific media type and/or media query already exists by declaring that media attribute in the module definition.
That works fine has been used by the Vector for a long time now.
The only drawback is that it does not instruct the browser to conditionally download it. So while functionally fine, it does have a performance overhead.
Making it surface in the HTML, however, is not feasible in the current model. All module loading is cached in the page HTML. Details about the module such as these would end up hardcoded in the module. Thus creating a detachment between the media query (which is hardcoded and cached for 30 days) and the actual stylesheet content (which can be globally updated within 5 minutes of deployment). Splitting up a stylesheet or adding a new one would create inconsistent state and break existing pages.
On the other hand, using the existing media attributes for this means you're encouraged to re-use styles as much as possible and not create a separate http request for the few rules where things differ. Those can be included in the same module and allow flexible resizing and device orientation changes without needing to a flash of unstyled while the extra stylesheet is fetched.
Browser download it unconditionally. And they have to in order to provide a continuous experience when states change (e.g. device orientation or window size) - instead of one stylesheet no longer applying and in the middle of a render update being blocked on a network fetch and major style recalculation. As such, browsers don't actually do that.
My previous statement claiming otherwise was an incorrect assumption. As mentioned, media queries work as expected.