Browser statistics using only CSS

browser-stats-1.css

/* ORIENTATION */
@media (orientation: landscape) {
	.stat__orientation:after { 
		content: "Landscape"
	}
}
@media (orientation: portrait) {
	.stat__orientation:after { 
		content: "Portrait"; 
	}
}

browser-stats-2.css

/* WIDTH */
$width: 2000;

@for $i from 500 through $width {
	@media (min-width: #{$i}px) {
		.stat__size-width:after {
			content: "#{$i}px";
			}
	}
}

@media (min-width: 2001px) {
	.stat__size-width:after {
		content: "Greater than 2000px"; 
	} 
}

@media (max-width: 499px) {
	.stat__size-width:after {
		content: "Less than 500px"; 
	} 
}

browser-stats.html

<div class="container">
	<p class="stat__size-width">Size (Width): </p>
	<p class="stat__size-height">Size (Height): </p>
	<p class="stat__orientation">Orientation: </p>
	<p class="stat__medium">Medium: </p>
	<p class="stat__colour">Colour: </p>
	<p class="stat__resolution">Resolution: </p>
</div>