Know which media query is active

Screen Shot 2013-06-28 at 11.15.02This tip from Alex Morris is really handy while working on css.

When you’re designing or testing a complicated responsive site in a browser, you often find yourself wondering which media query is currently active – or whether it’s firing at all. My usual debug technique in scenarios like this is to flip the background colour inside each breakpoint. However, that’s not all that informative, so I threw this little snippet together using the CSS ‘content’ property and the ‘after’ pseudo selector. Just slot it into the top of each media query and give each one a unique description – either the breakpoint width/range it relates to, or whatever makes most sense for your needs. It’s quick, lightweight and doesn’t require any scripting. You can use the same technique for other scenarios like annotating a design for a client or even displaying user messages.

1
2
3
4
5
6
7
8
9
10
11
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body:after {
		content: "from 768 up to 1024"; /* the label to identify this MQ */
		position: absolute;
		bottom: 0;
		right: 0;
		background: #333;
		color: #fff;
		padding: 10px;
	}
}

Demo: http://codepen.io/alexmorris/full/tcnhA

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.