From 2a1c77b022f46664e3d9e85c1b34e6d239dbde10 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 2 Jan 2024 17:34:48 -0800 Subject: [PATCH 1/3] modernize example --- feature-queries/or.html | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/feature-queries/or.html b/feature-queries/or.html index 73df79b0..699258db 100644 --- a/feature-queries/or.html +++ b/feature-queries/or.html @@ -12,10 +12,10 @@ border: 4px solid blue; color: blue; } - @supports (display: grid) or (display: -ms-grid) { + @supports (font-smooth: always) or (-webkit-font-smoothing: always) { .box { - border: 4px solid red; - color: red; + border: 4px dashed darkgreen; + color: darkgreen; } } @@ -24,8 +24,8 @@

- If your browser supports display: grid or display: -ms-grid, the text - and border will be red. + If your browser supports font smoothing, the text + and border will be green.

@@ -34,17 +34,18 @@ border: 4px solid blue; color: blue; } -@supports (display: grid) or (display: -ms-grid) { +@supports (font-smooth: always) or (-webkit-font-smoothing: always) { .box { - border: 4px solid red; - color: red; + border: 4px dashed darkgreen; + color: darkgreen; } +} } From b3cbb95d92a298cbc57bd7ecb9759f80c501c33e Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 2 Jan 2024 17:39:09 -0800 Subject: [PATCH 2/3] modernize example --- feature-queries/or.html | 1 - 1 file changed, 1 deletion(-) diff --git a/feature-queries/or.html b/feature-queries/or.html index 699258db..4e8af4bf 100644 --- a/feature-queries/or.html +++ b/feature-queries/or.html @@ -39,7 +39,6 @@ border: 4px dashed darkgreen; color: darkgreen; } -} } From 3b7b79b6f1f0be3c0d015d6d63f8645fb87f8d7f Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 2 Jan 2024 17:42:56 -0800 Subject: [PATCH 3/3] don't rely on color only --- feature-queries/and.html | 8 ++++---- feature-queries/not.html | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/feature-queries/and.html b/feature-queries/and.html index c77848dd..0b4978a7 100644 --- a/feature-queries/and.html +++ b/feature-queries/and.html @@ -14,7 +14,7 @@ } @supports (display: grid) and (shape-outside: circle()) { .box { - border: 4px solid red; + border: 4px dashed red; color: red; } } @@ -25,7 +25,7 @@

If your browser supports display: grid and shape-outside: circle(), the - text and border will be red. + content will be red with a dashed border.

@@ -36,7 +36,7 @@ } @supports (display: grid) and (shape-outside: circle()) { .box { - border: 4px solid red; + border: 4px dashed red; color: red; } } diff --git a/feature-queries/not.html b/feature-queries/not.html index 19eca9bd..7920b66f 100644 --- a/feature-queries/not.html +++ b/feature-queries/not.html @@ -14,7 +14,7 @@ } @supports not (row-gap: 10px) { .box { - border: 4px solid red; + border: 4px dashed red; color: red; } } @@ -24,8 +24,8 @@

- If your browser does not support row-gap, the text and border will be - red. + If your browser does not support row-gap, the content will be + red with a dashed border.

@@ -36,7 +36,7 @@ } @supports not (row-gap: 10px) { .box { - border: 4px solid red; + border: 4px dashed red; color: red; } }