RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 20:17:44 +00:00
Code Issues Activity Actions

LibWeb: Support range syntax for media queries

Browse source 
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:
Sam Atkins 2022-01-01 16:24:43 +00:00 • committed by Andreas Kling
parent c3bf9e5b79
commit 416033a660
4 changed files with 366 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

30
Base/res/html/misc/media-queries.html
View file

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