Logbook 13wk27

Number 200
Number 200

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 13wk25

De eerlijke brommer
🙂 De Eerlijke Brommer

Logbook 13wk22

Portada
Messer Chups

Logbook 13wk21

Het braamboos seizoen is geopend!
Eindelijk!!! Het braamboos seizoen voor 2013 is visueel geopend!

Logbook 13wk19

Hoe krijg je dat voor elkaar!?!
Hoe krijg je dat voor elkaar!?!

Logbook 13wk16

Gebruikers tip: luisteren naar The Exploited geeft de perfecte klus balans met de kanten-schuurmachine
Gebruikers tip: luisteren naar The Exploited geeft de perfecte klus balans met de kanten-schuurmachine

Logbook 13wk14

Vandaag twee relaxte oude
Vandaag twee relaxte oude

Logbook 13wk13

Now I'm ready to rock & code #mac
Now I’m ready to rock & code #mac

Logbook 13wk11

Alles in orde... en...
Alles in orde… en…