@webref/css 8.6.1 → 8.7.1

package/css.json

@@ -658,6 +658,13 @@
           "type": "discrete",
           "syntax": "fullscreen | standalone | minimal-ui | browser | picture-in-picture"
         },
+        {
+          "name": "display-state",
+          "href": "https://w3c.github.io/window-management/#descdef-media-display-state",
+          "for": "@media",
+          "type": "discrete",
+          "syntax": "normal | minimized | maximized | fullscreen"
+        },
         {
           "name": "dynamic-range",
           "href": "https://drafts.csswg.org/mediaqueries-5/#descdef-media-dynamic-range",
@@ -791,6 +798,13 @@
           "type": "discrete",
           "syntax": "no-preference | reduce"
         },
+        {
+          "name": "resizable",
+          "href": "https://w3c.github.io/window-management/#descdef-media-resizable",
+          "for": "@media",
+          "type": "discrete",
+          "syntax": "true | false"
+        },
         {
           "name": "resolution",
           "href": "https://drafts.csswg.org/mediaqueries-5/#descdef-media-resolution",
@@ -869,7 +883,7 @@
       "name": "@mixin",
       "href": "https://drafts.csswg.org/css-mixins-1/#at-ruledef-mixin",
       "descriptors": [],
-      "syntax": "@mixin <function-token> <function-parameter>#? ) { <declaration-rule-list> }",
+      "syntax": "@mixin [<function-token> <function-parameter>#? ) | <ident-token> ] { <declaration-rule-list> }",
       "extended": []
     },
     {
@@ -1245,6 +1259,7 @@
     },
     {
       "name": "calc-size()",
+      "prose": "The calc-size() function allows math and transition/animation to be performed on these sizes in a safe, well-defined way. Its syntax is as follows:",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-calc-size",
       "syntax": "calc-size( <calc-size-basis>, <calc-sum> )",
       "extended": []
@@ -3436,7 +3451,28 @@
     },
     {
       "name": "animation-delay",
-      "href": "https://drafts.csswg.org/css-animations-1/#propdef-animation-delay",
+      "href": "https://drafts.csswg.org/css-animations-2/#propdef-animation-delay",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
+      "computedValue": "see individual properties",
+      "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "styleDeclaration": [
+        "animation-delay",
+        "animationDelay"
+      ],
+      "longhands": [
+        "animation-delay-start",
+        "animation-delay-end"
+      ],
+      "syntax": "[ <'animation-delay-start'> <'animation-delay-end'>? ]#",
+      "extended": []
+    },
+    {
+      "name": "animation-delay-end",
+      "href": "https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-end",
       "initial": "0s",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -3445,8 +3481,25 @@
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
       "styleDeclaration": [
-        "animation-delay",
-        "animationDelay"
+        "animation-delay-end",
+        "animationDelayEnd"
+      ],
+      "syntax": "<time [0s,∞]>#",
+      "extended": []
+    },
+    {
+      "name": "animation-delay-start",
+      "href": "https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start",
+      "initial": "0s",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "list, each item a duration",
+      "canonicalOrder": "per grammar",
+      "animationType": "not animatable",
+      "styleDeclaration": [
+        "animation-delay-start",
+        "animationDelayStart"
       ],
       "syntax": "<time>#",
       "extended": []
@@ -17156,7 +17209,7 @@
     },
     {
       "name": ":any-link",
-      "prose": "The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML5], any a or area elements with an href attribute are hyperlinks, and thus match :any-link. It matches an element if the element would match either :link or :visited, and is equivalent to :is(:link, :visited).",
+      "prose": "The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML], any a or area elements with an href attribute are hyperlinks, and thus match :any-link. It matches an element if the element would match either :link or :visited, and is equivalent to :is(:link, :visited).",
       "href": "https://drafts.csswg.org/selectors-4/#any-link-pseudo",
       "syntax": ":any-link",
       "extended": []
@@ -17190,7 +17243,7 @@
     },
     {
       "name": ":checked",
-      "prose": "When such elements are toggled “on” the :checked pseudo-class applies. For example, [HTML5] defines that checked checkboxes, radio buttons, and selected <option> elements match :checked. Similarly, when such elements are toggled “off”, the :unchecked pseudo-class applies.",
+      "prose": "When such elements are toggled “on” the :checked pseudo-class applies. For example, [HTML] defines that checked checkboxes, radio buttons, and selected <option> elements match :checked. Similarly, when such elements are toggled “off”, the :unchecked pseudo-class applies.",
       "href": "https://drafts.csswg.org/selectors-4/#checked-pseudo",
       "syntax": ":checked",
       "extended": []
@@ -17224,7 +17277,7 @@
     },
     {
       "name": ":dir()",
-      "prose": "The :dir() pseudo-class allows the author to write selectors that represent an element based on its directionality as determined by the document language. For example, [HTML5] defines how to determine the directionality of an element, based on a combination of the dir attribute, the surrounding text, and other factors. As another example, the its:dir and dirRule element of the Internationalization Tag Set [ITS20] are able to define the directionality of an element in [XML10].",
+      "prose": "The :dir() pseudo-class allows the author to write selectors that represent an element based on its directionality as determined by the document language. For example, [HTML] defines how to determine the directionality of an element, based on a combination of the dir attribute, the surrounding text, and other factors. As another example, the its:dir and dirRule element of the Internationalization Tag Set [ITS20] are able to define the directionality of an element in [XML10].",
       "href": "https://drafts.csswg.org/selectors-4/#dir-pseudo",
       "extended": []
     },
@@ -17414,7 +17467,7 @@
     },
     {
       "name": ":invalid",
-      "prose": "An element is :valid or :invalid when its contents or value is, respectively, valid or invalid with respect to data validity semantics defined by the document language (e.g. [XFORMS11] or [HTML5]). An element which lacks data validity semantics is neither :valid nor :invalid.",
+      "prose": "An element is :valid or :invalid when its contents or value is, respectively, valid or invalid with respect to data validity semantics defined by the document language (e.g. [XFORMS11] or [HTML]). An element which lacks data validity semantics is neither :valid nor :invalid.",
       "href": "https://drafts.csswg.org/selectors-4/#invalid-pseudo",
       "syntax": ":invalid",
       "extended": []
@@ -17632,7 +17685,7 @@
     },
     {
       "name": ":placeholder-shown",
-      "prose": "Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in [HTML5]. The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text, whether that text is given by an attribute or a real element, or is otherwise implied by the UA.",
+      "prose": "Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in [HTML]. The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text, whether that text is given by an attribute or a real element, or is otherwise implied by the UA.",
       "href": "https://drafts.csswg.org/selectors-4/#placeholder-shown-pseudo",
       "syntax": ":placeholder-shown",
       "extended": []
@@ -17785,7 +17838,7 @@
     },
     {
       "name": ":unchecked",
-      "prose": "When such elements are toggled “on” the :checked pseudo-class applies. For example, [HTML5] defines that checked checkboxes, radio buttons, and selected <option> elements match :checked. Similarly, when such elements are toggled “off”, the :unchecked pseudo-class applies.",
+      "prose": "When such elements are toggled “on” the :checked pseudo-class applies. For example, [HTML] defines that checked checkboxes, radio buttons, and selected <option> elements match :checked. Similarly, when such elements are toggled “off”, the :unchecked pseudo-class applies.",
       "href": "https://drafts.csswg.org/selectors-4/#unchecked-pseudo",
       "syntax": ":unchecked",
       "extended": []
@@ -17806,7 +17859,7 @@
     },
     {
       "name": ":valid",
-      "prose": "An element is :valid or :invalid when its contents or value is, respectively, valid or invalid with respect to data validity semantics defined by the document language (e.g. [XFORMS11] or [HTML5]). An element which lacks data validity semantics is neither :valid nor :invalid.",
+      "prose": "An element is :valid or :invalid when its contents or value is, respectively, valid or invalid with respect to data validity semantics defined by the document language (e.g. [XFORMS11] or [HTML]). An element which lacks data validity semantics is neither :valid nor :invalid.",
       "href": "https://drafts.csswg.org/selectors-4/#valid-pseudo",
       "syntax": ":valid",
       "extended": []
@@ -18313,7 +18366,7 @@
     {
       "name": "calc-size-basis",
       "href": "https://drafts.csswg.org/css-values-5/#typedef-calc-size-basis",
-      "syntax": "[ <size-keyword> | <calc-size()> | any | <calc-sum> ]",
+      "syntax": "[ <size-keyword> | <calc-sum> | <calc-size()> | any ]",
       "extended": []
     },
     {
@@ -19186,7 +19239,7 @@
     {
       "name": "generic-voice",
       "href": "https://drafts.csswg.org/css-speech-1/#typedef-generic-voice",
-      "syntax": "<age>? <gender> <integer>?",
+      "syntax": "<age>? <gender> <integer [1,∞]>?",
       "extended": []
     },
     {
@@ -20422,7 +20475,7 @@
     {
       "name": "route-location",
       "href": "https://drafts.csswg.org/css-navigation-1/#typedef-route-location",
-      "syntax": "<url> | [ [ <route-name> | <url-pattern()> ] <url-pattern-param-matcher>? ]",
+      "syntax": "<url> | [ <route-name> | <url-pattern()> ]",
       "extended": []
     },
     {
@@ -20597,7 +20650,7 @@
     {
       "name": "single-animation",
       "href": "https://drafts.csswg.org/css-animations-2/#typedef-single-animation",
-      "syntax": "<'animation-duration'> || <easing-function> || <'animation-delay'> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>",
+      "syntax": "<'animation-duration'> || <easing-function> || <'animation-delay-start'> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>",
       "extended": []
     },
     {
@@ -20655,9 +20708,12 @@
       "extended": []
     },
     {
+      "for": [
+        "calc-size()"
+      ],
       "name": "size-keyword",
-      "prose": "The <size-keyword> production matches any sizing keywords allowed in the context. For example, in width, it matches auto, min-content, stretch, etc.",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-size-keyword",
+      "prose": "Indicates that the calc-size() is basing its size off of the specified keyword. Represents any sizing keywords allowed in the context where the function is used. For example, in width, it matches auto, min-content, stretch, etc. Also allows any related sizing functions, like the fit-content() function in width/etc., which is a variation of the fit-content keyword. For all purposes other than actually resolving the size, the calc-size() acts like this keyword. The calc-size calculation will use the corresponding size as the value of its size keyword.",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-calc-size-size-keyword",
       "extended": []
     },
     {
@@ -21085,18 +21141,6 @@
       "href": "https://drafts.csswg.org/css-values-4/#typedef-url-modifier",
       "extended": []
     },
-    {
-      "name": "url-pattern-param",
-      "href": "https://drafts.csswg.org/css-navigation-1/#typedef-url-pattern-param",
-      "syntax": "<ident>: <any-value>",
-      "extended": []
-    },
-    {
-      "name": "url-pattern-param-matcher",
-      "href": "https://drafts.csswg.org/css-navigation-1/#typedef-url-pattern-param-matcher",
-      "syntax": "with (<url-pattern-param># | [ all from <url> ])",
-      "extended": []
-    },
     {
       "for": [
         "cursor"
@@ -21131,6 +21175,7 @@
       "name": "view-transition-type",
       "prose": "where <view-transition-type> is any <custom-ident> other than none, and not starting with the string \"-ua-\".",
       "href": "https://drafts.csswg.org/css-view-transitions-2/#typedef-view-transition-type",
+      "syntax": "<custom-ident>",
       "extended": []
     },
     {

package/package.json

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