diff options
| -rw-r--r-- | Base/res/html/misc/media-queries.html | 106 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 107 insertions, 0 deletions
diff --git a/Base/res/html/misc/media-queries.html b/Base/res/html/misc/media-queries.html new file mode 100644 index 0000000000..1a8f11229b --- /dev/null +++ b/Base/res/html/misc/media-queries.html @@ -0,0 +1,106 @@ +<!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 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> +</body> +</html> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 8f93bed723..30225b9023 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -115,6 +115,7 @@ <li><a href="palette.html">system palette color css extension</a></li> <li><a href="calc.html">calc()</a></li> <li><a href="css-import.html">@import</a></li> + <li><a href="media-queries.html">@media queries</a></li> <li><a href="margin-collapse-1.html">margin collapsing 1</a></li> <li><a href="margin-collapse-2.html">margin collapsing 2</a></li> <li><a href="position-absolute-from-edges.html">position: absolute, offset from edges</a></li> |