As most sites are using big CSS frameworks the amount of CSS downloaded is increasing. Secondly as phone resolutions (and fixed media pixel density is also increasing) are increasing, old screen detection methods will fail. It is convienant to be able to split the CSS blobs, so a mobile doesn't download desktop or tablet CSS. Alternatively if you have no care about download volumes, this can also be used to have a mobile brand pack separate to a tablet brand pack or a big-screen brand pack.
I'm writing this as I have been using webpack to manage CSS namespacing too much recently.


Please note that using media rules to change which CSS is active is abit over-engineered; as a better system is to use a flex-grid, as described 1. For any type of fluid design, this is likely to be better. I frequently achieve this using Foundation CSS (other CSS frameworks should also work). For changes that change content, media queries are still needed.
For supporting browsers, just using CSS 2, I could download an extra CSS file after I have detected the current screen size and orientation in CSS. Probably; the first batch of CSS is statically present in the HTML file, so there is less iteration on parse more -> download more; so the delay time to first user interaction is reduced (discussed here 3, but avoiding download queues is important for page render speed). Things that aren't likely to change often like “prefers-reduce-data” or “dynamic-range” Feature support is good 4. This approach is managed using media queries. For CSS to manage the users chosen means of access (mouse, keyboard, haptic etc), media (hover:hover) and related items 5 seems smart 6 7. Support for this last item is quite good 8. Note that getting this correct is abit tricky, if you support a wide number of devices 9.
If your only need is to detect device type (i.e. screen, print), or static properties of the webpage, attributes on link declaration is allowed 10 11. Feature support is very common 12. This version probably has shorter loading time. As noted 13, if you have any business need to support browsers released before 2008, @import will isolate them.
Most of this can also be managed via JS as an alternative. Pretty much all desktop browsers support window.mediaMatch 14 15 which allows JS to run media selectors. It is widely supported according to 16.

Some similar articles in research

Some similar articles in images