Instantly share code, notes, and snippets.

Embed
What would you like to do?
Browser statistics using only CSS
/* ORIENTATION */
@media (orientation: landscape) {
.stat__orientation:after {
content: "Landscape"
}
}
@media (orientation: portrait) {
.stat__orientation:after {
content: "Portrait";
}
}
/* 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";
}
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment