Adaptive Web Design - Working With @ import and @ media

By: Daniel Imbellino
Updated: Feb 28, 2013

There seems to be some confusion as to what is the most practical way of implementing media queries in web design practices today. The biggest argument stems with whether or not to use the link tag or the @import when specifying styles for your webpage’s. The thought is that @import declarations don’t download in parallel when they’re parsed by most browsers, so the link tag should be used instead. Actually, the real problem stems from web designers who don’t fully understand the various concepts that can be used to implement media queries altogether.

The thought is, webpage’s today need to be able to adapt to a multitude of various LCD resolutions including mobile devices. Here’s an example of a set of media queries being implemented by use of the @import declaration. Here you can see the issue that this presents if browsers are unable to process the declarations in parallel, causing the page processing speed to lag significantly:

<style type=”text/css”>
@import url(“stylesheet-one.css”) screen and (width: 1024px) and (height: 768px);
@import url(“stylesheet-two.css”) screen and (width: 1366px) and (height: 768px);
@import url (“stylesheet-three.css”) screen and (width: 1440px) and (height: 1024px);
</style>

The problem here is, implementing media queries in this fashion is going to create a million external CSS files, one for each exact or varied resolution specified. This isn’t very intuitive since we will essentially end up with a ton of @import tags that all must be parsed by the browsers preprocessor in order to effectively fetch the style sheets and load the given page.

So what’s the solution here? Well we could use the link tag to create a set of conditional requirements that must be met, being implemented much the same way as our standard @media declarations are, like so:

<link rel=”stylesheet” media=”screen and (device-width: 1024px)” href=”external-style-sheet.css” />

We could continue this trend much the same way as with using the @import declaration. However this also does not address the issue having to have the browser pre-fetch a ton of external style sheets, even if they do download in parallel. Also, just as before, you would have to edit every single style sheet just to make a simple change to your sites design and formatting.

The logical answer to this problem would be to implement an external style sheet using the @import directive, and setting all the styles in the external document using @media, like so:

<style type=”text/css”>
@import url(“your-external-stylesheet.css”);
</style>

Then create your external style sheet using @media to create the conditional statements that need to be met when parsing your webpage’s, like so:

@media screen and (width: 1024px) and (height: 768px) {
Styles go here!
}
@media screen and (width: 1280px) and (height: 768px) {
Styles Go Here!
}
@media screen and (width: 1366px) and (height: 768px) {
Styles Again Go Here!
}

Simply save your external style sheet with the corresponding name you’ve chosen along with the “.CSS” file extension, and you are done!

Now browsers will only have to fetch one external style sheet that effectively contains all the media query declaration required to parse the page for any set of resolutions, devices, aspects rations, etc, that you specified when creating your style sheet. Now it will be much simpler to edit your CSS styles since they are in one place, and your pages will download much faster! There’s also no need to worry about whether or not a particular browser can download your @import declarations in parallel, since you only have declared it once in your documents.