modernize example (#166)

estelle · web-flow · commit 407bcc8d39e9 · 2024-01-03T06:37:29.000+01:00
* modernize example

* modernize example

* don't rely on color only
diff --git 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 @@
     <section class="preview">
       <div class="box">
         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.
       </div>
     </section>
 
@@ -36,15 +36,15 @@
 }
 @supports (display: grid) and (shape-outside: circle()) {
   .box {
-    border: 4px solid red;
+    border: 4px dashed red;
     color: red;
   }
 }</textarea
     >
 
     <textarea class="playable playable-html" style="height: 120px">
 <div class="box">
-If your browser supports display: grid and shape-outside: circle(), the text and border will be red.
+If your browser supports display: grid and shape-outside: circle(), the content will be red with a dashed border.
 </div></textarea
     >
 
diff --git 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 @@
   <body>
     <section class="preview">
       <div class="box">
-        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.
       </div>
     </section>
 
@@ -36,15 +36,15 @@
 }
 @supports not (row-gap: 10px) {
   .box {
-    border: 4px solid red;
+    border: 4px dashed red;
     color: red;
   }
 }</textarea
     >
 
     <textarea class="playable playable-html" style="height: 120px">
 <div class="box">
-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.
 </div></textarea
     >
 
diff --git 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;
         }
       }
     </style>
@@ -24,8 +24,8 @@
   <body>
     <section class="preview">
       <div class="box">
-        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.
       </div>
     </section>
 
@@ -34,17 +34,17 @@
   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;
   }
 }</textarea
     >
 
     <textarea class="playable playable-html" style="height: 120px">
 <div class="box">
-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.
 </div></textarea
     >
 

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`}`
`15`	`15`	`@supports (display: grid) and (shape-outside: circle()) {`
`16`	`16`	`.box {`
`17`		`- border: 4px solid red;`
	`17`	`+ border: 4px dashed red;`
`18`	`18`	`color: red;`
`19`	`19`	`}`
`20`	`20`	`}`
`@@ -25,7 +25,7 @@`
`25`	`25`	`<section class="preview">`
`26`	`26`	`<div class="box">`
`27`	`27`	`If your browser supports display: grid and shape-outside: circle(), the`
`28`		`- text and border will be red.`
	`28`	`+ content will be red with a dashed border.`
`29`	`29`	`</div>`
`30`	`30`	`</section>`
`31`	`31`
`@@ -36,15 +36,15 @@`
`36`	`36`	`}`
`37`	`37`	`@supports (display: grid) and (shape-outside: circle()) {`
`38`	`38`	`.box {`
`39`		`- border: 4px solid red;`
	`39`	`+ border: 4px dashed red;`
`40`	`40`	`color: red;`
`41`	`41`	`}`
`42`	`42`	`}</textarea`
`43`	`43`	`>`
`44`	`44`
`45`	`45`	`<textarea class="playable playable-html" style="height: 120px">`
`46`	`46`	`<div class="box">`
`47`		`-If your browser supports display: grid and shape-outside: circle(), the text and border will be red.`
	`47`	`+If your browser supports display: grid and shape-outside: circle(), the content will be red with a dashed border.`
`48`	`48`	`</div></textarea`
`49`	`49`	`>`
`50`	`50`