How to Keep CSS Media Queries Maintainable
01 December 2012
Internet Explorer, before version nine, did not cope with media queries, however, there is no need to duplicate your CSS stylesheets. If you need a good tip on how best to deal with Internet Explorer when it comes to CSS media queries - in the context of maintenance - then this short article will help.
CSS - the Need for Good Maintenance
Most of us know that if we get the ground work right during the development stage of a project the maintenance will be noticeably easier - not just with CSS. In fact small changes that should take five minutes can take hours on a project that either rushed or skipped the groundwork stage.
The Problem
When the project includes the use of media queries as the mechanism for enabling responsive layouts - it can be tempting to duplicate everything minus the media queries for the older versions of Internet Explorer. That is fine but this approach forks the stylesheets. Once it is time to make changes to the styles, it becomes difficult to guarantee synchronisation across the fork.
The other issue is: you are sending out a duplication set of CSS rules to Internet Explorer. That makes for an extra volume of bandwidth being used that can and should be avoided.
The Solution
First, spilt the CSS styles into two files - this may seem counter intuitive as this does create an extra hit to the server but in the context of maintenance I believe it is worth it. With proper caching, the second hit only happens once.
Once split, name the staylsheets something like: reset-generic-queries.css and large.css. You may see where I am going with this!
In the first stylesheet put your CSS resets, followed by your generic CSS rules such as the projects typography, and then your media query groups.
Finally, without any media queries put your large screen style rules in the stylesheet named 'large'.
You should have two CSS files structured something like this:
/* resets */
/* typography */
/* elements */
/* helpers */
/* small screen */
@media all and (max-width: 480px){
}
/* medium screen */
@media all and (min-width: 480px) and (max-width: 940px) {
}
For the 'reset-generic-queries.css' file; and
/* large screen */
For the 'large.css' file.
Once you have your CSS across two stylesheets, in a similar manner you can establish zero duplication in your styles without difficulty. The magic, now, of zero duplication is in how you link the stylesheets to the main document.
<link media="all" type="text/css" rel="stylesheet" href="reset-generic-queries.css" /> <link media="all and (min-width: 940px)" type="text/css" rel="stylesheet" href=" large.css " /> <!--[if lt IE 9]> <link media="all" rel="stylesheet" type="text/css" href=" large.css" /> <![endif]-->
As you can see, the first stylesheet labled 'reset-generic-queries' is linked as normal. The second stylesheet uses an in-line media query so that it is used only by screens large enough, in combination with an 'IF IE' for Internet Explorer support.
Internet Explorer (older IE) will not see the embedded media queries in the first stylesheet but will see your resets CSS rules and your generic CSS rules as they are not wrapped in a query. Internet Explorer will not download the stylesheet linked with an in-line media query but will download the same stylesheet using its own 'IF IE' query - therefore Internet Explorer renders all of the CSS that is meant for a large screen.
All the other browsers (and new IE) will read your resets CSS rules, your generic CSS rules, and the rules most appropriate to the screen size currently displaying your responsive layouts.
Conclusion
When using CSS media queries, you can cut out the need for duplication in your CSS. There is no need to duplicate CSS just to make Internet Explore continue to work with your otherwise responsive layouts. All you need to do is be clever in how you organise your styles and link your styles to the main document. This short article has outlined an approach to do this so that zero duplication can be achieved with media queries and this will make your CSS more maintainable in the long term.
Video Supplement
Read : How to Keep CSS Media Queries Maintainable
