Debugging media queries
When developing CSS style sheets called with media queries, you will be more comfortable if you can identify two things at a glance: what's the queried context you're in, and how a given element is behaving with the properties you've been editing.
Let's say you have 4 contexts to work with: S, M, L and XL for example. While you choose the break points trigering calls to these contexts's style sheets, it's handy to vizualize in the browser when the switch is happening. Johann Brook's method is very clever as it uses the :before selector to generate a block above your page; targeted widths are displayed in plain text when you access the different contexts. While clever, displaying a large block above the layout can prevent you from fine tuning another element just below it. Also, do you really need to be reminded of the display sizes when you are the one editing them in the markup? Adding a background color to the body or any other relevant element proved to be as useful and less obstructive.
Adding a background-color to any element I wished to style has worked very well for some years now, and a little variation makes it useful to both track one element and display the queried context: pick one colour for each context and use shades of it for the different elements you need to visualize. 0to255.com by @jamesmadson makes it really easy.
Here is a fictionnal webpage presented in the stages you could go through using both of these methods.
- One – markup styled with common properties and background color applied to the body.
- Two – background colors applied to the elements you wish to track while you build your contexts style sheets.
- Three – context style sheets built.
- Four – final result with contexts displayed, for presentation purposes.
- Five – final result.
Johann's idea is very helpful when you need to collaborate and display the break points you choose. I'd reduce the footprint of the generated content though: less text along with an opacity brought to 0.5. Also, having the position set to fixed allows you to keep the context displayed if you have to scroll down.
body:before{
content: "M";
padding: 0.5em;
display: block;
text-align: center;
background: yellow;
opacity: 0.5;
position: fixed;
top: 5em;
left: 5em;
z-index: 99;
}While we're at it, if you're using CSS Edit (and you should anyway), don't forget that you can merge your media queries style sheets as tabs in one window, and have your common styles opened in another window beside it. I'm only suggesting it because while I was working on Bureau's CSS, I played a lot with Exposé instead and felt stupid when I realized last week I could have used tabs.
If you'd like to comment or share some tricks you use when building media queried pages, link them to me via @thibautsailly and I'll add them here.
Desktop image by Hector Simpson.