1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-28 09:45:09 +00:00
serenity/Base/res/html/misc/media-queries.html

122 lines
3.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media queries</title>
<style>
.negative {
background-color: lime;
border: 1px solid black;
}
@media not all {
.negative {
background-color: red !important;
}
}
@media print {
.negative {
border: 5px solid magenta !important;
}
}
@media huh {
.negative {
color: yellow;
}
}
@media screen {
.screen {
background-color: lime;
border: 1px solid black;
}
}
@media only all and (min-width: 400px) {
.size-min {
background-color: lime;
border: 1px solid black;
}
}
@media (max-width: 1000px) {
.size-max {
background-color: lime;
border: 1px solid black;
}
}
@media (min-width: 400px) and (max-width: 1000px) {
.size-range {
background-color: lime;
border: 1px solid black;
}
}
@media (color) {
.color {
background-color: lime;
border: 1px solid black;
}
}
@media (not (not (color))) {
.color-2 {
background-color: lime;
border: 1px solid black;
}
}
@media (color) or ((color) and ((color) or (color) or (not (color)))) {
.deeply-nested {
background-color: lime;
border: 1px solid black;
}
}
</style>
</head>
<body>
<p id="interactive">
I don't know how wide the page is. <code>window.matchMedia("(min-width: 800px)")</code> is not working. :^(
</p>
<p class="negative">
This should be green, with a black border and black text, if we are correctly ignoring <code>@media</code> rules that do not apply.
</p>
<p class="screen">
This should be green, with a black border and black text, if we are correctly applying <code>@media screen</code>.
</p>
<p class="size-min">
This should be green, with a black border and black text, if the window is at least 400px wide.
</p>
<p class="size-max">
This should be green, with a black border and black text, if the window is at most 1000px wide.
</p>
<p class="size-range">
This should be green, with a black border and black text, if the window is between 400px and 1000px wide.
</p>
<p class="color">
This should be green, with a black border and black text, if we detected the <code>color</code> feature.
</p>
<p class="color-2">
This should be green, with a black border and black text, if we detected the <code>color</code> feature and we understand <code>not</code>.
</p>
<p class="color-2">
This should be green, with a black border and black text, if we detected the <code>color</code> feature and a deeply nested query: <code>(color) or ((color) and ((color) or (color) or (not (color))))</code>.
</p>
<script>
let mql = window.matchMedia("(min-width: 800px)");
function update_match_text(input) {
if (input.matches) {
document.getElementById("interactive").innerHTML = "<code>window.matchMedia(\"(min-width: 800px)\")</code> matches!";
} else {
document.getElementById("interactive").innerHTML = "<code>window.matchMedia(\"(min-width: 800px)\")</code> doesn't match!";
}
}
mql.addEventListener("change", update_match_text);
update_match_text(mql);
</script>
</body>
</html>