@webref/css 5.4.4 → 6.0.0

package/css-ui.json

@@ -3,8 +3,8 @@
     "title": "CSS Basic User Interface Module Level 4",
     "url": "https://drafts.csswg.org/css-ui-4/"
   },
-  "properties": {
-    "outline": {
+  "properties": [
+    {
       "name": "outline",
       "value": "[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]",
       "initial": "see individual properties",
@@ -18,7 +18,7 @@
         "outline"
       ]
     },
-    "outline-width": {
+    {
       "name": "outline-width",
       "value": "<line-width>",
       "initial": "medium",
@@ -33,7 +33,7 @@
         "outlineWidth"
       ]
     },
-    "outline-style": {
+    {
       "name": "outline-style",
       "value": "auto | <outline-line-style>",
       "initial": "none",
@@ -48,22 +48,30 @@
         "outlineStyle"
       ]
     },
-    "outline-color": {
+    {
       "name": "outline-color",
-      "value": "[ <color> | <1d-image> ] | invert",
+      "value": "[ <color> | <image-1D> ] | invert",
       "initial": "invert",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "The computed value for invert is invert. For <color> values, see CSS Color 4 § 14 Resolving <color> Values in [CSS-COLOR-4]. For <1d-image> values, see CSS Images 4 § 4 1D Image Values: the stripes() notation in [CSS-IMAGES-4].",
+      "computedValue": "The computed value for invert is invert. For <color> values, see CSS Color 4 § 14 Resolving <color> Values in [CSS-COLOR-4]. For <image-1D> values, see CSS Images 4 § 4 1D Image Values: the <image-1D> type and stripes() notation in [CSS-IMAGES-4].",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
+      "values": [
+        {
+          "name": "invert",
+          "prose": "The outline-color property accepts all values of <border-color>, as well as the keyword invert. invert is expected to perform a color inversion on the pixels on the screen. This is a common trick to ensure the focus border is visible, regardless of color background.",
+          "type": "value",
+          "value": "invert"
+        }
+      ],
       "styleDeclaration": [
         "outline-color",
         "outlineColor"
       ]
     },
-    "outline-offset": {
+    {
       "name": "outline-offset",
       "value": "<length>",
       "initial": "0",
@@ -78,7 +86,7 @@
         "outlineOffset"
       ]
     },
-    "resize": {
+    {
       "name": "resize",
       "value": "none | both | horizontal | vertical | block | inline",
       "initial": "none",
@@ -92,7 +100,7 @@
         "resize"
       ]
     },
-    "cursor": {
+    {
       "name": "cursor",
       "value": "[ [ <url> | <url-set> ] [<x> <y>]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]",
       "initial": "auto",
@@ -102,11 +110,220 @@
       "computedValue": "as specified, except with any relative URLs converted to absolute",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "<url-set>",
+          "prose": "<url-set> is a limited version of image-set(), where only <url> and <url-set> can be used in the part of the <image-set-option> sub-production which would normally allow <image>.",
+          "type": "type"
+        },
+        {
+          "name": "auto",
+          "prose": "The UA determines the cursor to display based on the current context. Specifically, auto behaves as text over selectable text or editable elements, and default otherwise.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "default",
+          "prose": "The platform-dependent default cursor. Often rendered as an arrow.",
+          "type": "value",
+          "value": "default"
+        },
+        {
+          "name": "none",
+          "prose": "No cursor is rendered for the element.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "context-menu",
+          "prose": "A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.",
+          "type": "value",
+          "value": "context-menu"
+        },
+        {
+          "name": "help",
+          "prose": "Help is available for the object under the cursor. Often rendered as a question mark or a balloon.",
+          "type": "value",
+          "value": "help"
+        },
+        {
+          "name": "pointer",
+          "prose": "The cursor is a pointer that indicates a link. Often rendered as the backside of a hand with the index finger extended. Unless otherwise specified, UAs must apply cursor: pointer to hyperlinks for all supported document formats via the UA stylesheet, using a normal (i.e. not !important) declaration. Authors should use pointer on links and may use on other interactive elements.",
+          "type": "value",
+          "value": "pointer"
+        },
+        {
+          "name": "progress",
+          "prose": "A progress indicator. The program is performing some processing, but is different from wait in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.",
+          "type": "value",
+          "value": "progress"
+        },
+        {
+          "name": "wait",
+          "prose": "Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.",
+          "type": "value",
+          "value": "wait"
+        },
+        {
+          "name": "cell",
+          "prose": "Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.",
+          "type": "value",
+          "value": "cell"
+        },
+        {
+          "name": "crosshair",
+          "prose": "A simple crosshair (e.g., short line segments resembling a \"+\" sign). Often used to indicate a two dimensional bitmap selection mode.",
+          "type": "value",
+          "value": "crosshair"
+        },
+        {
+          "name": "text",
+          "prose": "Indicates text that may be selected. Often rendered as an I-beam. User agents must automatically display a vertical I-beam/cursor over elements with a horizontal writing mode, and a horizontal I-beam/cursor (e.g. same as the vertical-text keyword) over elements in a vertical writing mode. Additionally, user agents may take transforms (see [CSS-TRANSFORMS-1]) or other visual effects such as text on a path (See SVG 2 § 11.8 Text on a path), when choosing between the horizontal or vertical text cursor, and may display any angle of I-beam/cursor for text that is rendered at any particular angle.",
+          "type": "value",
+          "value": "text"
+        },
+        {
+          "name": "vertical-text",
+          "prose": "Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam.",
+          "type": "value",
+          "value": "vertical-text"
+        },
+        {
+          "name": "alias",
+          "prose": "Indicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it.",
+          "type": "value",
+          "value": "alias"
+        },
+        {
+          "name": "copy",
+          "prose": "Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.",
+          "type": "value",
+          "value": "copy"
+        },
+        {
+          "name": "move",
+          "prose": "Indicates something is to be moved.",
+          "type": "value",
+          "value": "move"
+        },
+        {
+          "name": "no-drop",
+          "prose": "Indicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it.",
+          "type": "value",
+          "value": "no-drop"
+        },
+        {
+          "name": "not-allowed",
+          "prose": "Indicates that the requested action will not be carried out. Often rendered as a circle with a line through it.",
+          "type": "value",
+          "value": "not-allowed"
+        },
+        {
+          "name": "grab",
+          "prose": "Indicates that something can be grabbed (dragged to be moved). Often rendered as the backside of an open hand.",
+          "type": "value",
+          "value": "grab"
+        },
+        {
+          "name": "grabbing",
+          "prose": "Indicates that something is being grabbed (dragged to be moved). Often rendered as the backside of a hand with fingers closed mostly out of view.",
+          "type": "value",
+          "value": "grabbing"
+        },
+        {
+          "name": "e-resize",
+          "type": "value",
+          "value": "e-resize"
+        },
+        {
+          "name": "n-resize",
+          "type": "value",
+          "value": "n-resize"
+        },
+        {
+          "name": "ne-resize",
+          "type": "value",
+          "value": "ne-resize"
+        },
+        {
+          "name": "nw-resize",
+          "type": "value",
+          "value": "nw-resize"
+        },
+        {
+          "name": "s-resize",
+          "type": "value",
+          "value": "s-resize"
+        },
+        {
+          "name": "se-resize",
+          "type": "value",
+          "value": "se-resize"
+        },
+        {
+          "name": "sw-resize",
+          "type": "value",
+          "value": "sw-resize"
+        },
+        {
+          "name": "w-resize",
+          "type": "value",
+          "value": "w-resize"
+        },
+        {
+          "name": "ew-resize",
+          "type": "value",
+          "value": "ew-resize"
+        },
+        {
+          "name": "ns-resize",
+          "type": "value",
+          "value": "ns-resize"
+        },
+        {
+          "name": "nesw-resize",
+          "type": "value",
+          "value": "nesw-resize"
+        },
+        {
+          "name": "nwse-resize",
+          "type": "value",
+          "value": "nwse-resize"
+        },
+        {
+          "name": "col-resize",
+          "prose": "Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.",
+          "type": "value",
+          "value": "col-resize"
+        },
+        {
+          "name": "row-resize",
+          "prose": "Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.",
+          "type": "value",
+          "value": "row-resize"
+        },
+        {
+          "name": "all-scroll",
+          "prose": "Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle.",
+          "type": "value",
+          "value": "all-scroll"
+        },
+        {
+          "name": "zoom-in",
+          "type": "value",
+          "value": "zoom-in"
+        },
+        {
+          "name": "zoom-out",
+          "type": "value",
+          "value": "zoom-out"
+        }
+      ],
       "styleDeclaration": [
         "cursor"
       ]
     },
-    "caret-color": {
+    {
       "name": "caret-color",
       "value": "auto | <color>",
       "initial": "auto",
@@ -121,7 +338,7 @@
         "caretColor"
       ]
     },
-    "caret-shape": {
+    {
       "name": "caret-shape",
       "value": "auto | bar | block | underscore",
       "initial": "auto",
@@ -131,12 +348,38 @@
       "computedValue": "specified keyword",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "The UA determines the shape of the caret. It should match platform conventions, and may be adjusted based on context. For example, if a UA switches between insert mode and overtype mode when the user presses the insert key on their keyboard, it may show a bar caret in insert mode, and a block caret in overtype mode.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "bar",
+          "prose": "The UA must render the text insertion caret as a thin bar placed at the insertion point. This means it is between, before, or after characters, not over them. It should be perpendicular to the inline progression direction, although UAs may render it slanted when inserting italic or oblique text.",
+          "type": "value",
+          "value": "bar"
+        },
+        {
+          "name": "block",
+          "prose": "The UA must render the text insertion caret as a rectangle overlapping the next visible character following the insertion point. If there is no visible character after the insertion point, the UA must render the caret after the last visible character. UAs may render it as a slanted rectangle when inserting italic or oblique text.",
+          "type": "value",
+          "value": "block"
+        },
+        {
+          "name": "underscore",
+          "prose": "The UA must render the text insertion caret as a thin line under (as defined in [CSS-WRITING-MODES-3] the next visible character following the insertion point. If there is no visible character after the insertion point, the UA must render the caret after the last visible character.",
+          "type": "value",
+          "value": "underscore"
+        }
+      ],
       "styleDeclaration": [
         "caret-shape",
         "caretShape"
       ]
     },
-    "caret": {
+    {
       "name": "caret",
       "value": "<'caret-color'> || <'caret-shape'>",
       "initial": "auto",
@@ -150,7 +393,7 @@
         "caret"
       ]
     },
-    "nav-up": {
+    {
       "name": "nav-up",
       "value": "auto | <id> [ current | root | <target-name> ]?",
       "initial": "auto",
@@ -165,7 +408,7 @@
         "navUp"
       ]
     },
-    "nav-right": {
+    {
       "name": "nav-right",
       "value": "auto | <id> [ current | root | <target-name> ]?",
       "initial": "auto",
@@ -180,7 +423,7 @@
         "navRight"
       ]
     },
-    "nav-down": {
+    {
       "name": "nav-down",
       "value": "auto | <id> [ current | root | <target-name> ]?",
       "initial": "auto",
@@ -195,7 +438,7 @@
         "navDown"
       ]
     },
-    "nav-left": {
+    {
       "name": "nav-left",
       "value": "auto | <id> [ current | root | <target-name> ]?",
       "initial": "auto",
@@ -210,7 +453,7 @@
         "navLeft"
       ]
     },
-    "user-select": {
+    {
       "name": "user-select",
       "value": "auto | text | none | contain | all",
       "initial": "auto",
@@ -220,12 +463,43 @@
       "computedValue": "specified keyword",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "The used value of auto is determined as follows: On the ::before and ::after pseudo-elements, the used value is none If the element is an editable element, the used value is contain Otherwise, if the used value of user-select on the parent of this element is all, the used value is all Otherwise, if the used value of user-select on the parent of this element is none, the used value is none Otherwise, the used value is text",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "text",
+          "prose": "The element imposes no constraint on the selection.",
+          "type": "value",
+          "value": "text"
+        },
+        {
+          "name": "none",
+          "prose": "The UA must not allow selections to be started in this element. A selection started outside of this element must not end in this element. If the user attempts to create such a selection, the UA must instead end the selection range at the element boundary. However, if this element has descendants on which the used value of user-select is not none, selections that start and end within these descendants are allowed. The UA must allow selections to extend across this element, and must exclude this element from such a selection. An exception is made for UAs which do not support multiple ranges per selection, and they may include this element. If the element has descendants on which the used value of user-select is not none, these descendants must be included in a selection extending across the element. This specification makes no normative requirement about the behavior of the clipboard. however, UAs are encouraged to keep the visual selection consistent with what would get copied to the clipboard when copying. Copying text that does not appear to be selected, or vice versa, is highly confusing to users. Attempting to start a selection in an element where user-select is none, such as by clicking in it or starting a drag in it, must not cause a pre-existing selection to become unselected or to be affected in any way. As user-select is a UI convenience mechanism, not a copy protection mechanism, the UA may provide an alternative way for the user to explicitly select the text even when user-select is none.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "contain",
+          "value": "contain",
+          "type": "value"
+        },
+        {
+          "name": "all",
+          "prose": "The content of the element must be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If the element is selected and the used value of user-select on its parent is all, then the parent must be included in the selection, recursively. If this element has descendants on which the used value of user-select is not all and if a selection is entirely contained in these descendants, then the selection is not extended to include this whole element.",
+          "type": "value",
+          "value": "all"
+        }
+      ],
       "styleDeclaration": [
         "user-select",
         "userSelect"
       ]
     },
-    "accent-color": {
+    {
       "name": "accent-color",
       "value": "auto | <color>",
       "initial": "auto",
@@ -235,12 +509,26 @@
       "computedValue": "the keyword auto or a computed color",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "Represents a UA-chosen color, which should match the accent color of the platform, if any.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "<color>",
+          "prose": "Specifies the color to be used as the accent color.",
+          "type": "value",
+          "value": "<color>"
+        }
+      ],
       "styleDeclaration": [
         "accent-color",
         "accentColor"
       ]
     },
-    "appearance": {
+    {
       "name": "appearance",
       "value": "none | auto | <compat-auto> | <compat-special>",
       "initial": "none",
@@ -250,11 +538,105 @@
       "computedValue": "specified keyword",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The element is rendered following the usual rules of CSS. Replaced elements other than widgets are not affected by this and remain replaced elements. Widgets must not have their native appearance, and instead must have their primitive appearance. See § 7.2.2 Effects of appearance on Decorative Aspects of Elements and § 7.2.3 Effects of appearance on Semantic Aspects of Elements for details.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "auto",
+          "prose": "Elements representing widgets should have the native appearance of that widget, if the properties that disable native appearance for widgets are not in effect. See § 7.2.1 Properties Disabling Native Appearance. The host language is responsible for defining which elements represent which widgets. Elements other than widgets must be rendered as for none.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "<compat-auto>",
+          "value": "searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button",
+          "type": "type"
+        },
+        {
+          "name": "searchfield",
+          "type": "value",
+          "value": "searchfield"
+        },
+        {
+          "name": "textarea",
+          "type": "value",
+          "value": "textarea"
+        },
+        {
+          "name": "push-button",
+          "type": "value",
+          "value": "push-button"
+        },
+        {
+          "name": "slider-horizontal",
+          "type": "value",
+          "value": "slider-horizontal"
+        },
+        {
+          "name": "checkbox",
+          "type": "value",
+          "value": "checkbox"
+        },
+        {
+          "name": "radio",
+          "type": "value",
+          "value": "radio"
+        },
+        {
+          "name": "square-button",
+          "type": "value",
+          "value": "square-button"
+        },
+        {
+          "name": "menulist",
+          "type": "value",
+          "value": "menulist"
+        },
+        {
+          "name": "listbox",
+          "type": "value",
+          "value": "listbox"
+        },
+        {
+          "name": "meter",
+          "type": "value",
+          "value": "meter"
+        },
+        {
+          "name": "progress-bar",
+          "type": "value",
+          "value": "progress-bar"
+        },
+        {
+          "name": "button",
+          "type": "value",
+          "value": "button"
+        },
+        {
+          "name": "<compat-special>",
+          "value": "textfield | menulist-button",
+          "type": "type"
+        },
+        {
+          "name": "textfield",
+          "type": "value",
+          "value": "textfield"
+        },
+        {
+          "name": "menulist-button",
+          "type": "value",
+          "value": "menulist-button"
+        }
+      ],
       "styleDeclaration": [
         "appearance"
       ]
     },
-    "input-security": {
+    {
       "name": "input-security",
       "value": "auto | none",
       "initial": "auto",
@@ -264,12 +646,26 @@
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The UA must not obscure the text in the control, so that it can be read by the user.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "auto",
+          "prose": "The UA should obscure the text in the control, so that it cannot be read by the user.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "input-security",
         "inputSecurity"
       ]
     },
-    "-webkit-user-select": {
+    {
       "name": "-webkit-user-select",
       "styleDeclaration": [
         "-webkit-user-select",
@@ -277,7 +673,7 @@
         "webkitUserSelect"
       ]
     },
-    "-webkit-appearance": {
+    {
       "name": "-webkit-appearance",
       "styleDeclaration": [
         "-webkit-appearance",
@@ -285,26 +681,24 @@
         "webkitAppearance"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<outline-line-style>": {
-      "prose": "<outline-line-style> accepts the same values as <line-style> (CSS Backgrounds 3 § 3.2 Line Patterns: the border-style properties) with the same meaning, except that hidden is not a legal outline style. In addition, the outline-style property accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. As such, this specification does not define how the outline-color and outline-width are incorporated or used (if at all) when rendering auto style outlines. User agents may treat auto as solid."
-    },
-    "<url-set>": {
-      "prose": "<url-set> is a limited version of image-set(), where only <url> and <url-set> can be used in the part of the <image-set-option> sub-production which would normally allow <image>."
-    },
-    "<id>": {
-      "prose": "The <id> value is an ID selector [SELECT]. In response to directional navigation input corresponding to the property, the focus is navigated to the first element in tree order matching the selector. If this refers to the currently focused element, the directional navigation input respective to the nav- property is ignored — there is no need to refocus the same element. If no element matches the selector, the user agent automatically determines which element to navigate the focus to. If the focus is navigated to an element that was not otherwise focusable, it becomes focusable only as the result of this directional navigation, and the :focus pseudo-class matches the element while it is focused as such."
-    },
-    "<target-name>": {
-      "prose": "The <target-name> parameter indicates the target frame for the focus navigation. It is a <string> and it MUST NOT start with the underscore \"_\" character. Error handling: if it does start with an underscore, \"_parent\" navigates to the parent frame, \"_root\" is treated as root, and other values navigate to a frame by that name if it exists. If the specified target frame does not exist, the parameter will be treated as the keyword current, which means to simply use the frame that the element is in. The keyword root indicates that the user agent should target the full window."
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<outline-line-style>",
+      "prose": "<outline-line-style> accepts the same values as <line-style> (CSS Backgrounds 3 § 3.2 Line Patterns: the border-style properties) with the same meaning, except that hidden is not a legal outline style. In addition, the outline-style property accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. As such, this specification does not define how the outline-color and outline-width are incorporated or used (if at all) when rendering auto style outlines. User agents may treat auto as solid.",
+      "type": "type"
     },
-    "<compat-auto>": {
-      "value": "searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button"
+    {
+      "name": "<id>",
+      "prose": "The <id> value is an ID selector [SELECT]. In response to directional navigation input corresponding to the property, the focus is navigated to the first element in tree order matching the selector. If this refers to the currently focused element, the directional navigation input respective to the nav- property is ignored — there is no need to refocus the same element. If no element matches the selector, the user agent automatically determines which element to navigate the focus to. If the focus is navigated to an element that was not otherwise focusable, it becomes focusable only as the result of this directional navigation, and the :focus pseudo-class matches the element while it is focused as such.",
+      "type": "type"
     },
-    "<compat-special>": {
-      "value": "textfield | menulist-button"
+    {
+      "name": "<target-name>",
+      "prose": "The <target-name> parameter indicates the target frame for the focus navigation. It is a <string> and it MUST NOT start with the underscore \"_\" character. Error handling: if it does start with an underscore, \"_parent\" navigates to the parent frame, \"_root\" is treated as root, and other values navigate to a frame by that name if it exists. If the specified target frame does not exist, the parameter will be treated as the keyword current, which means to simply use the frame that the element is in. The keyword root indicates that the user agent should target the full window.",
+      "type": "type"
     }
-  }
+  ]
 }