Debugging CSS Media Queries

gistfile1.txt

Debugging CSS Media Queries with CSS. Based on the idea by Johan Brook.
article: http://bit.ly/j3BWaw

body.debug::before { 
     content: "Tablet media query (media query) fired"; 
     font-weight: bold; 
     display: block; 
     text-align: center; 
     background: rgba(255,255,0, 0.9); 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     z-index: 99; 
} 

Apply the .debug class to the body element to activate and deactivate the bar.