bureau

It means “desk” or “work table” in french : how metaphoric for a blog discussing what my work's about. Get the RSS feed.

i

I'm Thibaut Sailly, an independant interface designer based in Paris. Say hello on twitter or by email at bonjour ✉ tsailly ◦ net.

Topics

Archives

© 2010-2014 Thibaut Sailly · Powered by Movable Type · RSS

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.

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.

Posted in
« past present »