mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 03:37:45 +00:00
LibWeb: Support range syntax for media queries
This means you can now do queries like: ```css @media (400px <= width < 800px) { } ``` Chromium and Firefox which I tested with both don't support this yet, so that's cool. :^)
This commit is contained in:
parent
c3bf9e5b79
commit
416033a660
4 changed files with 366 additions and 43 deletions
|
@ -41,6 +41,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only all and (width > 399px) {
|
||||
.size-min-range {
|
||||
background-color: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.size-max {
|
||||
background-color: lime;
|
||||
|
@ -48,6 +55,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (1001px > width) {
|
||||
.size-max-range {
|
||||
background-color: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px) and (max-width: 1000px) {
|
||||
.size-range {
|
||||
background-color: lime;
|
||||
|
@ -55,6 +69,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (400px <= width <= 1000px) {
|
||||
.size-range-syntax {
|
||||
background-color: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (color) {
|
||||
.color {
|
||||
background-color: lime;
|
||||
|
@ -90,12 +111,21 @@
|
|||
<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-min-range">
|
||||
This should be green, with a black border and black text, if the window is at least 400px wide, and we understand range syntax.
|
||||
</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-max-range">
|
||||
This should be green, with a black border and black text, if the window is at most 1000px wide, and we understand range syntax.
|
||||
</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="size-range-syntax">
|
||||
This should be green, with a black border and black text, if the window is between 400px and 1000px wide, and we understand range syntax.
|
||||
</p>
|
||||
<p class="color">
|
||||
This should be green, with a black border and black text, if we detected the <code>color</code> feature.
|
||||
</p>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue