Differences

This shows you the differences between two versions of the page.

--- ideas:feature-testing [2010/05/07 15:46] – tabatkins
+++ ideas:feature-testing [2010/05/07 15:58] – tabatkins
@@ Line 23: / Line 23: @@
-''h2 {
+  h2 {
-  background: white;
+    background: white;
-  color: black;
+    color: black;
-}
+  }
-h2 {
+  h2 {
-  background: white;
+    background: white;
-  color: white;
+    color: white;
-  text-shadow: 0 0 2px black !required;
+    text-shadow: 0 0 2px black !required;
-}''
+  }
 If text-shadow is supported, color is set to white and the text-shadow keeps it legible.  If not, the entire second block is ignored, and color is set to black.
-''body { position: relative; width: 800px; }
+  body { position: relative; width: 800px; }
-#header { position: absolute; left: 0; right: 0; top: 0; height: 150px;}
+  #header { position: absolute; left: 0; right: 0; top: 0; height: 150px;}
-#sidebar { position: absolute; left: 0; top: 150px; width: 200px;}
+  #sidebar { position: absolute; left: 0; top: 150px; width: 200px;}
-#content { position: absolute; left: 200px; right: 0;top: 150px; }
+  #content { position: absolute; left: 200px; right: 0;top: 150px; }
-@supports {
+  @supports {
-  body {
+    body {
-    display: "aa" /150px
+      display: "aa" /150px
-             "bc" /auto
+               "bc" /auto
 px auto !required;
+    }
+    #header { position: a; height: auto;}
+    #sidebar { position: b; width: auto;}
+    #content { position: c; }
   }
-  #header { position: a; height: auto;}
-  #sidebar { position: b; width: auto;}
-  #content { position: c; }
-}''
 In this example, if a browser supports Template Layout, the later `position` values override the previous values of "absolute" (and the left/top/right values are thus ignored), and the page is laid out according to the Template Layout spec.  If the browser doesn't support Template Layout, though, then the entire @supports block is ignored, and the previous absolute positioning takes effect instead.