diff --git a/src/extensions/default/WebPlatformDocs/InlineDocsViewer.html b/src/extensions/default/MDNDocs/InlineDocsViewer.html similarity index 78% rename from src/extensions/default/WebPlatformDocs/InlineDocsViewer.html rename to src/extensions/default/MDNDocs/InlineDocsViewer.html index 27fe5a1661f..fb9a2a6b3f3 100644 --- a/src/extensions/default/WebPlatformDocs/InlineDocsViewer.html +++ b/src/extensions/default/MDNDocs/InlineDocsViewer.html @@ -1,4 +1,4 @@ -
+

{{propName}}

{{{summary}}}
diff --git a/src/extensions/default/WebPlatformDocs/InlineDocsViewer.js b/src/extensions/default/MDNDocs/InlineDocsViewer.js similarity index 93% rename from src/extensions/default/WebPlatformDocs/InlineDocsViewer.js rename to src/extensions/default/MDNDocs/InlineDocsViewer.js index b615151e2a8..25372e10507 100644 --- a/src/extensions/default/WebPlatformDocs/InlineDocsViewer.js +++ b/src/extensions/default/MDNDocs/InlineDocsViewer.js @@ -22,7 +22,7 @@ */ /** - * Inline widget to display WebPlatformDocs JSON data nicely formatted + * Inline widget to display MDNDocs JSON data nicely formatted */ define(function (require, exports, module) { 'use strict'; @@ -42,22 +42,23 @@ define(function (require, exports, module) { var SCROLL_LINE_HEIGHT = 40; // Load CSS - ExtensionUtils.loadStyleSheet(module, "WebPlatformDocs.less"); + ExtensionUtils.loadStyleSheet(module, "MDNDocs.less"); /** * @param {!string} cssPropName * @param {!{SUMMARY:string, URL:string, VALUES:?Array.<{value:string, description:string}>}} cssPropDetails */ - function InlineDocsViewer(cssPropName, cssPropDetails) { + function InlineDocsViewer(PropName, PropDetails) { InlineWidget.call(this); var templateVars = { - propName : cssPropName, - summary : cssPropDetails.SUMMARY, - propValues : cssPropDetails.VALUES || [], - url : cssPropDetails.URL, - Strings : Strings + propName : PropName, + summary : PropDetails.SUMMARY, + fullscreenSummary : !(PropDetails.VALUES && PropDetails.VALUES.length), + propValues : PropDetails.VALUES || [], + url : PropDetails.URL, + Strings : Strings }; var html = Mustache.render(inlineEditorTemplate, templateVars); diff --git a/src/extensions/default/WebPlatformDocs/LICENSE b/src/extensions/default/MDNDocs/LICENSE similarity index 100% rename from src/extensions/default/WebPlatformDocs/LICENSE rename to src/extensions/default/MDNDocs/LICENSE diff --git a/src/extensions/default/WebPlatformDocs/WebPlatformDocs.less b/src/extensions/default/MDNDocs/MDNDocs.less similarity index 97% rename from src/extensions/default/WebPlatformDocs/WebPlatformDocs.less rename to src/extensions/default/MDNDocs/MDNDocs.less index d5401dc3d2c..aad6887e3f9 100644 --- a/src/extensions/default/WebPlatformDocs/WebPlatformDocs.less +++ b/src/extensions/default/MDNDocs/MDNDocs.less @@ -144,6 +144,16 @@ } } +.fullscreen-summary { + .css-prop-summary { + width: 95%; + } + + .css-prop-values, .divider-holder { + display: none; + } +} + .content-bottom { // Used to pull bottom edge of .css-prop-defn down below its two floated children. // Also prevents .more-info (after us in DOM order) from overlapping the float: right content. diff --git a/src/extensions/default/MDNDocs/README.md b/src/extensions/default/MDNDocs/README.md new file mode 100644 index 00000000000..c47f38dae0e --- /dev/null +++ b/src/extensions/default/MDNDocs/README.md @@ -0,0 +1,3 @@ +# Updating the Docs +* Use the Node script [scrape-mdn](https://github.com/mozilla/brackets/tree/master/src/extensions/extra/MDNDocs/tools/scrape-mdn) to update the `css.json` and `html.json` contents: +* Both the JSON files will have URL and Summary, but for css.json we need to have possible values of each css property along with small description, so use this Node script [MDNDocsScrapper](https://github.com/saurabh95/MDNDocsScrapper), this takes css.json as input and then creates a newcss.json with the desired content. diff --git a/src/extensions/default/MDNDocs/css.json b/src/extensions/default/MDNDocs/css.json new file mode 100644 index 00000000000..87c2e32a0cc --- /dev/null +++ b/src/extensions/default/MDNDocs/css.json @@ -0,0 +1,8322 @@ +{ + "-moz-appearance (-webkit-appearance, appearance)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance", + "SUMMARY": "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.", + "VALUES": [{ + "value": "", + "description": "<appearance> is one of the following keywords:" + }] + }, + "-moz-binding": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-binding", + "SUMMARY": "The -moz-binding CSS property is used by Mozilla-based applications to attach an XBL binding to a DOM element.", + "VALUES": [{ + "value": "<uri>", + "description": "The URI for the XBL binding (including the fragment identifier)." + }, { + "value": "none", + "description": "No XBL binding is applied to the element." + }] + }, + "-moz-border-bottom-colors": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-bottom-colors", + "SUMMARY": "In Mozilla applications like Firefox, the -moz-border-bottom-colors CSS property sets a list of colors for the bottom border.", + "VALUES": [{ + "value": "<color>", + "description": "Specifies the color of a line of pixels of the bottom border. transparent is valid. See <color> values for possible units." + }, { + "value": "none", + "description": "Default, no colors are drawn or border-color is used, if specified." + }] + }, + "-moz-border-left-colors": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-left-colors", + "SUMMARY": "In Mozilla applications like Firefox, the -moz-border-left-colors CSS property sets a list of colors for the left border.", + "VALUES": [{ + "value": "<color>", + "description": "Specifies the color of a line of pixels of the left border. transparent is valid. See <color> values for possible units." + }, { + "value": "none", + "description": "Default, no colors are drawn or border-color is used, if specified." + }] + }, + "-moz-border-right-colors": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-right-colors", + "SUMMARY": "In Mozilla applications like Firefox, the -moz-border-right-colors CSS property sets a list of colors for the right border.", + "VALUES": [{ + "value": "<color>", + "description": "Specifies the color of a line of pixels of the right border. transparent is valid. See <color> values for possible units." + }, { + "value": "none", + "description": "Default, no colors are drawn or border-color is used, if specified." + }] + }, + "-moz-border-top-colors": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-top-colors", + "SUMMARY": "In Mozilla applications like Firefox, the -moz-border-top-colors CSS property sets a list of colors for the top border.", + "VALUES": [{ + "value": "<color>", + "description": "Specifies the color of a line of pixels of the top border. transparent is valid. See <color> values for possible units." + }, { + "value": "none", + "description": "Default, no colors are drawn or border-color is used, if specified." + }] + }, + "-moz-box-ordinal-group": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-box-ordinal-group", + "SUMMARY": "Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group.", + "VALUES": [{ + "value": "", + "description": "Values must be integers greater than zero. The default value for this property is 1." + }] + }, + "-moz-cell": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-cell", + "SUMMARY": "Don't use this value! Use the cursor value cell instead.", + "VALUES": [] + }, + "-moz-float-edge": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge", + "SUMMARY": "The non-standard -moz-float-edge CSS property specifies whether the height and width properties of the element include the margin, border, or padding thickness.", + "VALUES": [{ + "value": "border-box", + "description": "The height and width properties include the content, padding and border but not the margin." + }, { + "value": "content-box", + "description": "The height and width properties include the content, but not the padding, border or margin." + }, { + "value": "margin-box", + "description": "The height and width properties include the content, padding, border and margin." + }, { + "value": "padding-box", + "description": "The height and width properties include the content and padding but not the border or margin." + }] + }, + "-moz-force-broken-image-icon": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-force-broken-image-icon", + "SUMMARY": "-moz-force-broken-image-icon is an extended CSS property. The value 1 forces a broken image icon even if the image has an alt attribute. When the value 0 is used the image will act as usual and only display the alt attribute.", + "VALUES": [{ + "value": "<integer>", + "description": "A value of 1 means that the broken image icon is even shown if the image has an alt attribute. A value of 0 only displays the alt attribute." + }] + }, + "-moz-image-rect": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-rect", + "SUMMARY": "This value for CSS background-image lets you use a portion of a larger image as a background. This allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.", + "VALUES": [{ + "value": "<uri>", + "description": "The URI of the image from which to take the sub-image." + }, { + "value": "top", + "description": "The top edge, specified as a <length>, of the sub-image within the specified image." + }, { + "value": "right", + "description": "The right edge, specified as a <length>, of the sub-image within the specified image." + }, { + "value": "bottom", + "description": "The bottom edge, specified as a <length>, of the sub-image within the specified image." + }, { + "value": "left", + "description": "The left edge, specified as a <length>, of the sub-image within the specified image." + }] + }, + "-moz-image-region": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-region", + "SUMMARY": "For certain XUL elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image. This allows elements to use different pieces of the same image to improve performance.", + "VALUES": [{ + "value": "auto", + "description": "Automatically defines the region of the image to use." + }, { + "value": "<shape>", + "description": "A shape defining the part of the image to use. The rect() function defines a rectangle to use as shape. Its parameters define the top, right, bottom, and left offsets of the edges of the image, in this order." + }] + }, + "-moz-orient": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient", + "SUMMARY": "The -moz-orient CSS property specifies the orientation of the element to which it's applied.", + "VALUES": [{ + "value": "inline", + "description": "The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes." + }, { + "value": "block", + "description": "The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes." + }, { + "value": "horizontal", + "description": "The element is rendered horizontally." + }, { + "value": "vertical", + "description": "The element is rendered vertically." + }] + }, + "-moz-outline-radius": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius", + "SUMMARY": "In Mozilla applications like Firefox, the -moz-outline-radius CSS property can be used to give outlines rounded corners. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.", + "VALUES": [{ + "value": "<length>", + "description": "See <length> for possible values." + }, { + "value": "<percentage>", + "description": "A <percentage>; see border-radius for details." + }] + }, + "-moz-outline-radius-bottomleft": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-bottomleft", + "SUMMARY": "The -moz-outline-radius-bottomleft CSS property sets the rounding of the bottom-left corner of the outline within Mozilla applications.", + "VALUES": [] + }, + "-moz-outline-radius-bottomright": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-bottomright", + "SUMMARY": "The -moz-outline-radius-bottomright CSS property sets the rounding of the bottom-right corner of the outline within Mozilla applications.", + "VALUES": [] + }, + "-moz-outline-radius-topleft": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-topleft", + "SUMMARY": "The -moz-outline-radius-topleft CSS property sets the rounding of the top-left corner of the outline within Mozilla applications.", + "VALUES": [] + }, + "-moz-outline-radius-topright": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-topright", + "SUMMARY": "The -moz-outline-radius-topright CSS property sets the rounding of the top-right corner of the outline within Mozilla applications.", + "VALUES": [] + }, + "-moz-stack-sizing": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-stack-sizing", + "SUMMARY": "-moz-stack-sizing is an extended CSS property. Normally, a stack will change its size so that all of its child elements are completely visible. For example, moving a child of the stack far to the right will widen the stack so the child remains visible.", + "VALUES": [{ + "value": "stretch-to-fit", + "description": "The child will influence the stack's size." + }, { + "value": "ignore", + "description": "The stack won't consider this child when calculating the its size." + }] + }, + "-moz-text-blink": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-text-blink", + "SUMMARY": "The -moz-text-blink non-standard Mozilla CSS extension specifies the blink mode.", + "VALUES": [{ + "value": "none", + "description": "Produces no blinking." + }, { + "value": "blink", + "description": "Text blinks. Note that not blinking the text is one technique to satisfy checkpoint 3.3 of WAI-UAAG." + }] + }, + "-moz-user-focus": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-focus", + "SUMMARY": "The -moz-user-focus CSS property is used to indicate whether the element can have the focus.", + "VALUES": [{ + "value": "ignore", + "description": "The element does not accept the keyboard focus and will be skipped in the tab order." + }, { + "value": "normal", + "description": "The element can accept the keyboard focus." + }, { + "value": "select-after", + "description": "?" + }, { + "value": "select-before", + "description": "?" + }, { + "value": "select-menu", + "description": "?" + }, { + "value": "select-same", + "description": "?" + }, { + "value": "select-all", + "description": "?" + }, { + "value": "none", + "description": "?" + }] + }, + "-moz-user-input": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-input", + "SUMMARY": "In Mozilla applications, -moz-user-input determines if an element will accept user input. A similar property user-focus was proposed in early drafts of a predecessor of the CSS3 UI specification but was rejected by the working group.", + "VALUES": [{ + "value": "none", + "description": "The element does not respond to user input, and it does not become :active." + }, { + "value": "enabled", + "description": "The element accepts user input. For textboxes, this is the default behavior." + }, { + "value": "disabled", + "description": "The element does not accept user input. However, this is not the same as setting disabled to true, in that the element is drawn normally." + }] + }, + "-moz-user-modify": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-modify", + "SUMMARY": "The -moz-user-modify property has no effect.", + "VALUES": [{ + "value": "read-only", + "description": "Default value. Contents are read-only." + }, { + "value": "read-write", + "description": "The user is able to read and write contents." + }, { + "value": "write-only", + "description": "The user is able to edit the content, but not to read it." + }] + }, + "-moz-window-shadow": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-window-shadow", + "SUMMARY": "The -moz-window-shadow CSS property specifies whether a window will have a shadow. It only works on Mac OS X.", + "VALUES": [{ + "value": "default", + "description": "The window will have a shadow with the default window shadow style." + }, { + "value": "menu ", + "description": "The window will have the shadow style that's appropriate for menus." + }, { + "value": "tooltip ", + "description": "The window will have the shadow style that's appropriate for tooltips." + }, { + "value": "sheet ", + "description": "The window will have the shadow style that's appropriate for sheet windows." + }, { + "value": "none", + "description": "The window won't have a shadow." + }] + }, + "-ms-overflow-style": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style", + "SUMMARY": "-ms-overflow-style is a proprietary CSS property, specific to Internet Explorer and Microsoft Edge, which controls the behavior of scrollbars when an element's content overflows.", + "VALUES": [{ + "value": "auto", + "description": "Initial value. Same as inherit." + }, { + "value": "none", + "description": "Scrollbars are never displayed, although the element can still be scrolled if the element's content overflows." + }, { + "value": "scrollbar", + "description": ""Traditional" scrollbars are displayed if the element's content overflows. "Traditional" scrollbars don't auto-hide and never overlap the element's content. Accordingly, the dimensions of the layout area for the content are reduced by the girth of the scrollbar(s)." + }, { + "value": "-ms-autohiding-scrollbar", + "description": "Auto-hiding scrollbars are used if the element's content overflows. Auto-hiding scrollbars are displayed during scrolling or shortly after the pointer interacts with the page, and are hidden shortly after scrolling and pointer interaction stops. When they are visible, auto-hiding scrollbars overlap the element's content." + }] + }, + "-webkit-border-before": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-border-before", + "SUMMARY": "Technical review completed.", + "VALUES": [{ + "value": "<'border-width'>", + "description": "See border-width" + }, { + "value": "<'border-style'>", + "description": "See border-style" + }, { + "value": "<'color'>", + "description": "See color" + }] + }, + "-webkit-box-reflect": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect", + "SUMMARY": "The -webkit-box-reflect CSS property lets you reflect the content of an element in one specific direction.", + "VALUES": [{ + "value": "above, below, right, left", + "description": "Are keywords indicating in which direction the reflection is to happen." + }, { + "value": "<length>", + "description": "Indicates the size of the reflection." + }, { + "value": "<image>", + "description": "Describes the mask to be applied to the reflection." + }] + }, + "-webkit-mask-attachment": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-attachment", + "SUMMARY": "If a -webkit-mask-image is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.", + "VALUES": [{ + "value": "scroll", + "description": "If scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image." + }, { + "value": "fixed", + "description": "If fixed is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport." + }] + }, + "-webkit-mask-box-image": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image", + "SUMMARY": "-webkit-mask-box-image sets the mask image for an element's border box.", + "VALUES": [{ + "value": "<mask-box-image>", + "description": "<uri> | <gradient> | none" + }, { + "value": "<top> <right> <bottom> <left>", + "description": "<length> | <percentage>" + }, { + "value": "<x-repeat> <y-repeat>", + "description": "repeat | stretch | round" + }, { + "value": "<uri>", + "description": "The location of the image resource to be used as a mask image." + }, { + "value": "<gradient>", + "description": "A -webkit-gradient function to be used as a mask image." + }, { + "value": "none", + "description": "Used to specify that a border box is to have no mask image." + }, { + "value": "<length>", + "description": "The size of the mask image's offset. See <length> for possible units." + }, { + "value": "<percentage>", + "description": "The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height)." + }, { + "value": "repeat", + "description": "The mask image is repeated as many times as is necessary to span the border box. May include a partial image if the mask image does not divide evenly into the border box." + }, { + "value": "stretch", + "description": " The mask image is stretched to contain the border box exactly." + }, { + "value": "round", + "description": " The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box." + }] + }, + "-webkit-mask-composite": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite", + "SUMMARY": "The -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another.", + "VALUES": [{ + "value": "clear", + "description": "Overlapping pixels in the source mask image and the destination mask image are cleared." + }, { + "value": "copy", + "description": "The source mask image replaces the destination mask image." + }, { + "value": "source-over", + "description": "The source mask image is rendered over the destination mask image." + }, { + "value": "source-in", + "description": "Overlapping pixels in the source mask image and the destination mask image are replaced by the pixels of the source mask image; all other pixels are cleared." + }, { + "value": "source-out", + "description": "Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered." + }, { + "value": "source-atop", + "description": "The pixels of the destination mask image are rendered. The pixels of the source mask image are rendered only if they overlap a nontransparent portion of the destination mask image. This causes the source mask image to have no effect." + }, { + "value": "destination-over", + "description": "The destination mask image is rendered over the source mask image." + }, { + "value": "destination-in", + "description": "Overlapping pixels in the source mask image and the destination mask image remain the pixels of the destination mask image; all other pixels are cleared." + }, { + "value": "destination-out", + "description": "Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered." + }, { + "value": "destination-atop", + "description": "The pixels of the source mask image are rendered. The pixels of the destination mask image are rendered only if they overlap a nontransparent portion of the destination mask image. This causes the destination mask image to have no effect." + }, { + "value": "xor", + "description": "Overlapping pixels in the source mask image and the destination mask image become fully transparent if they are both fully opaque." + }] + }, + "-webkit-mask-position-x": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-position-x", + "SUMMARY": "The -webkit-mask-position-x CSS property sets the initial horizontal position of a mask image.", + "VALUES": [{ + "value": "<length-percentage>", + "description": "A length indicating the position of the left edge of the image relative to the box's left padding edge. Percentages are calculated against the horizontal dimension of the box padding area. That means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of 100% means the right edge of the image is aligned with the box's right padding edge." + }, { + "value": "left", + "description": "Equivalent to 0%." + }, { + "value": "center", + "description": "Equivalent to 50%." + }, { + "value": "right", + "description": "Equivalent to 100%." + }] + }, + "-webkit-mask-position-y": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-position-y", + "SUMMARY": "The -webkit-mask-position-y CSS property sets the initial vertical position of a mask image.", + "VALUES": [{ + "value": "<length-percentage>", + "description": "A length indicating the position of the top side of the image relative to the box's top padding edge. Percentages are calculated against the vertical dimension of the box padding area. A value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom padding edge." + }, { + "value": "top", + "description": "Equivalent to 0%." + }, { + "value": "bottom", + "description": "Equivalent to 100%." + }, { + "value": "center", + "description": "Equivalent to 50%." + }] + }, + "-webkit-mask-repeat-x": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-repeat-x", + "SUMMARY": "The -webkit-mask-repeat-x property specifies whether and how a mask image is repeated (tiled) horizontally.", + "VALUES": [{ + "value": "repeat", + "description": "The mask image is repeated both horizontally and vertically." + }, { + "value": "no-repeat", + "description": "The mask image is not repeated; only one copy of the mask image is drawn. The remainder of the masked element's content is not displayed." + }, { + "value": "repeat", + "description": "The mask image is repeated both horizontally and vertically." + }, { + "value": "space", + "description": "The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The mask-position property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn't enough room to display one image." + }, { + "value": "round", + "description": "As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px." + }] + }, + "-webkit-mask-repeat-y": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-repeat-y", + "SUMMARY": "The -webkit-mask-repeat-y property specifies whether and how a mask image is repeated (tiled) vertically.", + "VALUES": [{ + "value": "repeat", + "description": "The mask image is repeated vertically." + }, { + "value": "no-repeat", + "description": "The mask image is not repeated vertically; only one copy of the mask image is drawn in vertical direction. The vertical remainder of the masked element's content is not displayed." + }, { + "value": "repeat", + "description": "The mask image is repeated vertically." + }, { + "value": "space", + "description": "The image is repeated as much as possible without clipping. The first and last images are pinned to the top and bottom edge of the element, and whitespace is distributed evenly between the images. The mask-position property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn't enough room to display one image." + }, { + "value": "round", + "description": "As the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. They will then compress to a height of 225px." + }] + }, + "-webkit-overflow-scrolling": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling", + "SUMMARY": "The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for the given element.", + "VALUES": [{ + "value": "auto", + "description": "Use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen." + }, { + "value": "touch", + "description": "Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context." + }] + }, + "-webkit-print-color-adjust": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust", + "SUMMARY": "The -webkit-print-color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine.", + "VALUES": [{ + "value": "economy", + "description": "Normal behavior.  Background colors and images are only printed if the user explicitly allows it in their browser's print settings dialog." + }, { + "value": "exact", + "description": "Background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden." + }] + }, + "-webkit-tap-highlight-color": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color", + "SUMMARY": "-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.", + "VALUES": [{ + "value": "", + "description": "A <color value>." + }] + }, + "-webkit-text-fill-color": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color", + "SUMMARY": "The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used.", + "VALUES": [{ + "value": "<color>", + "description": "The foreground fill color of the element's text content." + }] + }, + "-webkit-text-stroke": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke", + "SUMMARY": "The -webkit-text-stroke CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-color.", + "VALUES": [{ + "value": "<length>", + "description": "The width of the stroke." + }, { + "value": "<color>", + "description": "The color of the stroke." + }] + }, + "-webkit-text-stroke-color": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-color", + "SUMMARY": "The -webkit-text-stroke-color CSS property specifies the stroke color of characters of text. If this property is not set, the value of the color property is used.", + "VALUES": [{ + "value": "<color>", + "description": "The color of the stroke." + }] + }, + "-webkit-text-stroke-width": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width", + "SUMMARY": "The -webkit-text-stroke-width CSS property specifies the width of the stroke for text.", + "VALUES": [{ + "value": "<line-width>", + "description": "The width of the stroke." + }] + }, + "-webkit-touch-callout": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout", + "SUMMARY": "The -webkit-touch-callout CSS property controls the display of the default callout shown when you touch and hold a touch target.", + "VALUES": [{ + "value": "default", + "description": "The default callout is displayed." + }, { + "value": "none", + "description": "The callout is disabled." + }] + }, + ":-moz-broken": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-broken", + "SUMMARY": "The :-moz-broken CSS pseudo-class matches elements representing broken image links.", + "VALUES": [] + }, + ":-moz-drag-over": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-drag-over", + "SUMMARY": "The :-moz-drag-over CSS pseudo-class is used to edit an element when a drag-over event is called on it.", + "VALUES": [] + }, + ":-moz-first-node": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-first-node", + "SUMMARY": "The :-moz-first-node CSS pseudo-class represents any element that is the first child node of some other element. It differs from :first-child because it does not match a first child element with (non-whitespace) text before it.", + "VALUES": [] + }, + ":-moz-focusring": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring", + "SUMMARY": "The :-moz-focusring CSS pseudo-class is similar to the :focus pseudo-class, but it only matches an element if the element is currently focused and a focus ring or other indicator should be drawn for that element. If :-moz-focusring matches, then :focus also matches, but the converse is not always true - it depends on whether the user agent has focus ring drawing enabled and how the element was focused. Whether the user agent has focus ring drawing enabled can depend on things like the settings of the operating system the user is using, so the precise behavior of this pseudo-class can vary from platform to platform depending on each platforms' particular focus best practices (defaults) or user modified settings.", + "VALUES": [] + }, + ":-moz-full-screen-ancestor": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-full-screen-ancestor", + "SUMMARY": "The :-moz-full-screen-ancestor CSS pseudo-class applies to all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in their own documents. However, those elements' ancestors have this class applied to them.", + "VALUES": [] + }, + ":-moz-handler-blocked": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-handler-blocked", + "SUMMARY": ":-moz-handler-blocked matches elements that cannot be displayed because their handlers have been blocked.", + "VALUES": [] + }, + ":-moz-handler-crashed": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-handler-crashed", + "SUMMARY": ":-moz-handler-crashed matches elements that cannot be displayed because the plugin responsible for drawing them has crashed.", + "VALUES": [] + }, + ":-moz-handler-disabled": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-handler-disabled", + "SUMMARY": ":-moz-handler-disabled matches elements that cannot be displayed because their handlers have been disabled by the user.", + "VALUES": [] + }, + ":-moz-last-node": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-last-node", + "SUMMARY": "The :-moz-last-node CSS pseudo-class matches an element that is the last child node of some other element. It differs from :last-child because it does not match a last child element with (non-whitespace) text after it.", + "VALUES": [] + }, + ":-moz-loading": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-loading", + "SUMMARY": "The :-moz-loading CSS pseudo-class matches elements, which can't be displayed, because they have not started loading, such as images that haven't started to arrive yet. Note that images that are in the process of loading are not matched by this pseudo-class.", + "VALUES": [] + }, + ":-moz-locale-dir(ltr)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-locale-dir(ltr)", + "SUMMARY": "The :-moz-locale-dir(ltr) CSS pseudo-class matches an element if the user interface is being displayed left-to-right. This is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to \"ltr\".", + "VALUES": [] + }, + ":-moz-locale-dir(rtl)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-locale-dir(rtl)", + "SUMMARY": "The :-moz-locale-dir(rtl) CSS pseudo-class matches an element if the user interface is being displayed right-to-left. This is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to \"rtl\".", + "VALUES": [] + }, + ":-moz-lwtheme": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-lwtheme", + "SUMMARY": "The :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.", + "VALUES": [] + }, + ":-moz-lwtheme-brighttext": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-lwtheme-brighttext", + "SUMMARY": "The :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.", + "VALUES": [] + }, + ":-moz-lwtheme-darktext": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-lwtheme-darktext", + "SUMMARY": "The :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.", + "VALUES": [] + }, + ":-moz-only-whitespace": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace", + "SUMMARY": "The :-moz-only-whitespace CSS pseudo-class matches an element that has no child nodes at all or empty text nodes or text nodes that have only white-space in them. Only when there are element nodes or text nodes with one or more characters inside the element, the element doesn't match this pseudo-class anymore.", + "VALUES": [] + }, + ":-moz-placeholder": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder", + "SUMMARY": "The :-moz-placeholder pseudo-class represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-class to change the placeholder text color.", + "VALUES": [] + }, + ":-moz-submit-invalid": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-submit-invalid", + "SUMMARY": "The :-moz-submit-invalid CSS pseudo-class represents any submit button on forms whose contents aren't valid based on their validation constraints.", + "VALUES": [] + }, + ":-moz-suppressed": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-suppressed", + "SUMMARY": "The :-moz-suppressed CSS pseudo-class matches elements representing images that were not loaded because loading images from that site has been blocked.", + "VALUES": [] + }, + ":-moz-system-metric(images-in-menus)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(images-in-menus)", + "SUMMARY": "The :-moz-system-metric(images-in-menus) CSS pseudo-class matches an element if the computer's user interface supports images in menus.", + "VALUES": [] + }, + ":-moz-system-metric(mac-graphite-theme)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(mac-graphite-theme)", + "SUMMARY": ":-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the \"Graphite\" appearance in the \"Appearance\" prefpane of the Mac OS X System Preferences.", + "VALUES": [] + }, + ":-moz-system-metric(scrollbar-end-backward)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-end-backward)", + "SUMMARY": "The :-moz-system-metric(scrollbar-end-backward) CSS pseudo-class will match an element if the computer's user interface includes a backward arrow button at the end of scrollbars.", + "VALUES": [] + }, + ":-moz-system-metric(scrollbar-end-forward)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-end-forward)", + "SUMMARY": "The :-moz-system-metric(scrollbar-end-forward) CSS pseudo-class will match an element if the computer's user interface includes a forward arrow button at the end of scrollbars.", + "VALUES": [] + }, + ":-moz-system-metric(scrollbar-start-backward)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-start-backward)", + "SUMMARY": "The :-moz-system-metric(scrollbar-start-backward) CSS pseudo-class will match an element if the computer's user interface includes a backward arrow button at the start of scrollbars.", + "VALUES": [] + }, + ":-moz-system-metric(scrollbar-start-forward)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-start-forward)", + "SUMMARY": "The :-moz-system-metric(scrollbar-start-forward) CSS pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.", + "VALUES": [] + }, + ":-moz-system-metric(scrollbar-thumb-proportional)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)", + "SUMMARY": "The :-moz-system-metric(scrollbar-thumb-proportional) CSS pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.", + "VALUES": [] + }, + ":-moz-system-metric(touch-enabled)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(touch-enabled)", + "SUMMARY": "The :-moz-system-metric(touch-enabled) CSS pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.", + "VALUES": [] + }, + ":-moz-system-metric(windows-default-theme)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-system-metric(windows-default-theme)", + "SUMMARY": "The :-moz-system-metric(windows-default-theme) CSS pseudo-class matches an element if the user is currently using one of the following themes in Windows: Luna, Royale, Zune, or Aero (i.e., Vista Basic, Vista Standard, or Aero Glass). This will exclude Windows Classic themes as well as third-party themes.", + "VALUES": [] + }, + ":-moz-tree-cell": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-cell", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-tree-cell-text": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-cell-text", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-tree-cell-text(hover)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-cell-text(hover)", + "SUMMARY": "The :-moz-tree-cell-text(hover) CSS pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.", + "VALUES": [] + }, + ":-moz-tree-column": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-column", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-tree-drop-feedback": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-drop-feedback", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-tree-image": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-image", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-tree-indentation": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-indentation", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-tree-line": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-line", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-tree-progressmeter": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-progressmeter", + "SUMMARY": "Activated when the type attribute is set to progressmeter.", + "VALUES": [] + }, + ":-moz-tree-row": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-row", + "SUMMARY": "The ::-moz-tree-row CSS pseudo-element is used to select rows and apply styles to tree rows.", + "VALUES": [] + }, + ":-moz-tree-row(hover)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-row(hover)", + "SUMMARY": "The :-moz-tree-row(hover) CSS pseudo-class will match an element if the mouse cursor is presently hovering over a tree row.", + "VALUES": [] + }, + ":-moz-tree-separator": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-separator", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-tree-twisty": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-twisty", + "SUMMARY": "Activated by the properties attribute.", + "VALUES": [] + }, + ":-moz-ui-invalid": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid", + "SUMMARY": "The :-moz-ui-invalid CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, in certain circumstances. This pseudo-class is applied according to the following rules:", + "VALUES": [] + }, + ":-moz-ui-valid": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-valid", + "SUMMARY": "The :-moz-ui-valid CSS pseudo-class represents any validated form element whose value validates correctly based on its validation constraints.", + "VALUES": [] + }, + ":-moz-user-disabled": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-user-disabled", + "SUMMARY": "The :-moz-user-disabled CSS pseudo-class matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.", + "VALUES": [] + }, + ":-moz-window-inactive": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-window-inactive", + "SUMMARY": "The :-moz-window-inactive CSS pseudo-class matches any element while it's in an inactive window.", + "VALUES": [] + }, + ":-ms-input-placeholder": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-ms-input-placeholder", + "SUMMARY": "The non-standard proprietary :-ms-input-placeholder pseudo-class represents the placeholder text of a form element. This allows web developers and theme designers to customize the appearance of placeholder text. This pseudo-class is only supported by Internet Explorer and Microsoft Edge.", + "VALUES": [] + }, + ":-webkit-autofill": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill", + "SUMMARY": "The :-webkit-autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser.", + "VALUES": [] + }, + "::-moz-list-bullet": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-list-bullet", + "SUMMARY": "The non-standard ::-moz-list-bullet Mozilla CSS pseudo-element is used to style the bullet of a list element.", + "VALUES": [] + }, + "::-moz-list-number": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-list-number", + "SUMMARY": "The ::-moz-list-number CSS pseudo-element lets you customize the appearance of numbers on list items (<li>) occurring in ordered lists (<ol>).", + "VALUES": [] + }, + "::-moz-page": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-page", + "SUMMARY": "The ::-moz-page CSS pseudo-element applies to an individual page in print or print preview.", + "VALUES": [] + }, + "::-moz-page-sequence": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-page-sequence", + "SUMMARY": "The ::-moz-page-sequence CSS pseudo-element represents the background of the print preview.", + "VALUES": [] + }, + "::-moz-placeholder": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder", + "SUMMARY": "The ::-moz-placeholder pseudo-element represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-element to change the placeholder text color.", + "VALUES": [] + }, + "::-moz-progress-bar": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar", + "SUMMARY": "The ::-moz-progress-bar CSS pseudo-element applies to the area of an HTML <progress> element that represents the amount of progress that has happened so far. This lets you, for example, change the color of progress bars.", + "VALUES": [] + }, + "::-moz-range-progress": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-progress", + "SUMMARY": "The ::-moz-range-progress CSS pseudo-element represents the portion of the \"track\" (the groove in which the indicator aka thumb slides) of an <input> of type=\"range\", which corresponds to values lower than the value currently selected by the thumb.", + "VALUES": [] + }, + "::-moz-range-thumb": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-thumb", + "SUMMARY": "The ::-moz-range-thumb CSS pseudo-element represents the thumb, the virtual knob the user can move within the groove, or track, of an <input> of type=\"range\" to alter its numerical value.", + "VALUES": [] + }, + "::-moz-range-track": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track", + "SUMMARY": "The ::-moz-range-track CSS pseudo-element represents the track, that is the groove in which the indicator of an <input> of type=\"range\" slides.", + "VALUES": [] + }, + "::-moz-scrolled-page-sequence": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-scrolled-page-sequence", + "SUMMARY": "The ::-moz-scrolled-page-sequence CSS pseudo-element represents the background of the print preview.", + "VALUES": [] + }, + "::-ms-browse": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-browse", + "SUMMARY": "The ::-ms-browse CSS pseudo-element represents the button to open the file picker of an <input> of type=\"file\".", + "VALUES": [] + }, + "::-ms-check": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-check", + "SUMMARY": "The ::-ms-check CSS pseudo-element represents the checkmark of an <input> of type=\"checkbox\" or type=\"radio\".", + "VALUES": [] + }, + "::-ms-clear": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear", + "SUMMARY": "The ::-ms-clear CSS pseudo-element represents a button (the \"clear button\") at the edge of a text <input> which clears away the current value of the <input> element. This button and pseudo-element are non-standard, supported only in Internet Explorer 10 and 11 and Edge 12+, hence the vendor prefix (`-ms` for Microsoft). The clear button is only shown on focused, non-empty text <input> elements.", + "VALUES": [] + }, + "::-ms-expand": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-expand", + "SUMMARY": "Technical review completed.", + "VALUES": [] + }, + "::-ms-fill": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-fill", + "SUMMARY": "The ::-ms-fill CSS pseudo-element represents the filled-in portion of a <progress> element. This pseudo-element is non-standard and specific to Internet Explorer 10+, hence the vendor prefix.", + "VALUES": [] + }, + "::-ms-fill-lower": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-fill-lower", + "SUMMARY": "The ::-ms-fill-lower CSS pseudo-element represents the portion of the \"track\" (the groove in which the indicator aka thumb slides) of an <input> of type=\"range\", which corresponds to values lower than the value currently selected by the thumb.", + "VALUES": [] + }, + "::-ms-fill-upper": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-fill-upper", + "SUMMARY": "The ::-ms-fill-upper CSS pseudo-element represents the portion of the \"track\" (the groove in which the indicator aka thumb slides) of an <input> of type=\"range\", which corresponds to values greater than the value currently selected by the thumb.", + "VALUES": [] + }, + "::-ms-reveal": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-reveal", + "SUMMARY": "The ::-ms-reveal CSS pseudo-element is used to display and apply styles to the \"password reveal button\" usually displayed at the edge of an <input> element of type=\"password\" in Internet Explorer 10+. The password reveal button displays the value of the password field in plain text (instead of the usual obscured-for-privacy all-asterisks display). This button and the pseudo-element are non-standard and specific to Internet Explorer 10+, hence the vendor prefix.", + "VALUES": [] + }, + "::-ms-thumb": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-thumb", + "SUMMARY": "Technical review completed.", + "VALUES": [] + }, + "::-ms-track": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-track", + "SUMMARY": "Technical review completed.", + "VALUES": [] + }, + "::-ms-value": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-value", + "SUMMARY": "The ::-ms-value pseudo-element applies rules to the value/content of an <input> or a <select>. Only certain properties can be set on this pseudo-element; others will have no effect.", + "VALUES": [] + }, + "::-webkit-file-upload-button": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-file-upload-button", + "SUMMARY": "The ::-webkit-file-upload-button CSS pseudo-element represents the button of an <input> of type=\"file\".", + "VALUES": [] + }, + "::-webkit-inner-spin-button": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button", + "SUMMARY": "The ::-webkit-inner-spin-button CSS pseudo-element is used to style the inner part of the spinner button of number picker input elements.", + "VALUES": [] + }, + "::-webkit-input-placeholder": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-input-placeholder", + "SUMMARY": "Technical review completed. Editorial review completed.", + "VALUES": [] + }, + "::-webkit-meter-bar": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-bar", + "SUMMARY": "The ::-webkit-meter-bar pseudo-class sets the styling for the background of the element. Container of the <meter> gauge that holds the value.", + "VALUES": [] + }, + "::-webkit-meter-even-less-good-value": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-even-less-good-value", + "SUMMARY": "The ::-webkit-meter-even-less-good-value gives a red color to the meter element when the value and the optimum attributes fall outside the low-high range but in opposite zones. For example, value < low < high < optimum or value> high > low > optimum.", + "VALUES": [] + }, + "::-webkit-meter-inner-element": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-inner-element", + "SUMMARY": "::-webkit-meter-inner-element is a proprietary WebKit CSS pseudo-element for selecting and applying styles to to the outer containing element of a <meter> element. Additional markup to render the meter element as read-only.", + "VALUES": [] + }, + "::-webkit-meter-optimum-value": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-optimum-value", + "SUMMARY": "The ::-webkit-meter-optimum-value pseudo-element styles the meter element when its value is inside the low-high range.", + "VALUES": [] + }, + "::-webkit-meter-suboptimum-value": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-suboptimum-value", + "SUMMARY": "The ::-webkit-meter-suboptimum-value gives a yellow color to the meter element when the value attribute falls outside of the low-high range.", + "VALUES": [] + }, + "::-webkit-outer-spin-button": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-outer-spin-button", + "SUMMARY": "The ::-webkit-outer-spin-button CSS pseudo-element is used to style the outer part of the spinner button of number picker input elements.", + "VALUES": [] + }, + "::-webkit-progress-bar": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar", + "SUMMARY": "The ::-webkit-progress-bar CSS pseudo-element represents the entire bar of a <progress> element. Normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the ::-webkit-progress-value pseudo-element. It is a child of the ::-webkit-progress-inner-element pseudo-element and the parent of the ::-webkit-progress-value pseudo-element.", + "VALUES": [] + }, + "::-webkit-progress-inner-element": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-inner-element", + "SUMMARY": "The ::-webkit-progress-inner-element CSS pseudo-element represents the outermost, container pseudo-element of the <progress> element. It is the parent of the ::-webkit-progress-bar pseudo-element.", + "VALUES": [] + }, + "::-webkit-progress-value": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value", + "SUMMARY": "The ::-webkit-progress-value CSS pseudo-element represents the filled-in portion of the bar of a <progress> element. It is a child of the ::-webkit-progress-bar pseudo-element.", + "VALUES": [] + }, + "::-webkit-scrollbar": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar", + "SUMMARY": "The ::-webkit-scrollbar CSS pseudo-element affects the style of the scrollbar of an element.", + "VALUES": [] + }, + "::-webkit-search-cancel-button": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button", + "SUMMARY": "The ::-webkit-search-cancel-button CSS pseudo-element represents a button (the \"cancel button\") at the edge of an <input> of type=\"search\" which clears away the current value of the <input> element. This button and pseudo-element are non-standard, supported only in WebKit and Blink, hence the vendor prefix. The clear button is only shown on non-empty search <input> elements.", + "VALUES": [] + }, + "::-webkit-search-results-button": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-results-button", + "SUMMARY": "The ::-webkit-search-results-button CSS pseudo-element represents a button (the \"search results button\") at the left edge of an <input> of type=\"search\" which when clicked displays a menu which allows the user to choose from previous recent search queries. This button and pseudo-element are non-standard, supported only in WebKit and Blink, hence the vendor prefix. The search results button is only shown on search <input> elements which have a results attribute.", + "VALUES": [] + }, + "::-webkit-slider-runnable-track": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track", + "SUMMARY": "Technical review completed. Editorial review completed.", + "VALUES": [] + }, + "::-webkit-slider-thumb": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-thumb", + "SUMMARY": "Technical review completed. Editorial review completed.", + "VALUES": [] + }, + "::after (:after)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::after", + "SUMMARY": "The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.", + "VALUES": [] + }, + "::backdrop": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop", + "SUMMARY": "Each element in the top layer's stack has a ::backdrop pseudo-element. This pseudo-element is a box rendered immediately below the element (and above the element below the element in the stack, if any), within the same top layer.", + "VALUES": [] + }, + "::before (:before)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::before", + "SUMMARY": "::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.", + "VALUES": [] + }, + "::first-letter (:first-letter)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter", + "SUMMARY": "The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.", + "VALUES": [] + }, + "::first-line (:first-line)": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line", + "SUMMARY": "The ::first-line CSS pseudo-element applies styles only to the first line of an element. The amount of the text on the first line depends of numerous factors, like the width of the element, width of the document, and the font size of the text. As all pseudo-elements, ::first-line does not match any real HTML element.", + "VALUES": [] + }, + "::grammar-error": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::grammar-error", + "SUMMARY": "Editorial review completed.", + "VALUES": [] + }, + "::marker": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::marker", + "SUMMARY": "The ::marker CSS pseudo-element represents the marker box of a list item (e.g. the bullet point or item number).", + "VALUES": [] + }, + "::placeholder": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder", + "SUMMARY": "The ::placeholder CSS pseudo-element represents the placeholder text of a form element. This allows web developers and theme designers to customize the appearance of placeholder text.", + "VALUES": [] + }, + "::selection": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::selection", + "SUMMARY": "The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g. selected with the mouse or another pointing device) by the user.", + "VALUES": [] + }, + "::spelling-error": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::spelling-error", + "SUMMARY": "Editorial review completed.", + "VALUES": [] + }, + ":active": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:active", + "SUMMARY": "The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user pressing the mouse button and releasing it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.", + "VALUES": [] + }, + ":any": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:any", + "SUMMARY": "The :any() pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.", + "VALUES": [{ + "value": "selector", + "description": "A selector. This may be a simple selector or a multiple selector comprised of CSS 3 simple selectors and may include the descendant combinator." + }] + }, + ":any-link": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link", + "SUMMARY": "The :any-link CSS pseudo-class represents an element that acts as the source anchor of a hyperlink independent of whether it has been visited, that is, it matches every <a>, <area> or <link> elements with an href attribute. So, it matches all elements that match :link or :visited.", + "VALUES": [] + }, + ":checked": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:checked", + "SUMMARY": "The :checked CSS pseudo-class selector represents any radio (<input type=\"radio\">), checkbox (<input type=\"checkbox\">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.", + "VALUES": [{ + "value": "input[type="radio"]:checked", + "description": "Represents all radio buttons on the page that are checked" + }, { + "value": "input[type="checkbox"]:checked", + "description": "Represents all checkboxes on the page that are checked" + }, { + "value": "option:checked", + "description": "Represents all select's options on the page that are selected" + }] + }, + ":default": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:default", + "SUMMARY": "The :default CSS pseudo-class represents any user interface element that is the default among a group of similar elements.", + "VALUES": [] + }, + ":dir()": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:dir", + "SUMMARY": "The :dir CSS pseudo-class matches elements based on the directionality of the text contained in it. In HTML, the direction is determined by the dir attribute. For other document types there may be other document methods for determining the language.", + "VALUES": [] + }, + ":disabled": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled", + "SUMMARY": "The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.", + "VALUES": [{ + "value": "input:disabled", + "description": "Selects all disabled inputs" + }, { + "value": "select.country:disabled", + "description": "Targets a select element with class country that is disabled" + }] + }, + ":empty": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:empty", + "SUMMARY": "The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.", + "VALUES": [] + }, + ":enabled": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled", + "SUMMARY": "The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.", + "VALUES": [] + }, + ":first": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:first", + "SUMMARY": "The :first @page CSS pseudo-class describes the styling of the first page when printing a document.", + "VALUES": [] + }, + ":first-child": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child", + "SUMMARY": "The :first-child CSS pseudo-class represents any element that is the first child element of its parent.", + "VALUES": [] + }, + ":first-of-type": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type", + "SUMMARY": "The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.", + "VALUES": [] + }, + ":focus": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus", + "SUMMARY": "The :focus CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).", + "VALUES": [] + }, + ":focus-within": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within", + "SUMMARY": "The :focus-within CSS pseudo-class matches any element that :focus pseudo-class matches or that has a descendant that the :focus pseudo-class matches. (This includes descendants in shadow trees.)", + "VALUES": [] + }, + ":fullscreen": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen", + "SUMMARY": "The :fullscreen CSS pseudo-class applies to any element that's currently being displayed in full-screen mode. It selects not only to the top level element, but to the whole stack of elements that appears.", + "VALUES": [] + }, + ":has": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:has", + "SUMMARY": "The :has() CSS pseudo-class represents an element if any of the selectors, relative to the:scope of the given element, passed as parameters, matches at least one element. The :has() pseudo-class takes a selector list as an argument.", + "VALUES": [] + }, + ":hover": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:hover", + "SUMMARY": "The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.", + "VALUES": [] + }, + ":in-range": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range", + "SUMMARY": "The :in-range CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits.", + "VALUES": [] + }, + ":indeterminate": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate", + "SUMMARY": "The :indeterminate CSS pseudo-class represents:", + "VALUES": [] + }, + ":invalid": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid", + "SUMMARY": "The :invalid CSS pseudo-class represents any <input> or <form> element whose content fails to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors.", + "VALUES": [] + }, + ":lang": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:lang", + "SUMMARY": "The :lang CSS pseudo-class matches elements based on the language the element is determined to be in. In HTML, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as HTTP headers).", + "VALUES": [] + }, + ":last-child": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child", + "SUMMARY": "The :last-child CSS pseudo-class represents any element that is the last child element of its parent.", + "VALUES": [] + }, + ":last-of-type": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type", + "SUMMARY": "The :last-of-type CSS pseudo-class represents the last sibling with the given element name in the list of children of its parent element.", + "VALUES": [] + }, + ":left": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:left", + "SUMMARY": "The :left CSS page pseudo-class matches any left page when printing a page. It allows to describe the styling of left-side pages.", + "VALUES": [] + }, + ":link": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:link", + "SUMMARY": "The :link CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to appropriately style links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.", + "VALUES": [] + }, + ":not()": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:not", + "SUMMARY": "The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector.", + "VALUES": [] + }, + ":nth-child": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child", + "SUMMARY": "The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.", + "VALUES": [{ + "value": "tr:nth-child(2n+1)", + "description": "Represents the odd rows of an HTML table." + }, { + "value": "tr:nth-child(odd)", + "description": "Represents the odd rows of an HTML table." + }, { + "value": "tr:nth-child(2n)", + "description": "Represents the even rows of an HTML table." + }, { + "value": "tr:nth-child(even)", + "description": "Represents the even rows of an HTML table." + }, { + "value": "span:nth-child(0n+1)", + "description": "Represents a span element which is the first child of its parent; this is the same as the :first-child selector." + }, { + "value": "span:nth-child(1)", + "description": "Equivalent to the above." + }, { + "value": "span:nth-child(-n+3)", + "description": "Matches if the element is one of the first three children of its parent and also a span." + }] + }, + ":nth-last-child": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child", + "SUMMARY": "The :nth-last-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element.", + "VALUES": [{ + "value": "tr:nth-last-child(-n+4)", + "description": "Matches the last four rows of an HTML table." + }, { + "value": "span:nth-last-child(even)", + "description": "Matches the even elements in their parent element, starting at the last element and working backward." + }] + }, + ":nth-last-of-type": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type", + "SUMMARY": "The :nth-last-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name after it in the document tree, for a given positive or zero value for n, and has a parent element.", + "VALUES": [] + }, + ":nth-of-type": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type", + "SUMMARY": "The :nth-of-type(an+b) CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element.", + "VALUES": [] + }, + ":only-child": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child", + "SUMMARY": "The :only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.", + "VALUES": [] + }, + ":only-of-type": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type", + "SUMMARY": "The :only-of-type CSS pseudo-class represents any element that has no siblings of the given type.", + "VALUES": [] + }, + ":optional": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:optional", + "SUMMARY": "The :optional CSS pseudo-class represents any <input> or <textarea> element that does not have the required attribute set on it. This allows forms to easily indicate optional fields, and to style them accordingly.", + "VALUES": [] + }, + ":out-of-range": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range", + "SUMMARY": "The :out-of-range CSS pseudo-class matches when an element has its value attribute outside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is outside the range limits. A value can be outside of a range if it is either smaller or larger than maximum and minimum set values.", + "VALUES": [] + }, + ":placeholder-shown": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown", + "SUMMARY": "The :placeholder-shown pseudo-class represents any form element displaying placeholder text.", + "VALUES": [] + }, + ":read-only": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only", + "SUMMARY": "The :read-only CSS pseudo-class matches when an element is not writable by the user.", + "VALUES": [] + }, + ":read-write": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write", + "SUMMARY": "The :read-write CSS pseudo-class matches when an element is editable by user like text input elements.", + "VALUES": [] + }, + ":required": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:required", + "SUMMARY": "The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.", + "VALUES": [] + }, + ":right": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:right", + "SUMMARY": "The :right CSS page pseudo-class matches any right page when printing a page. It allows to describe the styling of right-side page.", + "VALUES": [] + }, + ":root": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:root", + "SUMMARY": "The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.", + "VALUES": [] + }, + ":scope": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:scope", + "SUMMARY": "The :scope CSS pseudo-class matches the elements that are a reference point for selectors to match against. In HTML, a new reference point can be defined using the scoped attribute of the <style>. If no such attribute is used on an HTML page, the reference point is the <html> element.", + "VALUES": [] + }, + ":target": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:target", + "SUMMARY": "The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.", + "VALUES": [] + }, + ":valid": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:valid", + "SUMMARY": "The :valid CSS pseudo-class represents any <input> or <form> element whose content validates correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.", + "VALUES": [] + }, + ":visited": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:visited", + "SUMMARY": "The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/angle", + "SUMMARY": "The <angle> CSS data type represents angle values. It is used, for example, in rotate and skew transforms.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape", + "SUMMARY": "The <basic-shape> type can be specified using basic shape functions. When using this syntax to define shapes, the reference box is defined by each property that uses <basic-shape> values. The coordinate system for the shape has its origin on the top-left corner of the reference box with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box.", + "VALUES": [{ + "value": "inset()", + "description": "\n 
inset( <shape-arg>{1,4} [round <border-radius>]? )
\n\n

Defines an inset rectangle.

\n\n

When all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.

\n\n

The optional <border-radius> argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.

\n\n

A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area.

\n " + }, { + "value": "polygon()", + "description": "\n 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
\n\n

<fill-rule> represents the filling rule used to determine the interior of the polygon. Possible values are nonzero and evenodd. Default value when omitted is nonzero.

\n\n

Each pair argument in the list represents xi and yi - the x and y axis coordinates of the ith vertex of the polygon.

\n " + }, { + "value": "circle()", + "description": "\n 
circle( [<shape-radius>]? [at <position>]? )
\n\n

The <shape-radius> argument represents r, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2).

\n\n

The <position> argument defines the center of the circle. This defaults to center if omitted.

\n " + }, { + "value": "ellipse()", + "description": "\n 
ellipse( [<shape-radius>{2}]? [at <position>]? )
\n\n

The <shape-radius> arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box.

\n\n

The position argument defines the center of the ellipse. This defaults to center if omitted.

\n " + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode", + "SUMMARY": "The <blend-mode> type is a collection of keywords describing blend modes.", + "VALUES": [{ + "value": "normal", + "description": "\n

The final color is the top color, whatever the bottom color may be.
\n The effect is similar to two opaque pieces of paper overlapping.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: normal;\n}
\n
\n\n

\n " + }, { + "value": "multiply", + "description": "\n

The final color is the result of multiplying the top and bottom colors.
\n A black layer leads to a black final layer, and a white layer leads to no change.
\n The effect is similar to two images printed on transparent film overlapping.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: multiply;\n}
\n
\n\n

\n " + }, { + "value": "screen", + "description": "\n

The final color is the result of inverting the colors, multiplying them and inverting that color value.
\n A black layer leads to no change, and a white layer leads to a white final layer.
\n The effect is similar to two images shone onto a projection screen.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: screen;\n}
\n
\n\n

\n " + }, { + "value": "overlay", + "description": "The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
\n This blend mode is equivalent to hard-light but with the layers swapped.\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: overlay;\n}
\n
\n\n

\n " + }, { + "value": "darken", + "description": "\n

The final color is a color composed of the darkest values per color channel.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: darken;\n}
\n
\n\n

\n " + }, { + "value": "lighten", + "description": "\n

The final color is a color composed of the lightest values per color channel.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: lighten;\n}
\n
\n\n

\n " + }, { + "value": "color-dodge", + "description": "\n

The final color is the result of dividing the bottom color by the inverse of the top color.
\n A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.
\n This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: color-dodge;\n}
\n
\n\n

\n " + }, { + "value": "color-burn", + "description": "\n

This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
\n A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.
\n This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: color-burn;\n}
\n
\n\n

\n " + }, { + "value": "hard-light", + "description": "\n

The final color is the result of multiply if the top color is darker, or screen if the top color is lighter.
\n This blend mode is equivalent to overlay but with the layers swapped.
\n The effect is similar to shining a harsh spotlight on the backdrop.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: hard-light;\n}
\n
\n\n

\n " + }, { + "value": "soft-light", + "description": "\n

The final color is similar to hard-light, but softer.
\n This blend mode behaves similar to hard-light.
\n The effect is similar to shining a diffused spotlight on the backdrop.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: soft-light;\n}
\n
\n\n

\n " + }, { + "value": "difference", + "description": "\n

The final color is the result of subtracting the darker of the two colors from the lighter one.
\n A black layer has no effect, while a white layer inverts the other layer's color.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: difference;\n}
\n
\n\n

\n " + }, { + "value": "exclusion", + "description": "\n

The final color is similar to difference, but with less contrast.
\n As with difference,  a black layer has no effect, while a white layer inverts the other layer's color.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: exclusion;\n}
\n
\n\n

\n " + }, { + "value": "hue", + "description": "\n

The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: hue;\n}
\n
\n\n

\n " + }, { + "value": "saturation", + "description": "\n

The final color has the saturation of the top color, while using the hue and luminosity of the bottom color.
\n A pure gray backdrop, having no saturation, will have no effect.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: saturation;\n}
\n
\n\n

\n " + }, { + "value": "color", + "description": "\n

The final color has the hue and saturation of the top color, while using the luminosity of the bottom color.
\n The effect preserves gray levels and can be used to colorize the foreground.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: color;\n}
\n
\n\n

\n " + }, { + "value": "luminosity", + "description": "\n

The final color has the luminosity of the top color, while using the hue and saturation of the bottom color.
\n This blend mode is equivalent to color, but with the layers swapped.

\n\n
\n 
<div id="div"></div>
\n\n 
#div {\n    width: 300px;\n    height: 300px;\n    background: url('https://mdn.mozillademos.org/files/8543/br.png'),\n                url('https://mdn.mozillademos.org/files/8545/tr.png');\n    background-blend-mode: luminosity;\n}
\n
\n\n

\n " + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value", + "SUMMARY": "The <color> CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:", + "VALUES": [{ + "value": "Hexadecimal notation #RRGGBB, #RGB", + "description": "\n
    \n
  • "#", followed by six hexadecimal characters (0-9, A-F), where the first two digits represent the red part, the second two the green part and the last two the blue part.
    • \n
  • "#", followed by three hexadecimal characters (0-9, A-F), where the first digit represents the red part, the second the green part and the last one the blue part.
    • \n
\n The three-digit RGB notation (#RGB) and the six-digit form (#RRGGBB) are equal, for example #f03 and #ff0033 represent the same color." + }, { + "value": "Functional Notation rgb(R,G,B)", + "description": ""rgb", followed by three <integer> or three <percentage> values, plus an optional alpha value that specifies the transparency of the color (this can be a <number> between 0 and 1, or a <percentage>)
\n The integer number 255 corresponds to 100%, and to F or FF in the hexadecimal notation." + }, { + "value": "Hexadecimal notation #RRGGBBAA and #RGBA", + "description": "\n
    \n
  • "#", followed by eight hexadecimal characters (0-9, A-F), where the first two digits represent the red part, the second two the green part, the third two the blue part and the last two the transparency.
    • \n
  • "#", followed by four hexadecimal characters (0-9, A-F), where the first digit represents the red part, the second the green part, the third one the blue part and the last one the transparency.
    • \n
\n The four-digit RGB notation (#RGBA) and the eight-digit form (#RRGGBBAA) are equal, for example, #f038 and #ff003388 represent the same color." + }, { + "value": "using the rgba() functional notation.", + "description": "RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.
\n a means opacity: 0=transparent; 1=opaque;" + }, { + "value": "ActiveBorder", + "description": "Active window border." + }, { + "value": "ActiveCaption", + "description": "Active window caption. Should be used with CaptionText as foreground color." + }, { + "value": "AppWorkspace", + "description": "Background color of multiple document interface." + }, { + "value": "Background", + "description": "Desktop background." + }, { + "value": "ButtonFace", + "description": "Face background color for 3-D elements that appear 3-D due to one layer of surrounding border.  Should be used with the ButtonText foreground color." + }, { + "value": "ButtonHighlight", + "description": "The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border." + }, { + "value": "ButtonShadow", + "description": "The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border." + }, { + "value": "ButtonText", + "description": "Text on push buttons. Should be used with the ButtonFace or ThreeDFace background color." + }, { + "value": "CaptionText", + "description": "Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color." + }, { + "value": "GrayText", + "description": "Grayed (disabled) text." + }, { + "value": "Highlight", + "description": "Item(s) selected in a control.  Should be used with the HighlightText foreground color." + }, { + "value": "HighlightText", + "description": "Text of item(s) selected in a control. Should be used with the Highlight background color." + }, { + "value": "InactiveBorder", + "description": "Inactive window border." + }, { + "value": "InactiveCaption", + "description": "Inactive window caption. Should be used with the InactiveCaptionText foreground color." + }, { + "value": "InactiveCaptionText", + "description": "Color of text in an inactive caption.  Should be used with the InactiveCaption background color." + }, { + "value": "InfoBackground", + "description": "Background color for tooltip controls. Should be used with the InfoText foreground color." + }, { + "value": "InfoText", + "description": "Text color for tooltip controls.  Should be used with the InfoBackground background color." + }, { + "value": "Menu", + "description": "Menu background. Should be used with the MenuText or  -moz-MenuBarText foreground color." + }, { + "value": "MenuText", + "description": "Text in menus. Should be used with the Menu background color." + }, { + "value": "Scrollbar", + "description": "Background color of scroll bars." + }, { + "value": "ThreeDDarkShadow", + "description": "The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border." + }, { + "value": "ThreeDFace", + "description": "The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color." + }, { + "value": "ThreeDHighlight", + "description": "The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
\n concentric layers of surrounding border." + }, { + "value": "ThreeDLightShadow", + "description": "The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
\n concentric layers of surrounding border." + }, { + "value": "ThreeDShadow", + "description": "The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border." + }, { + "value": "Window", + "description": "Window background. Should be used with the WindowText foreground color." + }, { + "value": "WindowFrame", + "description": "Window frame." + }, { + "value": "WindowText", + "description": "Text in windows. Should be used with the Window background color." + }, { + "value": "-moz-ButtonDefault", + "description": "The border color that goes around buttons that represent the default action for a dialog box." + }, { + "value": "-moz-ButtonHoverFace", + "description": "The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color." + }, { + "value": "-moz-ButtonHoverText", + "description": "The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it).  Should be used with the -moz-ButtonHoverFace background color." + }, { + "value": "-moz-CellHighlight", + "description": "Background color for selected item in a tree widget.  Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight." + }, { + "value": "-moz-CellHighlightText", + "description": "Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText." + }, { + "value": "-moz-Combobox", + "description": " Background color for combo-boxes.  Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead." + }, { + "value": "-moz-ComboboxText", + "description": " Text color for combo-boxes. Should be used with the -moz-Combobox background color.  In versions prior to 1.9.2, use -moz-FieldText instead." + }, { + "value": "-moz-Dialog", + "description": "Background color for dialog boxes.  Should be used with the -moz-DialogText foreground color." + }, { + "value": "-moz-DialogText", + "description": "Text color for dialog boxes. Should be used with the -moz-Dialog background color." + }, { + "value": "-moz-dragtargetzone", + "description": "-moz-EvenTreeRow" + }, { + "value": " Background color for even-numbered rows in a tree.  Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field.  See also -moz-OddTreeRow.", + "description": "-moz-Field" + }, { + "value": "Text field background color.  Should be used with the -moz-FieldText foreground color.", + "description": "-moz-FieldText" + }, { + "value": "Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.", + "description": "-moz-html-CellHighlight" + }, { + "value": " Background color for highlighted item in HTML <select>s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.", + "description": "-moz-html-CellHighlightText" + }, { + "value": " Text color for highlighted items in HTML <select>s.  Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.", + "description": "-moz-mac-accentdarkestshadow" + }, { + "value": "-moz-mac-accentdarkshadow", + "description": "-moz-mac-accentface" + }, { + "value": "-moz-mac-accentlightesthighlight", + "description": "-moz-mac-accentlightshadow" + }, { + "value": "-moz-mac-accentregularhighlight", + "description": "-moz-mac-accentregularshadow" + }, { + "value": "-moz-mac-chrome-active", + "description": "" + }, { + "value": "-moz-mac-chrome-inactive", + "description": "" + }, { + "value": "-moz-mac-focusring", + "description": "-moz-mac-menuselect" + }, { + "value": "-moz-mac-menushadow", + "description": "-moz-mac-menutextselect" + }, { + "value": "-moz-MenuHover", + "description": "Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color." + }, { + "value": "-moz-MenuHoverText", + "description": "Text color for hovered menu items. Often similar to HighlightText.  Should be used with the -moz-MenuHover background color." + }, { + "value": "-moz-MenuBarText", + "description": " Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background." + }, { + "value": "-moz-MenuBarHoverText", + "description": "Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background." + }, { + "value": "-moz-nativehyperlinktext", + "description": " Default platform hyperlink color." + }, { + "value": "-moz-OddTreeRow", + "description": " Background color for odd-numbered rows in a tree.  Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow." + }, { + "value": "-moz-win-communicationstext", + "description": " Should be used for text in objects with -moz-appearance: -moz-win-communications-toolbox;." + }, { + "value": "-moz-win-mediatext", + "description": " Should be used for text in objects with -moz-appearance: -moz-win-media-toolbox." + }, { + "value": "-moz-activehyperlinktext", + "description": "User's preference for text color of active links. Should be used with the default document background color." + }, { + "value": "-moz-default-background-color", + "description": " User's preference for the document background color." + }, { + "value": "-moz-default-color", + "description": " User's preference for the text color." + }, { + "value": "-moz-hyperlinktext", + "description": "User's preference for the text color of unvisited links. Should be used with the default document background color." + }, { + "value": "-moz-visitedhyperlinktext", + "description": "User's preference for the text color of visited links. Should be used with the default document background color." + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident", + "SUMMARY": "The <custom-ident> CSS data value denotes an arbitrary user-defined string used as an identifier. It is case-sensitive and in each context, several values are excluded to prevent misinterpretations.", + "VALUES": [{ + "value": "animation-name", + "description": "Forbids the global CSS values, unset, initial, and inherit, and the value none." + }, { + "value": "counter-reset", + "description": "counter-increment" + }, { + "value": "Forbids the global CSS values, unset, initial, and inherit, and the value none.", + "description": "@counter-style" + }, { + "value": "list-style-type", + "description": "Forbids the global CSS values, unset, initial, and inherit, as well as the values none, inline, and outside. Also quite a few predefined values are implemented by the different browsers: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, and disclosure-close." + }, { + "value": "grid-row-start
\n grid-row-end
\n grid-column-start
\n grid-column-end", + "description": "Forbids the span value." + }, { + "value": "will-change", + "description": "Forbids the global CSS values, unset, initial, inherit, as well as the values will-change, auto, scroll-position, and contents." + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value", + "SUMMARY": "The <flex> CSS data type denotes a flexible length within a grid container, which is declared as dimension with the unit fr.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/frequency", + "SUMMARY": "The <frequency> CSS data type denotes a frequency dimension, like the pitch of a speaking voice.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/gradient", + "SUMMARY": "The <gradient> CSS data type denotes a CSS <image> made of a progressive transition between two or more colors. A CSS gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/image", + "SUMMARY": "The <image> CSS data type represents a 2D image. There are two kinds of images in CSS: plain static images, often referenced using a URL, and dynamically-generated images like gradients or representations of parts of the tree.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/integer", + "SUMMARY": "The <integer> CSS data type denotes an integer number, positive or negative. There isn't any associated unit with the value. An integer consists of one or several decimal digits, 0 to 9, optionally preceded by one single + or - sign.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/length", + "SUMMARY": "The <length> CSS data type denotes distance measurements. It is a <number> immediately followed by a length unit (px, em, pc, in, mm, …). Like for any CSS dimension, there is no space between the unit literal and the number. The length unit is optional after the <number> 0.", + "VALUES": [{ + "value": "em", + "description": "This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.\n
This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often have values expressed in em.
\n " + }, { + "value": "ex", + "description": "This unit represents the x-height of the element's font. On fonts with the 'x' letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts." + }, { + "value": "ch", + "description": "This unit represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's font." + }, { + "value": "ic", + "description": "Equal to the used advance measure of the “水” (CJK water ideograph, U+6C34) glyph found in the font used to render it." + }, { + "value": "rem", + "description": "This unit represents the font-size of the root element (e.g. the font-size of the <html> element). When used on the font-size on this root element, it represents its initial value.\n
This unit is practical in creating perfectly scalable layout. If not supported by the targeted browsers, such layout can be achieved using the em unit, though this is slightly more complex.
\n " + }, { + "value": "lh", + "description": "Equal to the computed value of the line-height property of the element on which it is used, converted to an absolute length." + }, { + "value": "rlh", + "description": "Equal to the computed value of line-height property on the root element, converted to an absolute length. When specified on the font-size or line-height properties of the root element, the rlh units refer to the properties' initial value." + }, { + "value": "vh", + "description": "1/100th of the height of the viewport." + }, { + "value": "vw", + "description": "1/100th of the width of the viewport." + }, { + "value": "vi", + "description": "Equal to 1% of the size of the initial containing block in the direction of the root element’s inline axis." + }, { + "value": "vb", + "description": "Equal to 1% of the size of the initial containing block in the direction of the root element’s block axis." + }, { + "value": "vmin", + "description": "1/100th of the minimum value of the height and the width of the viewport." + }, { + "value": "vmax", + "description": "1/100th of the maximum value of the height and the width of the viewport." + }, { + "value": "px", + "description": "Relative to the viewing device.
\n For screen display, typically one device pixel (dot) of the display.
\n For printers and very high resolution screens one CSS pixel implies multiple device pixels, so that the number of pixel per inch stays around 96." + }, { + "value": "mm", + "description": "One millimeter." + }, { + "value": "q", + "description": "A quarter of a millimeter (1/40th of a centimeter)." + }, { + "value": "cm", + "description": "One centimeter (10 millimeters)." + }, { + "value": "in", + "description": "One inch (2.54 centimeters)." + }, { + "value": "pt", + "description": "One point (1/72th of an inch)." + }, { + "value": "pc", + "description": "One pica (12 points)." + }, { + "value": "mozmm ", + "description": "An experimental unit which attempts to render at exactly one millimeter regardless of the size or resolution of the display. This is rarely actually what you want, but may be useful in particular for mobile devices." + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/number", + "SUMMARY": "The <number> CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/percentage", + "SUMMARY": "The <percentage> CSS data types represent a percentage value. Many CSS properties can take percentage values, often to define sizes in terms of parent objects. Percentages are formed by a <number> immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/position_value", + "SUMMARY": "The <position> CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.", + "VALUES": [{ + "value": "", + "description": "/* 1-value syntax */\nkeyword /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */\n<length> or <percentage> /* The position on the x-axis, 50% for the y-axis */\n\n/* 2-value syntax */\nkeyword keyword /* A keyword for each direction, the order is irrelevant */\nkeyword value /* The value is the offset for the edge defined by the keyword */\n" + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/ratio", + "SUMMARY": "The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values. It is a strictly positive <integer> followed by a slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <integer>. There may be spaces before and after the solidus.", + "VALUES": [] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/resolution", + "SUMMARY": "The <resolution> CSS data types, used in media queries, denotes the density of pixels of an output device, its resolution. It is a <number> immediately followed by a unit of resolution (dpi, dpcm, ...). Like for any CSS dimension, there is no space between the unit literal and the number.", + "VALUES": [{ + "value": "dpi", + "description": "This unit represents the number of dots per inch. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm." + }, { + "value": "dpcm", + "description": "This unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi." + }, { + "value": "dppx", + "description": "This unit represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, that corresponds to the default resolution of images displayed in CSS as defined by image-resolution." + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-box", + "SUMMARY": "Shapes can be specified for shape-outside with a <shape-box> type, which is a reference to edges in the CSS Box Model.", + "VALUES": [{ + "value": "\n border-box", + "description": "\n

Defines the shape enclosed by the outside border edge. This shape follows the normal border radius shaping rules for the outside of the border.

\n " + }, { + "value": "\n padding-box", + "description": "\n

Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

\n " + }, { + "value": "\n content-box", + "description": "\n

Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.

\n " + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/shape", + "SUMMARY": "The <shape> CSS data type denotes the specific form of a region. This region is used to define on which part of an element some properties like clip do apply.", + "VALUES": [{ + "value": "top", + "description": "Is a <length> representing the offset for the top of the rectangle relative to the top border of the element's box.</length>" + }, { + "value": "right", + "description": "Is a <length> } representing the offset for the right of the rectangle relative to the left border of the element's box.</length>" + }, { + "value": "bottom", + "description": "Is a <length> representing the offset for the bottom of the rectangle relative to the top border of the element's box.</length>" + }, { + "value": "left", + "description": "Is a <length> representing the offset for the left of the rectangle relative to the left border of the element's box.</length>" + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function", + "SUMMARY": "The <single-transition-timing-function> CSS data type denotes a mathematical function that describes how fast one-dimensional values change during transitions or animations. This in essence lets you establish an acceleration curve, so that the speed of the animation can vary over its duration. These functions are often called easing functions.", + "VALUES": [{ + "value": "x1, y1, x2, y2", + "description": "Are <number> values representing the abscissas and ordinates of the P1 and P2 points defining the cubic Bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid." + }, { + "value": "number_of_steps", + "description": "Is a strictly positive <integer> representing the amount of equidistant treads composing the stepping function." + }, { + "value": "direction", + "description": "Is a keyword indicating if it the function is left- or right-continuous:\n
    \n
  • start denotes a left-continuous function, so that the first step happens when the animation begins;
    • \n
  • end denotes a right-continuous function, so that the last step happens when the animation ends.
    • \n
\n end is the default." + }] + }, + "": { + "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/string", + "SUMMARY": "The <string> CSS data type represents a string. It is formed by a Unicode characters delimited by either double (\") or single (') quotes. A double quoted string cannot contain double quotes unless escaped using a backslash (\\). The same practice applies for single quoted strings, they cannot contain single quotes unless escaped using a backslash (\\). The backslash character must be escaped to be part of the string.", + "VALUES": [] + }, + "