CSS snippets

gistfile1.css

/* === Keep ratio of a container fixed === */
/* http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ */

.wrapper-with-intrinsic-ratio {
	position: relative;
	padding-bottom: 20%;
	height: 0;
}

.element-to-stretch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: teal;	
}

/* === Pass media query to javascript with invisible content === */
/* http://adactio.com/journal/5429/ */

@media all and (min-width: 45em) {
    body:after {
        content: 'widescreen';
        display: none;
    }
}

/* Then, in Javascript:
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
*/