Imagine if all media types are consolidated into a single CSS file, like the example below:
Here is the content of style.css
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
@media print {
/* Style adjustments for Print go here */
}
When I open the file on a device with a min-width: 768px, will the browser download only the CSS related to
@media only screen and (min-width: 480px)@media print?
Or will it download the entire CSS file regardless, even if certain styles are not needed for that specific device? For instance, devices that have a maximum width of 480px in both orientations will never require the CSS meant for larger devices; would this be inefficient even if the CSS is cached?
Is it more efficient for performance to use separate CSS files for each media type?
What would optimize performance better: reducing HTTP requests or serving only the necessary code for each device?