|
@@ -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>
|