Troubleshooting responsive layout with :after
Well, I wanted to see which of my CSS3 media queries were in effect. Here's a simple way to do it with the :before selector.
First, put some markup in your HTML near the top, like this (using jade template language.
body .content header p BUGBUG responsive layout max-width: h1 a(href="/") Peter Lyons
Then in your .styl stylesheet, use :after to tell which media query is active.
////////// Responsive layout ////////// @media screen and (max-width: 960px) header p &:after content "960" @media screen and (max-width: 720px) header p &:after content "720"
Now load that in your browser and resize the window. The CSS will change the text in the header telling you exactly which rules are firing. Nice!