Logbook 13wk28

De luier-motor van mijn SBS collega's!
De luier-motor van mijn SBS collega’s!

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

Logbook 13wk22

Portada
Messer Chups

Logbook 13wk09

Ready... Set... Sand...
Ready… Set… Sand!
Schuren voordat de grondverf erop kan.

Logbook 13wk08

Rolling sushi's @ onze buren