@webref/css 5.4.4 → 6.1.0

package/mediaqueries.json

@@ -3,9 +3,10 @@
     "title": "Media Queries Level 4",
     "url": "https://drafts.csswg.org/mediaqueries-4/"
   },
-  "properties": {},
-  "atrules": {
-    "@media": {
+  "properties": [],
+  "atrules": [
+    {
+      "name": "@media",
       "descriptors": [
         {
           "name": "width",
@@ -29,19 +30,55 @@
           "name": "orientation",
           "for": "@media",
           "value": "portrait | landscape",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "portrait",
+              "prose": "The orientation media feature is portrait when the value of the height media feature is greater than or equal to the value of the width media feature.",
+              "type": "value",
+              "value": "portrait"
+            },
+            {
+              "name": "landscape",
+              "prose": "Otherwise orientation is landscape.",
+              "type": "value",
+              "value": "landscape"
+            }
+          ]
         },
         {
           "name": "resolution",
           "for": "@media",
           "value": "<resolution> | infinite",
-          "type": "range"
+          "type": "range",
+          "values": [
+            {
+              "name": "infinite",
+              "prose": "For output mediums that have no physical constraints on resolution (such as outputting to vector graphics), this feature must match the infinite value. For the purpose of evaluating this media feature in the range context, infinite must be treated as larger than any possible <resolution>. (That is, a query like (resolution > 1000dpi) will be true for an infinite media.)",
+              "type": "value",
+              "value": "infinite"
+            }
+          ]
         },
         {
           "name": "scan",
           "for": "@media",
           "value": "interlace | progressive",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "interlace",
+              "prose": "CRT and some types of plasma TV screens used “interlaced” rendering, where video frames alternated between specifying only the “even” lines on the screen and only the “odd” lines, exploiting various automatic mental image-correction abilities to produce smooth motion. This allowed them to simulate a higher FPS broadcast at half the bandwidth cost. When displaying on interlaced screens, authors should avoid very fast movement across the screen to avoid “combing”, and should ensure that details on the screen are wider than 1px to avoid “twitter”.",
+              "type": "value",
+              "value": "interlace"
+            },
+            {
+              "name": "progressive",
+              "prose": "A screen using “progressive” rendering displays each screen fully, and needs no special treatment. Most modern screens, and all computer screens, use progressive rendering.",
+              "type": "value",
+              "value": "progressive"
+            }
+          ]
         },
         {
           "name": "grid",
@@ -53,19 +90,73 @@
           "name": "update",
           "for": "@media",
           "value": "none | slow | fast",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "none",
+              "prose": "Once it has been rendered, the layout can no longer be updated. Example: documents printed on paper.",
+              "type": "value",
+              "value": "none"
+            },
+            {
+              "name": "slow",
+              "prose": "The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Example: E-ink screens or severely under-powered devices.",
+              "type": "value",
+              "value": "slow"
+            },
+            {
+              "name": "fast",
+              "prose": "The layout may change dynamically according to the usual rules of CSS, and the output device is not unusually constrained in speed, so regularly-updating things like CSS Animations can be used. Example: computer screens.",
+              "type": "value",
+              "value": "fast"
+            }
+          ]
         },
         {
           "name": "overflow-block",
           "for": "@media",
           "value": "none | scroll | paged",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "none",
+              "prose": "There is no affordance for overflow in the block axis; any overflowing content is simply not displayed. Examples: billboards",
+              "type": "value",
+              "value": "none"
+            },
+            {
+              "name": "scroll",
+              "prose": "Overflowing content in the block axis is exposed by allowing users to scroll to it. Examples: computer screens",
+              "type": "value",
+              "value": "scroll"
+            },
+            {
+              "name": "paged",
+              "prose": "Content is broken up into discrete pages; content that overflows one page in the block axis is displayed on the following page. Examples: printers, ebook readers",
+              "type": "value",
+              "value": "paged"
+            }
+          ]
         },
         {
           "name": "overflow-inline",
           "for": "@media",
           "value": "none | scroll",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "none",
+              "prose": "There is no affordance for overflow in the inline axis; any overflowing content is simply not displayed.",
+              "type": "value",
+              "value": "none"
+            },
+            {
+              "name": "scroll",
+              "prose": "Overflowing content in the inline axis is exposed by allowing users to scroll to it.",
+              "type": "value",
+              "value": "scroll"
+            }
+          ]
         },
         {
           "name": "color",
@@ -89,19 +180,73 @@
           "name": "color-gamut",
           "for": "@media",
           "value": "srgb | p3 | rec2020",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "srgb",
+              "prose": "The UA and output device can support approximately the sRGB gamut or more.",
+              "type": "value",
+              "value": "srgb"
+            },
+            {
+              "name": "p3",
+              "prose": "The UA and output device can support approximately the gamut specified by the Display P3 [Display-P3] Color Space or more.",
+              "type": "value",
+              "value": "p3"
+            },
+            {
+              "name": "rec2020",
+              "prose": "The UA and output device can support approximately the gamut specified by the ITU-R Recommendation BT.2020 Color Space or more.",
+              "type": "value",
+              "value": "rec2020"
+            }
+          ]
         },
         {
           "name": "pointer",
           "for": "@media",
           "value": "none | coarse | fine",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "none",
+              "prose": "The primary input mechanism of the device does not include a pointing device.",
+              "type": "value",
+              "value": "none"
+            },
+            {
+              "name": "coarse",
+              "prose": "The primary input mechanism of the device includes a pointing device of limited accuracy. Examples include touchscreens and motion-detection sensors (like the Kinect peripheral for the Xbox.)",
+              "type": "value",
+              "value": "coarse"
+            },
+            {
+              "name": "fine",
+              "prose": "The primary input mechanism of the device includes an accurate pointing device. Examples include mice, touchpads, and drawing styluses.",
+              "type": "value",
+              "value": "fine"
+            }
+          ]
         },
         {
           "name": "hover",
           "for": "@media",
           "value": "none | hover",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "none",
+              "prose": "Indicates that the primary pointing device can’t hover, or that there is no pointing device. Examples include touchscreens and screens that use a basic drawing stylus. Pointing devices that can hover, but for which doing so is inconvenient and not part of the normal way they are used, also match this value. For example, a touchscreen where a long press is treated as hovering would match hover: none.",
+              "type": "value",
+              "value": "none"
+            },
+            {
+              "name": "hover",
+              "prose": "Indicates that the primary pointing device can easily hover over parts of the page. Examples include mice and devices that physically point at the screen, like the Nintendo Wii controller.",
+              "type": "value",
+              "value": "hover"
+            }
+          ]
         },
         {
           "name": "any-pointer",
@@ -133,73 +278,195 @@
           "value": "<ratio>",
           "type": "range"
         }
+      ],
+      "values": [
+        {
+          "name": "not",
+          "prose": "An individual media query can have its result negated by prefixing it with the keyword not. If the media query would normally evaluate to true, prefixing it with not makes it evaluate to false, and vice versa.",
+          "type": "value",
+          "value": "not"
+        },
+        {
+          "name": "only",
+          "prose": "To hide these media queries from legacy user agents, the media query can be prefixed with the keyword only. The only keyword has no effect on the media query’s result, but will cause the media query to be parsed by legacy user agents as specifying the unknown media type “only”, and thus be ignored.",
+          "type": "value",
+          "value": "only"
+        },
+        {
+          "name": "all",
+          "prose": "Matches all devices.",
+          "type": "value",
+          "value": "all"
+        },
+        {
+          "name": "print",
+          "prose": "Matches printers, and devices intended to reproduce a printed display, such as a web browser showing a document in “Print Preview”.",
+          "type": "value",
+          "value": "print"
+        },
+        {
+          "name": "screen",
+          "prose": "Matches all devices that aren’t matched by print.",
+          "type": "value",
+          "value": "screen"
+        },
+        {
+          "name": "tty",
+          "type": "value",
+          "value": "tty"
+        },
+        {
+          "name": "tv",
+          "type": "value",
+          "value": "tv"
+        },
+        {
+          "name": "projection",
+          "type": "value",
+          "value": "projection"
+        },
+        {
+          "name": "handheld",
+          "type": "value",
+          "value": "handheld"
+        },
+        {
+          "name": "braille",
+          "type": "value",
+          "value": "braille"
+        },
+        {
+          "name": "embossed",
+          "type": "value",
+          "value": "embossed"
+        },
+        {
+          "name": "aural",
+          "type": "value",
+          "value": "aural"
+        },
+        {
+          "name": "speech",
+          "type": "value",
+          "value": "speech"
+        }
       ]
     }
-  },
-  "valuespaces": {
-    "<media-query-list>": {
-      "prose": "To parse a <media-query-list> production, parse a comma-separated list of component values, then parse each entry in the returned list as a <media-query>. Its value is the list of <media-query>s so produced."
-    },
-    "<mq-boolean>": {
-      "prose": "The <mq-boolean> value type is an <integer> with the value 0 or 1. Any other integer value is invalid. Note that -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.",
-      "value": "<integer [0,1]>"
+  ],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<media-query-list>",
+      "prose": "To parse a <media-query-list> production, parse a comma-separated list of component values, then parse each entry in the returned list as a <media-query>. Its value is the list of <media-query>s so produced.",
+      "type": "type"
     },
-    "<media-query>": {
+    {
+      "name": "<media-query>",
+      "type": "type",
       "value": "<media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?"
     },
-    "<media-type>": {
+    {
+      "name": "<media-type>",
+      "type": "type",
       "value": "<ident>"
     },
-    "<media-condition>": {
+    {
+      "name": "<media-condition>",
+      "type": "type",
       "value": "<media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]"
     },
-    "<media-condition-without-or>": {
+    {
+      "name": "<media-condition-without-or>",
+      "type": "type",
       "value": "<media-not> | <media-in-parens> <media-and>*"
     },
-    "<media-not>": {
+    {
+      "name": "<media-not>",
+      "type": "type",
       "value": "not <media-in-parens>"
     },
-    "<media-and>": {
+    {
+      "name": "<media-and>",
+      "type": "type",
       "value": "and <media-in-parens>"
     },
-    "<media-or>": {
+    {
+      "name": "<media-or>",
+      "type": "type",
       "value": "or <media-in-parens>"
     },
-    "<media-in-parens>": {
+    {
+      "name": "<media-in-parens>",
+      "type": "type",
       "value": "( <media-condition> ) | ( <media-feature> ) | <general-enclosed>"
     },
-    "<media-feature>": {
+    {
+      "name": "<media-feature>",
+      "type": "type",
       "value": "[ <mf-plain> | <mf-boolean> | <mf-range> ]"
     },
-    "<mf-plain>": {
+    {
+      "name": "<mf-plain>",
+      "type": "type",
       "value": "<mf-name> : <mf-value>"
     },
-    "<mf-boolean>": {
+    {
+      "name": "<mf-boolean>",
+      "type": "type",
       "value": "<mf-name>"
     },
-    "<mf-range>": {
+    {
+      "name": "<mf-range>",
+      "type": "type",
       "value": "<mf-name> <mf-comparison> <mf-value> | <mf-value> <mf-comparison> <mf-name> | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value> | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>"
     },
-    "<mf-name>": {
+    {
+      "name": "<mf-name>",
+      "type": "type",
       "value": "<ident>"
     },
-    "<mf-value>": {
+    {
+      "name": "<mf-value>",
+      "type": "type",
       "value": "<number> | <dimension> | <ident> | <ratio>"
     },
-    "<mf-lt>": {
+    {
+      "name": "<mf-lt>",
+      "type": "type",
       "value": "'<' '='?"
     },
-    "<mf-gt>": {
+    {
+      "name": "<mf-gt>",
+      "type": "type",
       "value": "'>' '='?"
     },
-    "<mf-eq>": {
+    {
+      "name": "<mf-eq>",
+      "type": "type",
       "value": "'='"
     },
-    "<mf-comparison>": {
+    {
+      "name": "<mf-comparison>",
+      "type": "type",
       "value": "<mf-lt> | <mf-gt> | <mf-eq>"
     },
-    "<general-enclosed>": {
+    {
+      "name": "<general-enclosed>",
+      "type": "type",
       "value": "[ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]"
+    },
+    {
+      "name": "<mq-boolean>",
+      "type": "type",
+      "value": "<integer [0,1]>"
+    }
+  ],
+  "warnings": [
+    {
+      "msg": "Duplicate definition",
+      "name": "<mq-boolean>",
+      "prose": "The <mq-boolean> value type is an <integer> with the value 0 or 1. Any other integer value is invalid. Note that -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.",
+      "type": "type"
     }
-  }
+  ]
 }

package/motion.json

@@ -3,8 +3,8 @@
     "title": "Motion Path Module Level 1",
     "url": "https://drafts.fxtf.org/motion-1/"
   },
-  "properties": {
-    "offset-path": {
+  "properties": [
+    {
       "name": "offset-path",
       "value": "none | <ray()> | <path()> | <url> | [ <basic-shape> && <coord-box>? ] | <coord-box>",
       "initial": "none",
@@ -15,12 +15,77 @@
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "media": "visual",
+      "values": [
+        {
+          "name": "ray()",
+          "value": "ray( [ <angle> && <size> && contain? ] )",
+          "type": "function",
+          "values": [
+            {
+              "name": "<angle>",
+              "prose": "The offset path is a line segment that starts from the position of the box and proceeds in the direction defined by the specified <angle>. As with CSS gradients, <angle> values are interpreted as bearing angles, with 0deg pointing up and positive angles representing clockwise rotation.",
+              "type": "value",
+              "value": "<angle>"
+            },
+            {
+              "name": "<size>",
+              "prose": "Decides the path length used when offset-distance is expressed as a percentage, using the distance to the containing box. For <size> values other than sides, the path length is independent of <angle>. It is defined as: <size> = [ closest-side | closest-corner | farthest-side | farthest-corner | sides ]",
+              "type": "value",
+              "value": "<size>",
+              "values": [
+                {
+                  "name": "closest-side",
+                  "prose": "The perpendicular distance is measured between the initial position and the closest side of the box from it.",
+                  "type": "value",
+                  "value": "closest-side"
+                },
+                {
+                  "name": "closest-corner",
+                  "prose": "The distance is measured between the initial position and the closest corner of the box from it.",
+                  "type": "value",
+                  "value": "closest-corner"
+                },
+                {
+                  "name": "farthest-side",
+                  "prose": "The perpendicular distance is measured between the initial position and the farthest side of the box from it.",
+                  "type": "value",
+                  "value": "farthest-side"
+                },
+                {
+                  "name": "farthest-corner",
+                  "prose": "The distance is measured between the initial position and the farthest corner of the box from it.",
+                  "type": "value",
+                  "value": "farthest-corner"
+                },
+                {
+                  "name": "sides",
+                  "prose": "The distance is measured between the initial position and the intersection of the ray with the box. If the initial position is not within the box, the distance is 0.",
+                  "type": "value",
+                  "value": "sides"
+                }
+              ]
+            },
+            {
+              "name": "contain",
+              "prose": "The used value of offset-distance is clamped so that the box is entirely contained within the path. If no offset-distance would lead to the box being enclosed by the path, the path size is minimally increased so that such an offset-distance exists.",
+              "type": "value",
+              "value": "contain"
+            }
+          ]
+        },
+        {
+          "name": "none",
+          "prose": "No offset path gets created. When offset-path is none, offset-distance and offset-rotate have no effect.",
+          "type": "value",
+          "value": "none"
+        }
+      ],
       "styleDeclaration": [
         "offset-path",
         "offsetPath"
       ]
     },
-    "offset-distance": {
+    {
       "name": "offset-distance",
       "value": "<length-percentage>",
       "initial": "0",
@@ -36,7 +101,7 @@
         "offsetDistance"
       ]
     },
-    "offset-position": {
+    {
       "name": "offset-position",
       "value": "auto | <position>",
       "initial": "auto",
@@ -52,7 +117,7 @@
         "offsetPosition"
       ]
     },
-    "offset-anchor": {
+    {
       "name": "offset-anchor",
       "value": "auto | <position>",
       "initial": "auto",
@@ -68,7 +133,7 @@
         "offsetAnchor"
       ]
     },
-    "offset-rotate": {
+    {
       "name": "offset-rotate",
       "value": "[ auto | reverse ] || <angle>",
       "initial": "auto",
@@ -79,12 +144,26 @@
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "media": "visual",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "Indicates that the object is rotated (over time if offset-distance is animated) by the angle of the direction (i.e., directional tangent vector) of the offset path, relative to the positive x-axis. If specified in combination with <angle>, the computed value of <angle> is added to the computed value of auto.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "reverse",
+          "prose": "Indicates that the object is rotated (over time if offset-distance is animated) by the angle of the direction (i.e., directional tangent vector) of the offset path, relative to the positive x-axis, plus 180 degrees. If specified in combination with <angle>, the computed value of <angle> is added to the computed value of reverse.",
+          "type": "value",
+          "value": "reverse"
+        }
+      ],
       "styleDeclaration": [
         "offset-rotate",
         "offsetRotate"
       ]
     },
-    "offset": {
+    {
       "name": "offset",
       "value": "[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?",
       "initial": "see individual properties",
@@ -98,14 +177,18 @@
         "offset"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<ray()>": {
-      "value": "ray( [ <angle> && <size> && contain? ] )"
-    },
-    "<path()>": {
-      "value": "path( <string> )"
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [],
+  "warnings": [
+    {
+      "msg": "Dangling value",
+      "name": "path()",
+      "value": "path( <string> )",
+      "pureSyntax": true,
+      "type": "function",
+      "for": "offsetpath-pathfunc"
     }
-  }
+  ]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webref/css",
   "description": "CSS definitions of the web platform",
-  "version": "5.4.4",
+  "version": "6.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/w3c/webref.git"