src/extensions/default/MDNDocs/css.json - master - githubmirror/brackets

src/extensions/default/MDNDocs/css.json
8 322 строки1 MB
Saurabh Kathpalia
Scrapped QuickDocs data for css and html from MDN to css.json and html.json (#13268)
07 апр 2017, 21:27
07 апр 2017, 21:27cf1c051
{
    "-moz-appearance (-webkit-appearance, appearance)": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance",
        "SUMMARY": "The <code>-moz-appearance</code> 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": "<code>&lt;appearance&gt;</code> is one of the following keywords:"
        }]
    },
    "-moz-binding": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-binding",
        "SUMMARY": "The <code>-moz-binding</code> CSS property is used by Mozilla-based applications to attach an <a href=\"https://developer.mozilla.org/en-US/docs/XBL\">XBL</a> binding to a DOM element.",
        "VALUES": [{
            "value": "&lt;uri&gt;",
            "description": "The URI for the XBL binding (including the fragment identifier)."
        }, {
            "value": "<code>none</code>",
            "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 <code>-moz-border-bottom-colors</code> CSS property sets a list of colors for the bottom border.",
        "VALUES": [{
            "value": "&lt;color&gt;",
            "description": "Specifies the color of a line of pixels of the bottom border. <code>transparent</code> is valid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> values for possible units."
        }, {
            "value": "none",
            "description": "Default, no colors are drawn or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-left-colors\" title=\"In Mozilla applications like Firefox, the -moz-border-left-colors CSS property sets a list of colors for the left border.\"><code>-moz-border-left-colors</code></a> CSS property sets a list of colors for the left border.",
        "VALUES": [{
            "value": "&lt;color&gt;",
            "description": "Specifies the color of a line of pixels of the left border. <code>transparent</code> is valid. See <a title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\"><code>&lt;color&gt;</code></a> values for possible units."
        }, {
            "value": "none",
            "description": "Default, no colors are drawn or <a title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\"><code>border-color</code></a> 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-right-colors\" title=\"In Mozilla applications like Firefox, the -moz-border-right-colors CSS property sets a list of colors for the right border.\"><code>-moz-border-right-colors</code></a> CSS property sets a list of colors for the right border.",
        "VALUES": [{
            "value": "&lt;color&gt;",
            "description": "Specifies the color of a line of pixels of the right border. <code>transparent</code> is valid. See <a title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\"><code>&lt;color&gt;</code></a> values for possible units."
        }, {
            "value": "none",
            "description": "Default, no colors are drawn or <a title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\"><code>border-color</code></a> 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-top-colors\" title=\"In Mozilla applications like Firefox, the -moz-border-top-colors CSS property sets a list of colors for the top border.\"><code>-moz-border-top-colors</code></a> CSS property sets a list of colors for the top border.",
        "VALUES": [{
            "value": "&lt;color&gt;",
            "description": "Specifies the color of a line of pixels of the top border. <code>transparent</code> is valid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> values for possible units."
        }, {
            "value": "none",
            "description": "Default, no colors are drawn or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> 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": "<em>Don't use this value! </em> Use the <code>cursor</code> value <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#cell\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>cell</code></a> instead.",
        "VALUES": []
    },
    "-moz-float-edge": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge",
        "SUMMARY": "The non-standard <strong><code>-moz-float-edge</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies whether the height and width properties of the element include the margin, border, or padding thickness.",
        "VALUES": [{
            "value": "<code>border-box</code>",
            "description": "The height and width properties include the content, padding and border but not the margin."
        }, {
            "value": "<code>content-box</code>",
            "description": "The height and width properties include the content, but not the padding, border or margin."
        }, {
            "value": "<code>margin-box</code>",
            "description": "The height and width properties include the content, padding, border and margin."
        }, {
            "value": "<code>padding-box</code>",
            "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": "<code>-moz-force-broken-image-icon</code> is an extended CSS property. The value <code>1</code> forces a broken image icon even if the image has an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt\" title=\"The HTML &lt;img&gt; element represents an image in the document.\"><code>alt</code></a> attribute. When the value <code>0</code> is used the image will act as usual and only display the <code>alt</code> attribute.",
        "VALUES": [{
            "value": "<a title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\"><code>&lt;integer&gt;</code></a>",
            "description": "A value of <code>1</code> means that the broken image icon is even shown if the image has an <a title=\"The HTML &lt;img&gt; element represents an image in the document.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt\"><code>alt</code></a> attribute. A value of <code>0</code> only displays the <code>alt</code> attribute."
        }]
    },
    "-moz-image-rect": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-rect",
        "SUMMARY": "This value for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\"><code>background-image</code></a> 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": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/uri\"><code>&lt;uri&gt;</code></a>",
            "description": "The URI of the image from which to take the sub-image."
        }, {
            "value": "<code>top</code>",
            "description": "The top edge, specified as a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a>, of the sub-image within the specified image."
        }, {
            "value": "<code>right</code>",
            "description": "The right edge, specified as a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a>, of the sub-image within the specified image."
        }, {
            "value": "<code>bottom</code>",
            "description": "The bottom edge, specified as a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a>, of the sub-image within the specified image."
        }, {
            "value": "<code>left</code>",
            "description": "The left edge, specified as a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a>, 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image\" title=\"The list-style-image property specifies an image to be used as the list item marker.\"><code>list-style-image</code></a> 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": "<code>auto</code>",
            "description": "Automatically defines the region of the image to use."
        }, {
            "value": "<code>&lt;shape&gt;</code>",
            "description": "A shape defining the part of the image to use. The <code>rect()</code> 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 <code>-moz-orient</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the orientation of the element to which it's applied.",
        "VALUES": [{
            "value": "<code>inline</code>",
            "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": "<code>block</code>",
            "description": "The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes."
        }, {
            "value": "<code>horizontal</code>",
            "description": "The element is rendered horizontally."
        }, {
            "value": "<code>vertical</code>",
            "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 <code>-moz-outline-radius</code> CSS property can be used to give outlines rounded corners. An <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline\" title=\"The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration. In most cases the use of this shortcut is preferable and more convenient.\"><code>outline</code></a> is a line that is drawn around elements, outside the border edge, to make the element stand out.",
        "VALUES": [{
            "value": "&lt;length&gt;",
            "description": "See <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> for possible values."
        }, {
            "value": "&lt;percentage&gt;",
            "description": "A <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a>; see <a title=\"The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\"><code>border-radius</code></a> for details."
        }]
    },
    "-moz-outline-radius-bottomleft": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-bottomleft",
        "SUMMARY": "The <code>-moz-outline-radius-bottomleft</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> 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 <code>-moz-outline-radius-bottomright</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> 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 <code>-moz-outline-radius-topleft</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> 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 <code>-moz-outline-radius-topright</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> 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": "<code>-moz-stack-sizing</code> is an extended CSS property. Normally, a <code><a href=\"https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/stack\" title=\"stack\">stack</a></code> 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&apos;s size."
        }, {
            "value": "ignore",
            "description": "The stack won&apos;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 <code>-moz-text-blink</code> non-standard Mozilla CSS extension specifies the blink mode.",
        "VALUES": [{
            "value": "none",
            "description": "Produces no blinking."
        }, {
            "value": "blink",
            "description": "Text blinks. Note that <em>not</em> blinking the text is one technique to satisfy <a href=\"http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text\" rel=\"external nofollow\" class=\"external\" title=\"http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text\">checkpoint 3.3 of WAI-UAAG</a>."
        }]
    },
    "-moz-user-focus": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-focus",
        "SUMMARY": "The <code>-moz-user-focus</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property is used to indicate whether the element can have the focus.",
        "VALUES": [{
            "value": "<code>ignore</code>",
            "description": "The element does not accept the keyboard focus and will be skipped in the tab order."
        }, {
            "value": "<code>normal</code>",
            "description": "The element can accept the keyboard focus."
        }, {
            "value": "<code>select-after</code>",
            "description": "?"
        }, {
            "value": "<code>select-before</code>",
            "description": "?"
        }, {
            "value": "<code>select-menu</code>",
            "description": "?"
        }, {
            "value": "<code>select-same</code>",
            "description": "?"
        }, {
            "value": "<code>select-all</code>",
            "description": "?"
        }, {
            "value": "<code>none</code>",
            "description": "?"
        }]
    },
    "-moz-user-input": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-input",
        "SUMMARY": "In Mozilla applications, <code>-moz-user-input</code> determines if an element will accept user input. A similar property <code>user-focus</code> was proposed in <a href=\"http://www.w3.org/TR/2000/WD-css3-userint-20000216\" class=\"external\">early drafts of a predecessor of the CSS3 UI specification</a> but was rejected by the working group.",
        "VALUES": [{
            "value": "none",
            "description": "The element does not respond to user input, and it does not become <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:active\" title=\"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 presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on &lt;a&gt; and &lt;button&gt; HTML&#xA0;elements, but may not be limited to just those.\"><code>:active</code></a>."
        }, {
            "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 <code id=\"a-disabled\"><a href=\"https://developer.mozilla.org/en-US/docs/XUL/Attribute/disabled\">disabled</a></code> 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 <code>-moz-user-modify</code> 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 <code>-moz-window-shadow</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> 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&apos;s appropriate for menus."
        }, {
            "value": "tooltip ",
            "description": "The window will have the shadow style that&apos;s appropriate for tooltips."
        }, {
            "value": "sheet ",
            "description": "The window will have the shadow style that&apos;s appropriate for sheet windows."
        }, {
            "value": "none",
            "description": "The window won&apos;t have a shadow."
        }]
    },
    "-ms-overflow-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style",
        "SUMMARY": "<strong><code>-ms-overflow-style</code></strong> 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": "<code>auto</code>",
            "description": "Initial value. Same as <code>inherit</code>."
        }, {
            "value": "<code>none</code>",
            "description": "Scrollbars are never displayed, although the element can still be scrolled if the element&apos;s content overflows."
        }, {
            "value": "<code>scrollbar</code>",
            "description": "&quot;Traditional&quot; scrollbars are displayed if the element&apos;s content overflows. &quot;Traditional&quot; scrollbars don&apos;t auto-hide and never overlap the element&apos;s content. Accordingly, the dimensions of the layout area for the content are reduced by the girth of the scrollbar(s)."
        }, {
            "value": "<code>-ms-autohiding-scrollbar</code>",
            "description": "Auto-hiding scrollbars are used if the element&apos;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&apos;s content."
        }]
    },
    "-webkit-border-before": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-border-before",
        "SUMMARY": "Technical review completed.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property sets the width of the border of a box. Using the shorthand property border is often more convenient.\"><code>border-width</code></a>"
        }, {
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a>"
        }, {
            "value": "<code>&lt;&apos;color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"Technical review completed. Editorial review completed.\"><code>color</code></a>"
        }]
    },
    "-webkit-box-reflect": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect",
        "SUMMARY": "The <code>-webkit-box-reflect</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property lets you reflect the content of an element in one specific direction.",
        "VALUES": [{
            "value": "<code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code>",
            "description": "Are keywords indicating in which direction the reflection is to happen."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "Indicates the size of the reflection."
        }, {
            "value": "<code>&lt;image&gt;</code>",
            "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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-image\" title=\"The -webkit-mask-image CSS property sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency.\"><code>-webkit-mask-image</code></a> is specified, <code>-webkit-mask-attachment</code> determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.",
        "VALUES": [{
            "value": "scroll",
            "description": "If <code>scroll</code> is specified, the mask image scrolls within the viewport along with the block that contains the mask image."
        }, {
            "value": "fixed",
            "description": "If <code>fixed</code> 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": "<code>-webkit-mask-box-image</code> sets the mask image for an element's border box.",
        "VALUES": [{
            "value": "&lt;mask-box-image&gt;",
            "description": "<code style=\"font: normal normal normal 100%/normal &apos;Courier New&apos;, &apos;Andale Mono&apos;, monospace; color: inherit; font-weight: inherit;\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/uri\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;uri&gt;</code></a> | &lt;gradient&gt; | none</code>"
        }, {
            "value": "&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;",
            "description": "<code style=\"font: normal normal normal 100%/normal &apos;Courier New&apos;, &apos;Andale Mono&apos;, monospace; color: inherit; font-weight: inherit;\">&lt;length&gt; | &lt;percentage&gt;</code>"
        }, {
            "value": "&lt;x-repeat&gt; &lt;y-repeat&gt;",
            "description": "<code style=\"font: normal normal normal 100%/normal &apos;Courier New&apos;, &apos;Andale Mono&apos;, monospace; color: inherit; font-weight: inherit;\">repeat | stretch | round</code>"
        }, {
            "value": "&lt;uri&gt;",
            "description": "The location of the image resource to be used as a mask image."
        }, {
            "value": "&lt;gradient&gt;",
            "description": "A <span style=\"font-family: courier new;\">-webkit-gradient</span> 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": "&lt;length&gt;",
            "description": "The size of the mask image&apos;s offset. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible units."
        }, {
            "value": "&lt;percentage&gt;",
            "description": "The mask image&apos;s offset has a percentage value relative to the border box&apos;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": "&#xA0;The mask image is stretched to contain the border box exactly."
        }, {
            "value": "round",
            "description": "&#xA0;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 <strong><code>-webkit-mask-composite</code></strong> 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 <code>-webkit-mask-position-x</code> CSS property sets the initial horizontal position of a mask image.",
        "VALUES": [{
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "A length indicating the position of the left edge of the image relative to the box&apos;s left padding edge. Percentages are calculated against the horizontal dimension of the box padding area. That means, a value of <code>0%</code> means the left edge of the image is aligned with the box&apos;s left padding edge and a value of <code>100%</code> means the right edge of the image is aligned with the box&apos;s right padding edge."
        }, {
            "value": "<code><strong>left</strong></code>",
            "description": "Equivalent to <code>0%</code>."
        }, {
            "value": "<code><strong>center</strong></code>",
            "description": "Equivalent to <code>50%</code>."
        }, {
            "value": "<code><strong>right</strong></code>",
            "description": "Equivalent to <code>100%</code>."
        }]
    },
    "-webkit-mask-position-y": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-position-y",
        "SUMMARY": "The <code>-webkit-mask-position-y</code> CSS property sets the initial vertical position of a mask image.",
        "VALUES": [{
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "A length indicating the position of the top side of the image relative to the box&apos;s top padding edge. Percentages are calculated against the vertical dimension of the box padding area. A value of <code>0%</code> means the top edge of the image is aligned with the box&apos;s top padding edge and a value of <code>100%</code> means the bottom edge of the image is aligned with the box&apos;s bottom padding edge."
        }, {
            "value": "<code><strong>top</strong></code>",
            "description": "Equivalent to <code>0%</code>."
        }, {
            "value": "<code><strong>bottom</strong></code>",
            "description": "Equivalent to <code>100%</code>."
        }, {
            "value": "<code><strong>center</strong></code>",
            "description": "Equivalent to <code>50%</code>."
        }]
    },
    "-webkit-mask-repeat-x": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-repeat-x",
        "SUMMARY": "The <code>-webkit-mask-repeat-x</code> 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&apos;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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position\" title=\"The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.\"><code>mask-position</code></a> property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn&apos;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 <code>-webkit-mask-repeat-y</code> 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&apos;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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position\" title=\"The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.\"><code>mask-position</code></a> property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn&apos;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 <code>-webkit-overflow-scrolling</code> CSS property controls whether or not touch devices use momentum-based scrolling for the given element.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Use &quot;regular&quot; scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen."
        }, {
            "value": "<code>touch</code>",
            "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 <code>-webkit-print-color-adjust</code> 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": "<code>economy</code>",
            "description": "Normal behavior.&#xA0; Background colors and images are only printed if the user explicitly allows it in their browser&apos;s print settings dialog."
        }, {
            "value": "<code>exact</code>",
            "description": "Background colors and images of the element to which this rule is applied are always printed, user&apos;s print settings are overridden."
        }]
    },
    "-webkit-tap-highlight-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color",
        "SUMMARY": "<strong><code>-webkit-tap-highlight-color</code></strong> 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 <a title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color value\" class=\"new\"><code>&lt;color value&gt;</code></a>."
        }]
    },
    "-webkit-text-fill-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color",
        "SUMMARY": "The <strong><code>-webkit-text-fill-color</code></strong> CSS property specifies the fill <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\">color</a> of characters of text. If this property is not set, the value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"The color property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.\"><code>color</code></a> property is used.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "description": "The foreground fill color of the element&apos;s text content."
        }]
    },
    "-webkit-text-stroke": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke",
        "SUMMARY": "The <strong><code>-webkit-text-stroke</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\">width</a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\">color</a> of strokes for text characters. This is a shorthand property for the longhand properties <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width\" title=\"The -webkit-text-stroke-width CSS property specifies the width of the stroke for text.\"><code>-webkit-text-stroke-width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-color\" title=\"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.\"><code>-webkit-text-stroke-color</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "The width of the stroke."
        }, {
            "value": "<code>&lt;color&gt;</code>",
            "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 <strong><code>-webkit-text-stroke-color</code></strong> CSS property specifies the stroke <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\">color</a> of characters of text. If this property is not set, the value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"The color property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.\"><code>color</code></a> property is used.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "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 <strong><code>-webkit-text-stroke-width</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the width of the stroke for text.",
        "VALUES": [{
            "value": "<code>&lt;line-width&gt;</code>",
            "description": "The width of the stroke."
        }]
    },
    "-webkit-touch-callout": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout",
        "SUMMARY": "The <code>-webkit-touch-callout</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property controls the display of the default callout shown when you touch and hold a touch target.",
        "VALUES": [{
            "value": "<code>default</code>",
            "description": "The default callout is displayed."
        }, {
            "value": "<code>none</code>",
            "description": "The callout is disabled."
        }]
    },
    ":-moz-broken": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-broken",
        "SUMMARY": "The <code>:-moz-broken</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-drag-over</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-first-node</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> represents any element that is the first child node of some other element. It differs from <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child\" title=\"The :first-child CSS pseudo-class represents any element that is the first child element of its parent.\"><code>:first-child</code></a> 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 <code>:-moz-focusring</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> is similar to the <a title=\"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).\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:focus\"><code>:focus</code></a> pseudo-class, but it only matches an element if the element is currently focused <strong>and</strong> a focus ring or other indicator should be drawn for that element. If <code>:-moz-focusring</code> matches, then <code>:focus</code> 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 <code>:-moz-full-screen-ancestor</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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": "<code>:-moz-handler-blocked</code> 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": "<code>:-moz-handler-crashed</code> 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": "<code>:-moz-handler-disabled</code> 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 <code>:-moz-last-node</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches an element that is the last child node of some other element. It differs from <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child\" title=\"The :last-child CSS pseudo-class represents any element that is the last child element of its parent.\"><code>:last-child</code></a> 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 <code>:-moz-loading</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <em>in the process</em> of loading <em>are not</em> 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 <code>:-moz-locale-dir(ltr)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes\">pseudo-class</a> matches an element if the user interface is being displayed left-to-right. This is determined by the preference <code>intl.uidirection.<em>locale</em></code> (where <code><em>locale</em></code> 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 <code>:-moz-locale-dir(rtl)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes\">pseudo-class</a> matches an element if the user interface is being displayed right-to-left. This is determined by the preference <code>intl.uidirection.</code><em><code>locale</code></em> (where <em><code>locale</code></em> 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 <code>:-moz-lwtheme</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches in chrome documents when the root element's <code id=\"a-lightweightthemes\"><a href=\"https://developer.mozilla.org/en-US/docs/XUL/Attribute/lightweightthemes\">lightweightthemes</a></code> attribute is <code>true</code> and a theme is selected.",
        "VALUES": []
    },
    ":-moz-lwtheme-brighttext": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-lwtheme-brighttext",
        "SUMMARY": "The <code>:-moz-lwtheme-brighttext</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches in chrome documents when <a title=\"The :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-lwtheme\"><code>:-moz-lwtheme</code></a> 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 <code>:-moz-lwtheme-darktext</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches in chrome documents when <a title=\"The :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-lwtheme\"><code>:-moz-lwtheme</code></a> is <code>true</code> 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 <code>:-moz-only-whitespace</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-placeholder</code> <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\">pseudo-class</a> represents any form element displaying <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute\">placeholder text</a>. 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 <code>:-moz-submit-invalid</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any submit button on forms whose contents aren't valid based on their <a href=\"/en/HTML/Forms_in_HTML#Constraint_Validation\" title=\"en/HTML/HTML5/Forms in HTML5#Constraint Validation\">validation constraints</a>.",
        "VALUES": []
    },
    ":-moz-suppressed": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-suppressed",
        "SUMMARY": "The <code>:-moz-suppressed</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-system-metric(images-in-menus)</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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": "<code>:-moz-system-metric(mac-graphite-theme)</code> 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 <code>:-moz-system-metric(scrollbar-end-backward)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-system-metric(scrollbar-end-forward)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-system-metric(scrollbar-start-backward)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-system-metric(scrollbar-start-forward)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-system-metric(scrollbar-thumb-proportional)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-system-metric(touch-enabled)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-system-metric(windows-default-theme)</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-tree-cell-text": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-cell-text",
        "SUMMARY": "Activated by the <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-tree-cell-text(hover)": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-cell-text(hover)",
        "SUMMARY": "The <code>:-moz-tree-cell-text(hover)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-tree-drop-feedback": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-drop-feedback",
        "SUMMARY": "Activated by the <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-tree-image": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-image",
        "SUMMARY": "Activated by the <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-tree-indentation": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-indentation",
        "SUMMARY": "Activated by the <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-tree-line": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-line",
        "SUMMARY": "Activated by the <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-tree-progressmeter": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-progressmeter",
        "SUMMARY": "Activated when the <code>type</code> attribute is set to <code>progressmeter</code>.",
        "VALUES": []
    },
    ":-moz-tree-row": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-row",
        "SUMMARY": "The <code>::-moz-tree-row</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> 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 <code>:-moz-tree-row(hover)</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-tree-twisty": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-tree-twisty",
        "SUMMARY": "Activated by the <code>properties</code> attribute.",
        "VALUES": []
    },
    ":-moz-ui-invalid": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid",
        "SUMMARY": "The <code>:-moz-ui-invalid</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> represents any validated form element whose value isn't valid based on their <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation\">validation constraints</a>, 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 <code>:-moz-ui-valid</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> represents any validated form element whose value validates correctly based on its <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation\">validation constraints</a>.",
        "VALUES": []
    },
    ":-moz-user-disabled": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-user-disabled",
        "SUMMARY": "The <code>:-moz-user-disabled</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-moz-window-inactive</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:-ms-input-placeholder</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> represents the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute\">placeholder text</a> 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 <code>:-webkit-autofill</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches when an <a title=\"The HTML element&#xA0;&lt;input&gt;&#xA0;is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"><code>&lt;input&gt;</code></a> 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 <code>::-moz-list-bullet</code> Mozilla <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> 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 <code>::-moz-list-number</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> lets you customize the appearance of numbers on list items (<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\" title=\"The HTML List Item Element (&lt;li&gt;) is used to represent an item in a list. It must be contained in a parent element: an ordered list (&lt;ol&gt;), an unordered list (&lt;ul&gt;), or a menu (&lt;menu&gt;). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.\"><code>&lt;li&gt;</code></a>) occurring in ordered lists (<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol\" title=\"The HTML &lt;ol&gt; Element (or HTML Ordered List Element) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.\"><code>&lt;ol&gt;</code></a>).",
        "VALUES": []
    },
    "::-moz-page": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-page",
        "SUMMARY": "The <code>::-moz-page</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> 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 <code>::-moz-page-sequence</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the background of the print preview.",
        "VALUES": []
    },
    "::-moz-placeholder": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder",
        "SUMMARY": "The <code>::-moz-placeholder</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents any form element displaying <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute\">placeholder text</a>. 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 <code>::-moz-progress-bar</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> applies to the area of an HTML <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\" title=\"The HTML &lt;progress&gt; Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.\"><code>&lt;progress&gt;</code></a> 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 <strong><code>::-moz-range-progress</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the portion of the \"track\" (the groove in which the indicator aka thumb slides) of an <a title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"><code>&lt;input&gt;</code></a> of <code>type=\"range\"</code>, 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 <strong><code>::-moz-range-thumb</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the <em>thumb</em>, the virtual knob the user can move within the <em>groove</em>, or track, of an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> of <code>type=\"range\"</code> to alter its numerical value.",
        "VALUES": []
    },
    "::-moz-range-track": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track",
        "SUMMARY": "The <strong><code>::-moz-range-track</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents the <em>track</em>, that is the groove in which the indicator of an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> of <code>type=\"range\"</code> slides.",
        "VALUES": []
    },
    "::-moz-scrolled-page-sequence": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-scrolled-page-sequence",
        "SUMMARY": "The <code>::-moz-scrolled-page-sequence</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the background of the print preview.",
        "VALUES": []
    },
    "::-ms-browse": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-browse",
        "SUMMARY": "The <strong><code>::-ms-browse</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the button to open the file picker of an <a title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"><code>&lt;input&gt;</code></a> of <code>type=\"file\"</code>.",
        "VALUES": []
    },
    "::-ms-check": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-check",
        "SUMMARY": "The <strong><code>::-ms-check</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the checkmark of an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> of <code>type=\"checkbox\"</code> or <code>type=\"radio\"</code>.",
        "VALUES": []
    },
    "::-ms-clear": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear",
        "SUMMARY": "The <strong><code>::-ms-clear</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents a button (the \"clear button\") at the edge of a text <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> which clears away the current value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> 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 <strong><code>::-ms-fill</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents the filled-in portion of a <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\" title=\"The HTML &lt;progress&gt; Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.\"><code>&lt;progress&gt;</code></a> 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 <strong><code>::-ms-fill-lower</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the portion of the \"track\" (the groove in which the indicator aka thumb slides) of an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element&#xA0;&lt;input&gt;&#xA0;is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> of <code>type=\"range\"</code>, 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 <strong><code>::-ms-fill-upper</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the portion of the \"track\" (the groove in which the indicator aka thumb slides) of an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element&#xA0;&lt;input&gt;&#xA0;is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> of <code>type=\"range\"</code>, 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 <strong><code>::-ms-reveal</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> is used to display and apply styles to the \"password reveal button\" usually displayed at the edge of an <a title=\"The HTML element&#xA0;&lt;input&gt;&#xA0;is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"><code>&lt;input&gt;</code></a> element of <code>type=\"password\"</code> 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 <strong><code>::-ms-value</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> applies rules to the value/content of an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element&#xA0;&lt;input&gt;&#xA0;is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\" title=\"The HTML select (&lt;select&gt;) element represents a control that presents a menu of options. The options within the menu are represented by &lt;option&gt; elements, which can be grouped by &lt;optgroup&gt; elements. Options can be pre-selected for the user.\"><code>&lt;select&gt;</code></a>. 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 <strong><code>::-webkit-file-upload-button</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the button of an <a title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"><code>&lt;input&gt;</code></a> of  <code>type=\"file\"</code>.",
        "VALUES": []
    },
    "::-webkit-inner-spin-button": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button",
        "SUMMARY": "The <strong><code>::-webkit-inner-spin-button</code></strong> 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 <code>::-webkit-meter-bar</code> pseudo-class sets the styling for the background of the element. Container of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\" title=\"The HTML &lt;meter&gt; Element represents either a scalar value within a known range or a fractional value.\"><code>&lt;meter&gt;</code></a> 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 <code>::-webkit-meter-even-less-good-value</code> 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 &lt; low &lt; high &lt; optimum or value&gt; high &gt; low &gt; optimum.",
        "VALUES": []
    },
    "::-webkit-meter-inner-element": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-inner-element",
        "SUMMARY": "<code>::-webkit-meter-inner-element</code> is a proprietary WebKit CSS pseudo-element for selecting and applying styles to to the outer containing element of a <a title=\"The HTML &lt;meter&gt; Element represents either a scalar value within a known range or a fractional value.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\"><code>&lt;meter&gt;</code></a> 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 <code>::-webkit-meter-optimum-value</code> 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 <code>::-webkit-meter-suboptimum-value</code> 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 <strong><code>::-webkit-outer-spin-button</code></strong> 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 <strong><code>::-webkit-progress-bar</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the entire bar of a <a title=\"The HTML &lt;progress&gt; Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a> element. Normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the <a title=\"The ::-webkit-progress-value CSS pseudo-element represents the filled-in portion of the bar of a &lt;progress&gt; element. It is a child of the ::-webkit-progress-bar pseudo-element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value\"><code>::-webkit-progress-value</code></a> pseudo-element. It is a child of the <a title=\"The ::-webkit-progress-inner-element CSS pseudo-element represents the outermost, container pseudo-element of the &lt;progress&gt; element. It is the parent of the ::-webkit-progress-bar pseudo-element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-inner-element\"><code>::-webkit-progress-inner-element</code></a> pseudo-element and the parent of the <a title=\"The ::-webkit-progress-value CSS pseudo-element represents the filled-in portion of the bar of a &lt;progress&gt; element. It is a child of the ::-webkit-progress-bar pseudo-element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value\"><code>::-webkit-progress-value</code></a> pseudo-element.",
        "VALUES": []
    },
    "::-webkit-progress-inner-element": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-inner-element",
        "SUMMARY": "The <strong><code>::-webkit-progress-inner-element</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the outermost, container pseudo-element of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\" title=\"The HTML &lt;progress&gt; Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.\"><code>&lt;progress&gt;</code></a> element. It is the parent of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar\" title=\"The ::-webkit-progress-bar CSS pseudo-element represents the entire bar of a &lt;progress&gt; 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.\"><code>::-webkit-progress-bar</code></a> pseudo-element.",
        "VALUES": []
    },
    "::-webkit-progress-value": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value",
        "SUMMARY": "The <strong><code>::-webkit-progress-value</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the filled-in portion of the bar of a <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\" title=\"The HTML &lt;progress&gt; Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.\"><code>&lt;progress&gt;</code></a> element. It is a child of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar\" title=\"The ::-webkit-progress-bar CSS pseudo-element represents the entire bar of a &lt;progress&gt; 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.\"><code>::-webkit-progress-bar</code></a> pseudo-element.",
        "VALUES": []
    },
    "::-webkit-scrollbar": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar",
        "SUMMARY": "The <font face=\"Consolas, Liberation Mono, Courier, monospace\">::-webkit-scrollbar</font> 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 <strong><code>::-webkit-search-cancel-button</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\">pseudo-element</a> represents a button (the \"cancel button\") at the edge of an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> of <code>type=\"search\"</code> which clears away the current value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> elements.",
        "VALUES": []
    },
    "::-webkit-search-results-button": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-results-button",
        "SUMMARY": "The <strong><code>::-webkit-search-results-button</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\">pseudo-element</a> represents a button (the \"search results button\") at the left edge of an <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> of <code>type=\"search\"</code> 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> elements which have a <a href=\"/en/docs/Web/HTML/Element/Input#attr-results\"><code>results</code> attribute</a>.",
        "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 <code>::after</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/content\" title=\"The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.\"><code>content</code></a> 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 <a href=\"https://fullscreen.spec.whatwg.org/#top-layer\">top layer</a>'s stack has a <dfn><code>::backdrop</code></dfn> <a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements\"><code>pseudo-element</code></a>. 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": "<code>::before</code> creates a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> that is the first child of the element matched. It is often used to add cosmetic content to an element by using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/content\" title=\"The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.\"><code>content</code></a> 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 <code>::first-letter</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/Pseudo-elements\" title=\"Pseudo-elements\">pseudo-element</a> 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 <strong><code>::first-line</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> 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, <code>::first-line</code> 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 <code>::marker</code> 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 <strong><code>::placeholder</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute\">placeholder text</a> 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 <code>::selection</code> 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 <code>:active</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <code>:active</code> pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\" title=\"The HTML &lt;a&gt; element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.\"><code>&lt;a&gt;</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\" title=\"The HTML &lt;button&gt; element represents a clickable button.\"><code>&lt;button&gt;</code></a> 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 <code>:any()</code> <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"CSS/Pseudo-classes\">pseudo-class</a> 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": "<code>selector</code>",
            "description": "A selector. This may be a simple selector or a multiple selector comprised of <a title=\"http://www.w3.org/TR/css3-selectors/#simple-selectors\" href=\"http://www.w3.org/TR/css3-selectors/#simple-selectors\" class=\"external\">CSS 3 simple selectors</a>&#xA0;and may include the descendant combinator."
        }]
    },
    ":any-link": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link",
        "SUMMARY": "The <code>:any-link</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\" title=\"The HTML Anchor Element (&lt;a&gt;) defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point&#x2014;a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.\"><code>&lt;a&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area\" title=\"The HTML &lt;area&gt; element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a &lt;map&gt; element.\"><code>&lt;area&gt;</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link\" title=\"The HTML &lt;link&gt; element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.\"><code>&lt;link&gt;</code></a> elements with an <code>href</code> attribute. So, it matches all elements that match <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:link\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.\"><code>:link</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:visited\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:visited</code></a>.",
        "VALUES": []
    },
    ":checked": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:checked",
        "SUMMARY": "The <strong><code>:checked</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> selector represents any <strong>radio </strong>(<code>&lt;input type=\"radio\"&gt;</code>), <strong>checkbox </strong>(<code>&lt;input type=\"checkbox\"&gt;</code>) or <strong>option</strong> (<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option\" title=\"The HTML &lt;option&gt; element is used to create a control representing an item within a &lt;select&gt;, an &lt;optgroup&gt; or a &lt;datalist&gt; HTML5 element.\"><code>&lt;option&gt;</code></a> in a <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\" title=\"The HTML &lt;select&gt; element represents a control that provides a menu of options.\"><code>&lt;select&gt;</code></a>) element that is checked or toggled to an <code>on</code> state. The user can change this state by clicking on the element, or selecting a different value, in which case the <code>:checked</code> pseudo-class no longer applies to this element, but will to the relevant one.",
        "VALUES": [{
            "value": "<code>input[type=&quot;radio&quot;]:checked</code>",
            "description": "Represents all radio buttons on the page that are checked"
        }, {
            "value": "<code>input[type=&quot;checkbox&quot;]:checked</code>",
            "description": "Represents all checkboxes on the page that are checked"
        }, {
            "value": "<code>option:checked</code>",
            "description": "Represents all select&apos;s options on the page that are selected"
        }]
    },
    ":default": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:default",
        "SUMMARY": "The <code>:default</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:dir</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches elements based on the directionality of the text contained in it. In HTML, the direction is determined by the <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html#attr-dir\">dir</a></code> 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 <code>:disabled</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:empty</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>pseudo-class</code></a> 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 <code>:enabled</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:first</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@page\" title=\"The @page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.\"><code>@page</code></a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:first-child</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:first-of-type</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:focus</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <strong><code>:focus-within</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches any element that <a title=\"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).\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:focus\"><code>:focus</code></a> pseudo-class matches or that has a descendant that the <a title=\"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).\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:focus\"><code>:focus</code></a> pseudo-class matches.  (This includes descendants in <a href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM\">shadow trees</a>.)",
        "VALUES": []
    },
    ":fullscreen": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen",
        "SUMMARY": "The<code> :fullscreen </code>CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <strong><code>:has()</code> </strong>CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> represents an element if any of the selectors, relative to the<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:scope\" title=\"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 &lt;style&gt;. If no such attribute is used on an HTML page, the reference point is the &lt;html&gt; element.\"><code>:scope</code></a> of the given element, passed as parameters, matches at least one element. The <code>:has()</code> pseudo-class takes a selector list as an argument.",
        "VALUES": []
    },
    ":hover": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:hover",
        "SUMMARY": "The <code>:hover</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:link\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.\"><code>:link</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:visited\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:visited</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:active\" title=\"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 presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on &lt;a&gt; and &lt;button&gt; HTML&#xA0;elements, but may not be limited to just those.\"><code>:active</code></a>, appearing in subsequent rules. In order to style appropriately links, you need to put the <code>:hover</code> rule after the <code>:link</code> and <code>:visited</code> rules but before the <code>:active</code> one, as defined by the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.",
        "VALUES": []
    },
    ":in-range": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range",
        "SUMMARY": "The <code>:in-range</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <code>:indeterminate</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> represents:",
        "VALUES": []
    },
    ":invalid": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid",
        "SUMMARY": "The <code>:invalid</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML &lt;input&gt; element is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\" title=\"The HTML &lt;form&gt; element represents a document section that contains interactive controls to submit information to a web server.\"><code>&lt;form&gt;</code></a> element whose content fails to <a href=\"/en/HTML/HTML5/Constraint_validation\" title=\"en/HTML/HTML5/Constraint_validation\">validate</a> 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 <code>:lang</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches elements based on the language the element is determined to be in. In HTML, the language is determined by a combination of the <code>lang</code> attribute, the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta\" title=\"The HTML &lt;meta&gt; element represents any metadata information that cannot be represented by one of the other HTML meta-related elements (&lt;base&gt;, &lt;link&gt;, &lt;script&gt;, &lt;style&gt; or &lt;title&gt;).\"><code>&lt;meta&gt;</code></a> 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 <code>:last-child</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:last-of-type</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:left</code> CSS <a href=\"/en/CSS/@page\" title=\"@page\">page</a> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <code>:link</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:hover\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:hover</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:active\" title=\"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&#xA0;the mouse button and releasing&#xA0;it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on &lt;a&gt; and &lt;button&gt; HTML&#xA0;elements, but may not be limited to just those.\"><code>:active</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:visited\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:visited</code></a>. In order to appropriately style links, you need to put the <code>:link</code> rule before the other ones, as defined by the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:focus\" title=\"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).\"><code>:focus</code></a> pseudo-class is usually placed right before or right after <code>:hover</code>, depending on the expected effect.",
        "VALUES": []
    },
    ":not()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:not",
        "SUMMARY": "The <strong>negation </strong><a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">CSS pseudo-class</a>, <code>:not(X)</code>, is a functional notation taking a simple selector <var>X</var> as an argument. It matches an element that is not represented by the argument. <var>X</var> must not contain another negation selector.",
        "VALUES": []
    },
    ":nth-child": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child",
        "SUMMARY": "The <code>:nth-child(an+b)</code> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches an element that has <code><em>a</em>n+<em>b</em>-1</code> siblings before it in the document tree, for a given positive or zero value for <code>n</code>, 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 <em>an+b</em>.",
        "VALUES": [{
            "value": "<code>tr:nth-child(2n+1)</code>",
            "description": "Represents the odd rows of an HTML table."
        }, {
            "value": "<code>tr:nth-child(odd)</code>",
            "description": "Represents the odd rows of an HTML table."
        }, {
            "value": "<code>tr:nth-child(2n)</code>",
            "description": "Represents the even rows of an HTML table."
        }, {
            "value": "<code>tr:nth-child(even)</code>",
            "description": "Represents the even rows of an HTML table."
        }, {
            "value": "<code>span:nth-child(0n+1)</code>",
            "description": "Represents a span element which is the first child of its parent; this is the same as the <a title=\"The :first-child CSS pseudo-class represents any element that is the first among a group of sibling elements.&#xA0;In level 3 implementations, the matching element&#xA0;is required to have a parent. In level 4 implementations it does not.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child\"><code>:first-child</code></a> selector."
        }, {
            "value": "<code>span:nth-child(1)</code>",
            "description": "Equivalent to the above."
        }, {
            "value": "<code>span:nth-child(-n+3)</code>",
            "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 <code>:nth-last-child(an+b)</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches an element that has <code><em>a</em>n+<em>b</em>-1</code> siblings after it in the document tree, for a given positive or zero value for <code>n</code>, and has a parent element.",
        "VALUES": [{
            "value": "<code>tr:nth-last-child(-n+4)</code>",
            "description": "Matches the last four rows of an HTML table."
        }, {
            "value": "<code>span:nth-last-child(even)</code>",
            "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 <code>:nth-last-of-type</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches an element that has <code><em>a</em>n+<em>b</em>-1</code> siblings with the same element name after it in the document tree, for a given positive or zero value for <code>n</code>, and has a parent element.",
        "VALUES": []
    },
    ":nth-of-type": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type",
        "SUMMARY": "The <code>:nth-of-type(an+b)</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches an element that has <code><em>a</em>n+<em>b</em>-1</code> siblings with the same element name before it in the document tree, for a given positive or zero value for <code>n</code>, and has a parent element.",
        "VALUES": []
    },
    ":only-child": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child",
        "SUMMARY": "The <code>:only-child</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any element which is the only child of its parent. This is the same as <code>:first-child:last-child</code> or <code>:nth-child(1):nth-last-child(1)</code>, but with a lower specificity.",
        "VALUES": []
    },
    ":only-of-type": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type",
        "SUMMARY": "The <code>:only-of-type</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:optional</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML &lt;input&gt; element is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\" title=\"The HTML &lt;textarea&gt; element represents a multi-line plain-text editing control.\"><code>&lt;textarea&gt;</code></a> element that does not have the <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required\">required</a></code> 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 <code>:out-of-range</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <strong><code>:placeholder-shown</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\">pseudo-class</a> represents any form element displaying <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute\">placeholder text</a>.",
        "VALUES": []
    },
    ":read-only": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only",
        "SUMMARY": "The <code>:read-only</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <code>:read-write</code> CSS <a title=\"Pseudo-classes\" href=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\">pseudo-class</a> 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 <code>:required</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML &lt;input&gt; element is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> element that has the <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required\">required</a></code> 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 <code>:right</code> CSS <a href=\"/en/CSS/@page\" title=\"@page\">page</a> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> 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 <code>:root</code> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\"> pseudo-class</a> matches the root element of a tree representing the document. Applied to HTML, <code>:root</code> represents the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\" title=\"The HTML &lt;html&gt; element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.\"><code>&lt;html&gt;</code></a> element and is identical to the selector <code>html</code>, except that its <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity\">specificity</a> is higher.",
        "VALUES": []
    },
    ":scope": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:scope",
        "SUMMARY": "The <code>:scope</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\"> pseudo-class</a> matches the elements that are a reference point for selectors to match against. In HTML, a new reference point can be defined using the <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#attr-scoped\">scoped</a></code> attribute of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\" title=\"The HTML &lt;style&gt; element contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.\"><code>&lt;style&gt;</code></a>. If no such attribute is used on an HTML page, the reference point is the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\" title=\"The HTML &lt;html&gt; element (or HTML root element) represents the root of an HTML document. All other elements must be descendants of this element.\"><code>&lt;html&gt;</code></a> element.",
        "VALUES": []
    },
    ":target": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/:target",
        "SUMMARY": "The <strong><code>:target</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> represents the unique element, if any, with an <code>id</code> 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 <code>:valid</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML &lt;input&gt; element is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\" title=\"The HTML &lt;form&gt; element represents a document section that contains interactive controls to submit information to a web server.\"><code>&lt;form&gt;</code></a> element whose content <a href=\"/en/HTML/HTML5/Constraint_validation\" title=\"en/HTML/HTML5/Constraint_validation\">validates</a> 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 <code>:visited</code> CSS <a title=\"Pseudo-classes\" href=\"/en/CSS/Pseudo-classes\">pseudo-class</a> lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is <a title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:link\"><code>:link</code></a>, <a title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:hover\"><code>:hover</code></a>, and <a title=\"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 presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on &lt;a&gt; and &lt;button&gt; HTML&#xA0;elements, but may not be limited to just those.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:active\"><code>:active</code></a>, appearing in subsequent rules. In order to style appropriately links, you need to put the <code>:visited</code> rule after the <code>:link</code> rule but before the other ones, defined in the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.",
        "VALUES": []
    },
    "<angle>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/angle",
        "SUMMARY": "The <code>&lt;angle&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> data type represents angle values. It is used, for example, in <code>rotate</code> and <code>skew</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform\" title=\"The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.\"><code>transform</code></a>s.",
        "VALUES": []
    },
    "<basic-shape>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape",
        "SUMMARY": "The <strong><code>&lt;basic-shape&gt;</code></strong> 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 <code>&lt;basic-shape&gt;</code> 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": "<code><a name=\"inset\"></a>inset()</code>",
            "description": "\n <pre class=\"syntaxbox\"><code>inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</code></pre>\n\n <p>Defines an inset rectangle.</p>\n\n <p>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.</p>\n\n <p>The optional <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\"><code>&lt;border-radius&gt;</code></a> argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.</p>\n\n <p>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.</p>\n "
        }, {
            "value": "<code><a name=\"polygon\"></a>polygon()</code>",
            "description": "\n <pre class=\"syntaxbox\"><code>polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</code></pre>\n\n <p><code>&lt;fill-rule&gt;</code> represents the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule\">filling rule</a> used to determine the interior of the polygon. Possible values are <code>nonzero</code> and <code>evenodd</code>. Default value when omitted is <code>nonzero</code>.</p>\n\n <p>Each pair argument in the list represents <em>x<sub>i</sub></em> and <em>y<sub>i</sub></em> - the x and y axis coordinates of the i<sup>th</sup> vertex of the polygon.</p>\n "
        }, {
            "value": "<code><a name=\"circle\"></a>circle(</code>)",
            "description": "\n <pre class=\"syntaxbox\"><code><code><code>circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</code></code></code></pre>\n\n <p>The <code>&lt;shape-radius&gt;</code> argument represents <em>r</em>, 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 <code>sqrt(width^2+height^2)/sqrt(2)</code>.</p>\n\n <p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position_value\" title=\"The &lt;position&gt; CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.\"><code>&lt;position&gt;</code></a> argument defines the center of the circle. This defaults to center if omitted.</p>\n "
        }, {
            "value": "<code><a name=\"ellipse\"></a>ellipse()</code>",
            "description": "\n <pre class=\"syntaxbox\"><code><code><code>ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</code></code></code></pre>\n\n <p>The <code>&lt;shape-radius&gt;</code> arguments represent r<sub>x</sub> and r<sub>y</sub>, 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 r<sub>x</sub> value) and the used height (for the r<sub>y</sub> value) of the reference box.</p>\n\n <p>The position argument defines the center of the ellipse. This defaults to center if omitted.</p>\n "
        }]
    },
    "<blend-mode>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode",
        "SUMMARY": "The <strong><code>&lt;blend-mode&gt;</code></strong> type is a collection of keywords describing blend modes.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "\n <p>The final color is the top color, whatever the bottom color may be.<br>\n  The effect is similar to two opaque pieces of paper overlapping.</p>\n\n <div id=\"normal\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: normal;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_normal\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/normal?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>multiply</code>",
            "description": "\n <p>The final color is the result of multiplying the top and bottom colors.<br>\n  A black layer leads to a black final layer, and a white layer leads to no change.<br>\n  The effect is similar to two images printed on transparent film overlapping.</p>\n\n <div id=\"multiply\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: multiply;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_multiply\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/multiply?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>screen</code>",
            "description": "\n <p>The final color is the result of inverting the colors, multiplying them and inverting that color value.<br>\n  A black layer leads to no change, and a white layer leads to a white final layer.<br>\n  The effect is similar to two images shone onto a projection screen.</p>\n\n <div id=\"screen\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: screen;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_screen\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/screen?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>overlay</code>",
            "description": "The final color is the result of <code>multiply</code> if the bottom color is darker, or <code>screen</code> if the bottom color is lighter.<br>\n This blend mode is equivalent to <code>hard-light</code> but with the layers swapped.\n <div id=\"overlay\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: overlay;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_overlay\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/overlay?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>darken</code>",
            "description": "\n <p>The final color is a color composed of the darkest values per color channel.</p>\n\n <div id=\"darken\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: darken;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_darken\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/darken?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>lighten</code>",
            "description": "\n <p>The final color is a color composed of the lightest values per color channel.</p>\n\n <div id=\"lighten\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: lighten;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_lighten\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/lighten?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>color-dodge</code>",
            "description": "\n <p>The final color is the result of dividing the bottom color by the inverse of the top color.<br>\n  A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.<br>\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.</p>\n\n <div id=\"color-dodge\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: color-dodge;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_color-dodge\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/color-dodge?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>color-burn</code>",
            "description": "\n <p>This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.<br>\n  A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.<br>\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.</p>\n\n <div id=\"color-burn\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: color-burn;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_color-burn\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/color-burn?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>hard-light</code>",
            "description": "\n <p>The final color is the result of <code>multiply</code> if the top color is darker, or <code>screen</code> if the top color is lighter.<br>\n  This blend mode is equivalent to <code>overlay</code> but with the layers swapped.<br>\n  The effect is similar to shining a <em>harsh</em> spotlight on the backdrop.</p>\n\n <div id=\"hard-light\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: hard-light;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_hard-light\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/hard-light?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>soft-light</code>",
            "description": "\n <p>The final color is similar to hard-light, but softer.<br>\n  This blend mode behaves similar to <code>hard-light</code>.<br>\n  The effect is similar to shining a <em>diffused</em> spotlight on the backdrop<em><code>.</code></em></p>\n\n <div id=\"soft-light\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: soft-light;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_soft-light\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/soft-light?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>difference</code>",
            "description": "\n <p>The final color is the result of subtracting the darker of the two colors from the lighter one.<br>\n  A black layer has no effect, while a white layer inverts the other layer&apos;s color.</p>\n\n <div id=\"difference\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: difference;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_difference\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/difference?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>exclusion</code>",
            "description": "\n <p>The final color is similar to <code>difference,</code> but with less contrast.<br>\n  As with <code>difference</code>,&#xA0; a black layer has no effect, while a white layer inverts the other layer&apos;s color.</p>\n\n <div id=\"exclusion\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: exclusion;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_exclusion\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/exclusion?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>hue</code>",
            "description": "\n <p>The final color has the <em>hue</em> of the top color, while using the <em>saturation</em> and <em>luminosity</em> of the bottom color.</p>\n\n <div id=\"hue\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: hue;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_hue\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/hue?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>saturation</code>",
            "description": "\n <p>The final color has the <em>saturation</em> of the top color, while using the <em>hue</em> and <em>luminosity</em> of the bottom color.<br>\n  A pure gray backdrop, having no saturation, will have no effect.</p>\n\n <div id=\"saturation\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: saturation;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_saturation\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/saturation?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>color</code>",
            "description": "\n <p>The final color has the<em> <em>hue</em></em> and <em><em>saturation</em> </em>of the top color, while using the <em>luminosity</em> of the bottom color.<br>\n  The effect preserves gray levels and can be used to colorize the foreground.</p>\n\n <div id=\"color\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: color;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_color\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/color?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }, {
            "value": "<code>luminosity</code>",
            "description": "\n <p>The final color has the <em>luminosity</em> of the top color, while using the <em>hue</em> and <em>saturation</em> of the bottom color.<br>\n  This blend mode is equivalent to color, but with the layers swapped.</p>\n\n <div id=\"luminosity\">\n <pre class=\"brush: html\" style=\"display: none;\">&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;</pre>\n\n <pre class=\"brush: css\" style=\"display: none;\">#div {\n&#xA0;&#xA0;&#xA0; width: 300px;\n&#xA0;&#xA0;&#xA0; height: 300px;\n&#xA0;&#xA0;&#xA0; background: url(&apos;https://mdn.mozillademos.org/files/8543/br.png&apos;),\n                url(&apos;https://mdn.mozillademos.org/files/8545/tr.png&apos;);\n&#xA0;&#xA0;&#xA0; background-blend-mode: luminosity;\n}</pre>\n </div>\n\n <p><iframe id=\"frame_luminosity\" height=\"300\" src=\"https://mdn.mozillademos.org/en-US/docs/Web/CSS/blend-mode$samples/luminosity?revision=1134293\" frameborder=\"0\" width=\"300\" class=\"live-sample-frame sample-code-frame\"></iframe></p>\n "
        }]
    },
    "<color>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",
        "SUMMARY": "The <code>&lt;color&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data type denotes a color in the <a href=\"https://en.wikipedia.org/wiki/SRGB\" class=\"external\">sRGB color space</a>. A color can be described in any of these ways:",
        "VALUES": [{
            "value": "Hexadecimal notation <code>#RRGGBB,</code> <code>#RGB</code>",
            "description": "\n <ul style=\"margin-bottom: 0;\">\n  <li>&quot;<code>#</code>&quot;, 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.</li>\n  <li>&quot;<code>#</code>&quot;, 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.</li>\n </ul>\n The three-digit RGB notation (<code>#RGB</code>) and the six-digit form (<code>#RRGGBB</code>) are equal, for example <code>#f03</code> and <code>#ff0033</code> represent the same color."
        }, {
            "value": "Functional Notation <code>rgb(R,G,B)</code>",
            "description": "&quot;<code>rgb</code>&quot;, followed by three <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> or three <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values, plus an optional alpha value that specifies the transparency of the color (this can be a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> between 0 and 1, or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a>)<br>\n The integer number 255 corresponds to 100%, and to F or FF in the hexadecimal notation."
        }, {
            "value": "Hexadecimal notation <code>#RRGGBBAA and #RGBA</code>",
            "description": "\n <ul style=\"margin-bottom: 0;\">\n  <li>&quot;<code>#</code>&quot;, 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.</li>\n  <li>&quot;<code>#</code>&quot;, 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.</li>\n </ul>\n The four-digit RGB notation (<code>#RGBA</code>) and the eight-digit form (<code>#RRGGBBAA</code>) are equal, for example, <code>#f038</code> and <code>#ff003388</code> represent the same color."
        }, {
            "value": "using the <code>rgba()</code> functional notation.",
            "description": "RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.<br>\n <strong>a</strong> means opacity: 0=transparent; 1=opaque;"
        }, {
            "value": "ActiveBorder",
            "description": "Active window border."
        }, {
            "value": "ActiveCaption",
            "description": "Active window caption. Should be used with <code>CaptionText</code> 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.&#xA0; Should be used with the <code>ButtonText</code> 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 <code>ButtonFace</code> or <code>ThreeDFace</code> background color."
        }, {
            "value": "CaptionText",
            "description": "Text in caption, size box, and scrollbar arrow box. Should be used with the <code>ActiveCaption</code> background color."
        }, {
            "value": "GrayText",
            "description": "Grayed (disabled) text."
        }, {
            "value": "Highlight",
            "description": "Item(s) selected in a control.&#xA0; Should be used with the <code>HighlightText</code> foreground color."
        }, {
            "value": "HighlightText",
            "description": "Text of item(s) selected in a control. Should be used with the <code>Highlight</code> background color."
        }, {
            "value": "InactiveBorder",
            "description": "Inactive window border."
        }, {
            "value": "InactiveCaption",
            "description": "Inactive window caption. Should be used with the <code>InactiveCaptionText</code> foreground color."
        }, {
            "value": "InactiveCaptionText",
            "description": "Color of text in an inactive caption.&#xA0; Should be used with the <code>InactiveCaption</code> background color."
        }, {
            "value": "InfoBackground",
            "description": "Background color for tooltip controls. Should be used with the <code>InfoText</code> foreground color."
        }, {
            "value": "InfoText",
            "description": "Text color for tooltip controls.&#xA0; Should be used with the <code>InfoBackground</code> background color."
        }, {
            "value": "Menu",
            "description": "Menu background. Should be used with the <code>MenuText</code> or&#xA0; <code>-moz-MenuBarText</code> foreground color."
        }, {
            "value": "MenuText",
            "description": "Text in menus. Should be used with the <code>Menu</code> 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 <code>ButtonText</code> 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<br>\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<br>\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 <code>WindowText</code> foreground color."
        }, {
            "value": "WindowFrame",
            "description": "Window frame."
        }, {
            "value": "WindowText",
            "description": "Text in windows. Should be used with the <code>Window</code> 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 <code>ThreeDFace</code> or <code>ButtonFace</code> when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverText</code> 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).&#xA0; Should be used with the <code>-moz-ButtonHoverFace background</code> color."
        }, {
            "value": "-moz-CellHighlight",
            "description": "Background color for selected item in a tree widget.&#xA0; Should be used with the <code>-moz-CellHighlightText</code> foreground color. See also <code>-moz-html-CellHighlight</code>."
        }, {
            "value": "-moz-CellHighlightText",
            "description": "Text color for a selected item in a tree. Should be used with the <code>-moz-CellHighlight background</code> color. See also <code>-moz-html-CellHighlightText</code>."
        }, {
            "value": "-moz-Combobox",
            "description": " Background color for combo-boxes.&#xA0; Should be used with the <code>-moz-ComboboxText</code> foreground color. In versions prior to 1.9.2, use <code>-moz-Field</code> instead."
        }, {
            "value": "-moz-ComboboxText",
            "description": " Text color for combo-boxes. Should be used with the <code>-moz-Combobox</code> background color.&#xA0; In versions prior to 1.9.2, use <code>-moz-FieldText</code> instead."
        }, {
            "value": "-moz-Dialog",
            "description": "Background color for dialog boxes.&#xA0; Should be used with the <code>-moz-DialogText</code> foreground color."
        }, {
            "value": "-moz-DialogText",
            "description": "Text color for dialog boxes. Should be used with the <code>-moz-Dialog</code> background color."
        }, {
            "value": "-moz-dragtargetzone",
            "description": "-moz-EvenTreeRow"
        }, {
            "value": " Background color for even-numbered rows in a tree.&#xA0; Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>.&#xA0; See also <code>-moz-OddTreeRow</code>.",
            "description": "-moz-Field"
        }, {
            "value": "Text field background color.&#xA0; Should be used with the <code>-moz-FieldText</code> foreground color.",
            "description": "-moz-FieldText"
        }, {
            "value": "Text field text color. Should be used with the <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, or <code>-moz-OddTreeRow</code> background color.",
            "description": "-moz-html-CellHighlight"
        }, {
            "value": " Background color for highlighted item in HTML <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\" title=\"The HTML &lt;select&gt; element represents a control that provides a menu of options.\"><code>&lt;select&gt;</code></a>s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>.",
            "description": "-moz-html-CellHighlightText"
        }, {
            "value": " Text color for highlighted items in HTML <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\" title=\"The HTML &lt;select&gt; element represents a control that provides a menu of options.\"><code>&lt;select&gt;</code></a>s.&#xA0; Should be used with the <code>-moz-html-CellHighlight</code> background color. Prior to Gecko 1.9, use <code>-moz-CellHighlightText</code>.",
            "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 <code>Highlight</code>. Should be used with the <code>-moz-MenuHoverText</code> or <code>-moz-MenuBarHoverText</code> foreground color."
        }, {
            "value": "-moz-MenuHoverText",
            "description": "Text color for hovered menu items. Often similar to <code>HighlightText</code>.&#xA0; Should be used with the <code>-moz-MenuHover</code> background color."
        }, {
            "value": "-moz-MenuBarText",
            "description": " Text color in menu bars. Often similar to <code>MenuText</code>. Should be used on top of <code>Menu</code> background."
        }, {
            "value": "-moz-MenuBarHoverText",
            "description": "Color for hovered text in menu bars. Often similar to <code>-moz-MenuHoverText</code>. Should be used on top of <code>-moz-MenuHover</code> background."
        }, {
            "value": "-moz-nativehyperlinktext",
            "description": " Default platform hyperlink color."
        }, {
            "value": "-moz-OddTreeRow",
            "description": " Background color for odd-numbered rows in a tree.&#xA0; Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-EvenTreeRow</code>."
        }, {
            "value": "-moz-win-communicationstext",
            "description": " Should be used for text in objects with <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance\" title=\"The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system&apos;s theme.\"><code>-moz-appearance</code></a>: -moz-win-communications-toolbox;</code>."
        }, {
            "value": "-moz-win-mediatext",
            "description": " Should be used for text in objects with <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance\" title=\"The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system&apos;s theme.\"><code>-moz-appearance</code></a>: -moz-win-media-toolbox</code>."
        }, {
            "value": "-moz-activehyperlinktext",
            "description": "User&apos;s preference for text color of active links. Should be used with the default document background color."
        }, {
            "value": "-moz-default-background-color",
            "description": " User&apos;s preference for the document background color."
        }, {
            "value": "-moz-default-color",
            "description": " User&apos;s preference for the text color."
        }, {
            "value": "-moz-hyperlinktext",
            "description": "User&apos;s preference for the text color of unvisited links. Should be used with the default document background color."
        }, {
            "value": "-moz-visitedhyperlinktext",
            "description": "User&apos;s preference for the text color of visited links. Should be used with the default document background color."
        }]
    },
    "<custom-ident>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident",
        "SUMMARY": "The <code>&lt;custom-ident&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> 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": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name\" title=\"The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.\"><code>animation-name</code></a>",
            "description": "Forbids the global CSS values, <code>unset</code>, <code>initial</code>, and <code>inherit</code>, and the value <code>none</code>."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset\" title=\"The counter-reset CSS property is used to reset CSS Counters to a given value.\"><code>counter-reset</code></a>",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment\" title=\"The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter&apos;s value can be reset using the counter-reset CSS property.\"><code>counter-increment</code></a>"
        }, {
            "value": "Forbids the global CSS values, <code>unset</code>, <code>initial</code>, and <code>inherit</code>, and the value <code>none</code>.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule&#xA0;lets authors define&#xA0;specific counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a>"
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type\" title=\"The list-style-type property specifies the appearance of a list item element. Because it is the only property that&#xA0;defaults to display:list-item, this is usually a &lt;li&gt; element, but can be any element with this display value.\"><code>list-style-type</code></a>",
            "description": "Forbids the global CSS values, <code>unset</code>, <code>initial</code>, and <code>inherit</code>, as well as the values <code>none</code>, <code>inline</code>, and <code>outside</code>. Also quite a few predefined values are implemented by the different browsers: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code>, and <code>disclosure-close</code>."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start\" title=\"The grid-row-start CSS property specifies a grid item&#x2019;s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.\"><code>grid-row-start</code></a><br>\n <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end\" title=\"The grid-row-end CSS property specifies a grid item&#x2019;s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.\"><code>grid-row-end</code></a><br>\n <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start\" title=\"The grid-column-start CSS property specifies a grid item&#x2019;s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-start edge of its grid area.\"><code>grid-column-start</code></a><br>\n <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end\" title=\"The grid-column-end CSS property specifies a grid item&#x2019;s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.\"><code>grid-column-end</code></a>",
            "description": "Forbids the <code>span</code> value."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\" title=\"The will-change CSS property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can set up appropriate optimizations ahead of time before the element is actually changed.\"><code>will-change</code></a>",
            "description": "Forbids the global CSS values, <code>unset</code>, <code>initial</code>, <code>inherit</code>, as well as the values <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, and <code>contents</code>."
        }]
    },
    "<flex>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value",
        "SUMMARY": "The <strong><code>&lt;flex&gt;</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data type denotes a flexible length within a grid container, which is declared as dimension with the unit <code>fr</code>.",
        "VALUES": []
    },
    "<frequency>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/frequency",
        "SUMMARY": "The <code>&lt;frequency&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> data type denotes a frequency dimension, like the pitch of a speaking voice.",
        "VALUES": []
    },
    "<gradient>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/gradient",
        "SUMMARY": "The <code>&lt;gradient&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> data type denotes a CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; 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.\"><code>&lt;image&gt;</code></a> made of a progressive transition between two or more colors. A CSS gradient is not a CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> but an image with <a href=\"https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic\" title=\"CSS/image#no_intrinsic\">no intrinsic dimensions</a>; 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": []
    },
    "<image>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/image",
        "SUMMARY": "The <code>&lt;image&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> 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": []
    },
    "<integer>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/integer",
        "SUMMARY": "The <code>&lt;integer&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> 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": []
    },
    "<length>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/length",
        "SUMMARY": "The <code>&lt;length&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data type denotes distance measurements. It is a <a title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a '.' followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn't any unit associated to a &lt;number&gt;, which is not a CSS dimension.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\"><code>&lt;number&gt;</code></a> immediately followed by a length unit (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>, …). Like for any CSS dimension, there is no space between the unit literal and the number. The length unit is optional after the <a title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a '.' followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn't any unit associated to a &lt;number&gt;, which is not a CSS dimension.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\"><code>&lt;number&gt;</code></a> <code>0</code>.",
        "VALUES": [{
            "value": "<code>em</code>",
            "description": "This unit represents the calculated <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font . Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a> of the element. If used on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font . Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a> property itself, it represents the <em>inherited</em> font-size of the element.\n <div class=\"note\">This unit is often used to create scalable layouts, which keep the <a href=\"http://24ways.org/2006/compose-to-a-vertical-rhythm\" class=\"external\">vertical rhythm of the page</a>, even when the user changes the size of the fonts. The CSS properties <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/line-height\" title=\"On block level elements, the line-height property specifies the minimum height of line boxes within the element.\"><code>line-height</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font . Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a> often have&#xA0;values expressed in <strong>em</strong>.</div>\n "
        }, {
            "value": "<code>ex</code>",
            "description": "This unit represents the <a href=\"http://en.wikipedia.org/wiki/X-height\" class=\"external\">x-height</a> of the element&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" title=\"The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family, or a way to set the element&apos;s font to a system font, using specific keywords.\"><code>font</code></a>. On fonts with the &apos;x&apos; letter, this is generally the height of lowercase letters in the font;<code style=\"white-space: nowrap;\"> 1ex &#x2248; 0.5em </code>in many fonts."
        }, {
            "value": "<code>ch</code>",
            "description": "This unit represents the width, or more precisely the advance measure, of the glyph &apos;0&apos; (zero, the Unicode character U+0030) in the element&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" title=\"The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family, or a way to set the element&apos;s font to a system font, using specific keywords.\"><code>font</code></a>."
        }, {
            "value": "<code>ic</code>",
            "description": "Equal to the used advance measure of the &#x201C;&#x6C34;&#x201D; (CJK water ideograph, U+6C34) glyph found in the font used to render it."
        }, {
            "value": "<code>rem</code>",
            "description": "This unit represents the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font . Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a> of the root element (e.g. the font-size of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\" title=\"The HTML &lt;html&gt; element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.\"><code>&lt;html&gt;</code></a> element). When used on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font . Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a> on this root element, it represents its initial value.\n <div class=\"note\">This unit is practical in creating perfectly scalable layout. If not supported by the targeted browsers, such layout can be achieved using the <strong>em</strong> unit, though this is slightly more complex.</div>\n "
        }, {
            "value": "<code>lh</code>",
            "description": "Equal to the computed value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/line-height \" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>line-height </code></a> property of the element on which it is used, converted to an absolute length."
        }, {
            "value": "<code>rlh</code>",
            "description": "Equal to the computed value of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/line-height \" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>line-height </code></a> property on the root element, converted to an absolute length. When specified on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font . Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/line-height \" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>line-height </code></a> properties of the root element, the rlh units refer to the properties&apos; initial value."
        }, {
            "value": "<code>vh</code>",
            "description": "1/100th of the height of the viewport."
        }, {
            "value": "<code>vw</code>",
            "description": "1/100th of the width of the viewport."
        }, {
            "value": "<code>vi</code>",
            "description": "Equal to 1% of the size of the initial containing block in the direction of the root element&#x2019;s <strong>inline axis</strong>."
        }, {
            "value": "<code>vb</code>",
            "description": "Equal to 1% of the size of the initial containing block in the direction of the root element&#x2019;s <strong>block axis</strong>."
        }, {
            "value": "<code>vmin</code>",
            "description": "1/100th of the minimum value of the height and the width of the viewport."
        }, {
            "value": "<code>vmax</code>",
            "description": "1/100th of the maximum value of the height and the width of the viewport."
        }, {
            "value": "<code>px</code>",
            "description": "Relative to the viewing device.<br>\n For screen display, typically one device pixel (dot) of the display.<br>\n For <em>printers</em> and very <em>high resolution screens</em> one CSS pixel implies multiple device pixels, so that the number of pixel per inch stays around 96."
        }, {
            "value": "<code>mm</code>",
            "description": "One millimeter."
        }, {
            "value": "<code>q</code>",
            "description": "A quarter of a millimeter (1/40th of a centimeter)."
        }, {
            "value": "<code>cm</code>",
            "description": "One centimeter (10 millimeters)."
        }, {
            "value": "<code>in</code>",
            "description": "One inch (2.54 centimeters)."
        }, {
            "value": "<code>pt</code>",
            "description": "One point (1/72th of an inch)."
        }, {
            "value": "<code>pc</code>",
            "description": "One pica (12 points)."
        }, {
            "value": "<code>mozmm</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "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."
        }]
    },
    "<number>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/number",
        "SUMMARY": "The <code>&lt;number&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> data type represents a number, either integer or fractional. Its syntax extends the one of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; 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.\"><code>&lt;integer&gt;</code></a> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; 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.\"><code>&lt;integer&gt;</code></a> data value. Like for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; 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.\"><code>&lt;integer&gt;</code></a> data type, there isn't any unit associated to a <code>&lt;number&gt;</code>, which is not a CSS dimension.",
        "VALUES": []
    },
    "<percentage>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/percentage",
        "SUMMARY": "The <code>&lt;percentage&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data types represent a percentage value. Many <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference\">CSS properties</a> can take percentage values, often to define sizes in terms of parent objects. Percentages are formed by a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a '.' followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn't any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> immediately followed by the percentage sign <code>%</code>. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number.",
        "VALUES": []
    },
    "<position>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/position_value",
        "SUMMARY": "The <code>&lt;position&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data type denotes a coordinate in a 2D space used to set a location relative to a box.",
        "VALUES": [{
            "value": "",
            "description": "/* 1-value syntax */\n<var>keyword</var>                  /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */\n<var>&lt;length&gt;</var> or <var>&lt;percentage&gt;</var> /* The position on the x-axis, 50% for the y-axis */\n\n/* 2-value syntax */\n<var>keyword</var> <var>keyword</var>          /* A keyword for each direction, the order is irrelevant */\n<var>keyword</var> <var>value</var>            /* The value is the offset for the edge defined by the keyword */\n"
        }]
    },
    "<ratio>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/ratio",
        "SUMMARY": "The <code>&lt;ratio&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data type, used for describing aspect ratios in <a class=\"internal\" href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries\">media queries</a>, denotes the proportion between two unitless values. It is a strictly positive <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; 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.\"><code>&lt;integer&gt;</code></a> followed by a slash ('/', Unicode<code> U+002F SOLIDUS</code>) and a second strictly positive <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; 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.\"><code>&lt;integer&gt;</code></a>. There may be spaces before and after the solidus.",
        "VALUES": []
    },
    "<resolution>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/resolution",
        "SUMMARY": "The <code>&lt;resolution&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data types, used in <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries\">media queries</a>, denotes the density of pixels of an output device, its resolution. It is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a '.' followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn't any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> immediately followed by a unit of resolution (<code>dpi</code>, <code>dpcm</code>, ...). Like for any CSS dimension, there is no space between the unit literal and the number.",
        "VALUES": [{
            "value": "<code><a name=\"dpi\">dpi</a></code>",
            "description": "This unit represents the number of <a href=\"http://en.wikipedia.org/wiki/Dots_per_inch\" class=\"external\">dots per inch</a>. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, <code>1dpi &#x2248; 0.39dpcm</code>."
        }, {
            "value": "<code><a name=\"dpcm\">dpcm</a></code>",
            "description": "This unit represents the number of <a href=\"http://en.wikipedia.org/wiki/Dots_per_centimetre\" class=\"external\">dots per centimeter</a>. As 1 inch is 2.54 cm, <code>1dpcm &#x2248; 2.54dpi</code>."
        }, {
            "value": "<code><a name=\"dppx\">dppx</a></code>",
            "description": "This unit represents the number of dots per <code>px</code> unit. Due to the 1:96 fixed ratio of CSS <code class=\"css\">in</code> to CSS <code class=\"css\">px</code>, <code class=\"css\">1dppx</code> is equivalent to <code class=\"css\">96dpi</code>, that corresponds to the default resolution of images displayed in CSS as defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>image-resolution</code></a>."
        }]
    },
    "<shape-box>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-box",
        "SUMMARY": "Shapes can be specified for <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside\">shape-outside</a></code> with a <strong><code>&lt;shape-box&gt;</code></strong> type, which is a reference to edges in the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/box_model\">CSS Box Model</a>.",
        "VALUES": [{
            "value": "\n  <code>border-box</code>",
            "description": "\n  <p>Defines the shape enclosed by the outside border edge. This shape follows the normal border radius shaping rules for the outside of the border.</p>\n "
        }, {
            "value": "\n  <code>padding-box</code>",
            "description": "\n  <p>Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.</p>\n "
        }, {
            "value": "\n  <code>content-box</code>",
            "description": "\n  <p>Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or <code>border-radius</code> - <code>border-width</code> - <code>padding</code>.</p>\n "
        }]
    },
    "<shape>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/shape",
        "SUMMARY": "The <code>&lt;shape&gt;</code> <a title=\"CSS\" href=\"/en/CSS\">CSS</a> data type denotes the specific form of a region. This region is used to define on which part of an element some properties like <a title=\"The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/clip\"><code>clip</code></a> do apply.",
        "VALUES": [{
            "value": "<em>top</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>  representing the offset for the top of the rectangle relative to the top border of the element&apos;s box.&lt;/length&gt;"
        }, {
            "value": "<em>right</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> } representing the offset for the right of the rectangle relative to the left border of the element&apos;s box.&lt;/length&gt;"
        }, {
            "value": "<em>bottom</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>  representing the offset for the bottom of the rectangle relative to the top border of the element&apos;s box.&lt;/length&gt;"
        }, {
            "value": "<em>left</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>  representing the offset for the left of the rectangle relative to the left border of the element&apos;s box.&lt;/length&gt;"
        }]
    },
    "<single-transition-timing-function>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function",
        "SUMMARY": "The <strong><code>&lt;single-transition-timing-function&gt;</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> 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 <em>easing functions<code>.</code></em>",
        "VALUES": [{
            "value": "<strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em></strong>",
            "description": "Are <a title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\"><code>&lt;number&gt;</code></a> values representing the abscissas and ordinates of the P<sub>1</sub> and P<sub>2</sub> points defining the cubic B&#xE9;zier curve. x<sub>1</sub> and x<sub>2</sub> must be in the range [0, 1] or the value is invalid."
        }, {
            "value": "<var>number_of_steps</var>",
            "description": "Is a strictly positive <a title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\"><code>&lt;integer&gt;</code></a> representing the amount of equidistant treads composing the stepping function."
        }, {
            "value": "<var>direction</var>",
            "description": "Is a keyword indicating if it the function is <a href=\"https://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity\" class=\"external\">left- or right-continuous</a>:\n <ul>\n  <li><code>start</code> denotes a left-continuous function, so that the first step happens when the animation begins;</li>\n  <li><code>end</code> denotes a right-continuous function, so that the last step happens when the animation ends.</li>\n </ul>\n <code>end</code> is the default."
        }]
    },
    "<string>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/string",
        "SUMMARY": "The <code>&lt;string&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data type represents a string. It is formed by a <a class=\"external\" href=\"http://en.wikipedia.org/wiki/Unicode\">Unicode</a> 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": []
    },
    "<time>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/time",
        "SUMMARY": "The <code>&lt;time&gt;</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> data type denotes time dimensions expressed in seconds or milliseconds. They consists of a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a '.' followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn't any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number.",
        "VALUES": []
    },
    "<transform-function>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function",
        "SUMMARY": "The <code>&lt;transform-function&gt;</code> CSS data type denotes a function applied to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>matrix()</code></a>",
            "description": "The <code>matrix()</code> CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order."
        }, {
            "value": "<code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>matrix3d()</code></a>"
        }, {
            "value": "The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>perspective()</code></a>"
        }, {
            "value": "The <code>perspective()</code> CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z&gt;0 becomes larger; each 3D-element with z&lt;0 becomes smaller. The strength of the effect is determined by the value of this property.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>rotate()</code></a>"
        }, {
            "value": "The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\"><code>transform-origin</code></a> property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180&#xB0; is called <em>point reflection</em>.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>rotate3d()</code></a>"
        }, {
            "value": "The <code>rotate3d()</code>CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>rotatex()</code></a>"
        }, {
            "value": "The <code>rotateX()</code>CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\"><code>transform-origin</code></a> CSS property.",
            "description": "<code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>rotatey()</code></a>",
            "description": "The <code>rotateY()</code>CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\"><code>transform-origin</code></a> CSS property."
        }, {
            "value": "<code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>rotatez()</code></a>"
        }, {
            "value": "The <code>rotateZ()</code>CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\"><code>transform-origin</code></a> CSS property.",
            "description": "<code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>scale()</code></a>",
            "description": "The <code>scale()</code> CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>scale3d()</code></a>",
            "description": "The <code>scale3d()</code> CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>scalex()</code></a>",
            "description": "The <code>scaleX()</code> CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleX(-1)</code> defines an <a href=\"https://en.wikipedia.org/wiki/Axial_symmetry\" class=\"external\">axial symmetry</a> with a vertical axis passing by the origin (as specified by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\"><code>transform-origin</code></a> property)."
        }, {
            "value": "<code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>scaley()</code></a>"
        }, {
            "value": "The <code>scaleY()</code> CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleY(-1)</code> defines an <a href=\"https://en.wikipedia.org/wiki/Axial_symmetry\" class=\"external\">axial symmetry</a> with a horizontal axis passing by the origin (as specified by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\"><code>transform-origin</code></a> property).",
            "description": "<code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleZ\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>scalez()</code></a>",
            "description": "The <code>scaleZ()</code> CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleZ(-1)</code> defines an <a href=\"https://en.wikipedia.org/wiki/Axial_symmetry\" class=\"external\">axial symmetry</a> along the z-axis passing by the origin (as specified by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\"><code>transform-origin</code></a> property)."
        }, {
            "value": "<code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>skew()</code></a>"
        }, {
            "value": "The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>skewx()</code></a>"
        }, {
            "value": "The <code>skewX()</code> CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>skewy()</code></a>"
        }, {
            "value": "The <code>skewY()</code> CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>translate()</code></a>"
        }, {
            "value": "The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>translate3d()</code></a>"
        }, {
            "value": "The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>translatex()</code></a>"
        }, {
            "value": "The <code>translateX()</code> CSS function moves the element horizontally on the plane. This transformation is characterized by a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> defining how much it moves horizontally.",
            "description": "<code>translateX(tx)</code> is a shortcut for <code>translate(tx, 0)</code>."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>translatey()</code></a>",
            "description": "The <code>translateY()</code> CSS function moves the element vertically on the plane. This transformation is characterized by a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> defining how much it moves vertically."
        }, {
            "value": "<code>translateY(ty)</code> is a shortcut for <code>translate(0, ty)</code>.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>translatez()</code></a>"
        }, {
            "value": "The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> defining how much it moves.",
            "description": "<code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>."
        }]
    },
    "<url>": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/url",
        "SUMMARY": "The <code>&lt;url&gt;</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type denotes a pointer to a resource. It has no proper syntax and can only be expressed through the <code>url()</code> functional notation.",
        "VALUES": []
    },
    "@charset": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@charset",
        "SUMMARY": "The <strong><code>@charset</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"At-rule\">at-rule</a> specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a <a href=\"/en/CSS/Syntax#nested_statements\" title=\"en/CSS/Syntax#nested_statements\">nested statement</a>, it cannot be used inside <a href=\"/en/CSS/At-rule#Conditional_Group_Rules\" title=\"en/CSS/At-rule#Conditional_Group_Rules\">conditional group at-rules</a>. If several <code>@charset</code> at-rules are defined, only the first one is used, and it cannot be used inside a <code>style</code> attribute on an HTML element or inside the <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\" title=\"The HTML &lt;style&gt; element contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.\"><code>&lt;style&gt;</code></a> element where the character set of the HTML page is relevant.",
        "VALUES": [{
            "value": "<em>charset</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/string\" title=\"The &lt;string&gt; CSS data type represents a string. It is formed by a Unicode characters delimited by either double (&quot;) or single (&apos;) 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.\"><code>&lt;string&gt;</code></a> denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the <a href=\"http://www.iana.org/assignments/character-sets\" class=\"external\">IANA-registry</a>, and must be double-quoted, following exactly one space character (U+0020), and immediately terminated with a semicolon.&#xA0;If several names are associated with an encoding, only the one marked with&#xA0;<em>preferred</em> must be used."
        }]
    },
    "@counter-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style",
        "SUMMARY": "The<strong> <code>@counter-style</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"en/CSS/At-rule\">at-rule</a> lets authors define specific counter styles that are not part of the predefined set of styles. A <code>@counter-style</code> rule defines how to convert a counter value into a string representation.",
        "VALUES": [{
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/system\"><code>system</code></a>",
            "description": "Specifies the algorithm to be used for converting the integer value of a counter to a string representation."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative\"><code>negative</code></a>",
            "description": "Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/prefix\"><code>prefix</code></a>",
            "description": "Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/suffix\"><code>suffix</code></a>",
            "description": "Specifies,&#xA0;similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/range\"><code>range</code></a>",
            "description": "Defines the range of values over which the counter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/pad\"><code>pad</code></a>",
            "description": "Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/fallback\"><code>fallback</code></a>",
            "description": "Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style&apos;s fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/symbols\"><code>symbols</code></a>",
            "description": "Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.<br>\n <br>\n The below <code>@counter-style</code> rule uses images instead of character symbols.<br>\n &#xA0;\n <pre class=\"brush: css\">@counter-style winners-list {\n  system: fixed;\n  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);\n  suffix: &quot; &quot;;\n}</pre>\n "
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/additive-symbols\"><code>additive-symbols</code></a>",
            "description": "While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as &apos;additive&apos; rely on <em>additive tuples</em> described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as\"><code>speak-as</code></a>",
            "description": "Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor."
        }]
    },
    "@document": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@document",
        "SUMMARY": "The <strong><code>@document</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule\">at-rule</a> restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets. A <code>@document</code> rule can specify one or more matching functions. If any of the functions apply to a URL, the rule will take effect on that URL.",
        "VALUES": []
    },
    "@font-face": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face",
        "SUMMARY": "The <strong><code>@font-face</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/CSS/At-rule\">at-rule</a> allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, <code>@font-face</code> eliminates the need to depend on the limited number of fonts users have installed on their computers. The <code>@font-face</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href=\"https://developer.mozilla.org/en-US/docs/CSS/At-rule#Conditional_Group_Rules\">CSS conditional-group at-rule</a>.",
        "VALUES": [{
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family\"><code>font-family</code></a>",
            "description": "Specifies a name that will be used as the font face value for font properties."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src\"><code>src</code></a>",
            "description": "Specifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the user&apos;s computer."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variant\" class=\"new\"><code>font-variant</code></a>",
            "description": "A <a title=\"The font-variant property acts as a shorthand for the longhand properties: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. You can also set the CSS Level 2 (Revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant\"><code>font-variant</code></a> value."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch\" class=\"new\"><code>font-stretch</code></a>",
            "description": "A <a title=\"The font-stretch property selects a normal, condensed, or expanded face from a font.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch\"><code>font-stretch</code></a> value."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight\" class=\"new\"><code>font-weight</code></a>",
            "description": "A <a title=\"The font-weight CSS property specifies the weight or boldness of the font. Some fonts are only available in normal and bold.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight\"><code>font-weight</code></a> value."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style\"><code>font-style</code></a>",
            "description": "A <a title=\"The font-style CSS property lets you select italic or oblique faces within a font-family. Italic forms are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. Both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (see font-synthesis for control over this).\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-style\"><code>font-style</code></a> value."
        }, {
            "value": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range\"><code>unicode-range</code></a>",
            "description": "The range of Unicode code points to be used from the font."
        }]
    },
    "@font-feature-values": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values",
        "SUMMARY": "The <strong><code>@font-feature-values</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a title=\"At-rule\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule\">at-rule</a> allows authors to use a common name in <a title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\"><code>font-variant-alternates</code></a> for feature activated differently in OpenType. It allows to simplify the CSS when using several fonts.",
        "VALUES": [{
            "value": "<a name=\"@swash\"><code>@swash</code></a>",
            "description": "Specifies a feature name that will work with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#swash()\"><code>swash()</code></a> functional notation of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>. A swash feature value definition allows only one value: <code>ident1: 2</code> is valid when <code>ident2: 2 4</code> isn&apos;t."
        }, {
            "value": "<a name=\"@annotation\"><code>@annotation</code></a>",
            "description": "Specifies a feature name that will work with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#annotation()\"><code>annotation()</code></a> functional notation of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>. An annotation feature value definition allows only one value: <code>ident1: 2</code> is valid when <code>ident2: 2 4</code> isn&apos;t."
        }, {
            "value": "<a name=\"@ornaments\"><code>@ornaments</code></a>",
            "description": "Specifies a feature name that will work with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#ornaments()\"><code>ornaments()</code></a> functional notation of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>. An ornaments feature value definition allows only one value: <code>ident1: 2</code> is valid when <code>ident2: 2 4</code> isn&apos;t."
        }, {
            "value": "<a name=\"@stylistic\"><code>@stylistic</code></a>",
            "description": "Specifies a feature name that will work with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#stylistic()\"><code>stylistic()</code></a> functional notation of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>. A stylistice feature value definition allows only one value: <code>ident1: 2</code> is valid when <code>ident2: 2 4</code> isn&apos;t."
        }, {
            "value": "<a name=\"@styleset\"><code>@styleset</code></a>",
            "description": "Specifies a feature name that will work with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#styleset()\"><code>styleset()</code></a> functional notation of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>. A stylset feature value definition allows and illimited amount of values: <code>ident1: 2 4 12 1</code>maps to the OpenType values <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Note that values higher than <code>99</code> are valid, but doesn&apos;t map to any OpenType values and are ignored."
        }, {
            "value": "<a name=\"@character-variant\"><code>@character-variant</code></a>",
            "description": "Specifies a feature name that will work with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#character-variant()\"><code>character-variant()</code></a> functional notation of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>. A character-variant feature value definition allows one or two values: <code>ident1: 2</code>&#xA0; maps to <code>cv02=1</code> and <code>ident2: 2 4</code> maps to <code>cv02)4</code> and <code>ident2: 2 4 5</code> isn&apos;t valid."
        }]
    },
    "@import": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@import",
        "SUMMARY": "The <strong><code>@import</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule\">at-rule</a> is used to import style rules from other style sheets. These rules must precede all other types of rules, except <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@charset\" title=\"The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the &lt;style&gt; element where the character set of the HTML page is relevant.\"><code>@charset</code></a> rules; as it is not a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#nested_statements\">nested statement</a>, <code>@import</code> cannot be used inside <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules\">conditional group at-rules</a>.",
        "VALUES": [{
            "value": "<em>url</em>",
            "description": "Is a <a title=\"The &lt;string&gt; CSS data type represents a string. It is formed by a Unicode characters delimited by either double (&quot;) or single (&apos;) 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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/string\"><code>&lt;string&gt;</code></a>&#xA0;or a <a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/uri\"><code>&lt;uri&gt;</code></a> representing the location of the resource to import. The URL may be absolute or relative. Note that the URL need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. <strong>chrome://communicator/skin/</strong>). <a href=\"https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL\">See here</a> for more information."
        }, {
            "value": "<em>list-of-media-queries</em>",
            "description": "Is a comma-separated list of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries\">media queries</a> conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource."
        }]
    },
    "@keyframes": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes",
        "SUMMARY": "The <strong><code>@keyframes</code></strong> CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule\">at-rule</a> lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you'd get when letting the browser handle everything automatically.",
        "VALUES": [{
            "value": "<code>&lt;identifier&gt;</code>",
            "description": "A name identifying the keyframe list. This must match the identifier production in CSS syntax."
        }, {
            "value": "<code>from</code>",
            "description": "A starting offset of <code>0%</code>."
        }, {
            "value": "<code>to</code>",
            "description": "An ending offset of <code>100%</code>."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a>",
            "description": "A percentage of the time through the animation sequence at which the specified keyframe should occur."
        }]
    },
    "@media": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media",
        "SUMMARY": "The <code>@media</code> <a title=\"CSS\" href=\"/en/CSS\">CSS</a> <a title=\"en/CSS/At-rule\" href=\"/en/CSS/At-rule\">at-rule</a> associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a <a title=\"CSS media queries\" href=\"/en/CSS/Media_queries\">media query</a>. The <code>@media</code> at-rule may be used not only at the top level of a CSS, but also inside any <a title=\"en/CSS/At-rule#Conditional_Group_Rules\" href=\"/en/CSS/At-rule#Conditional_Group_Rules\">CSS conditional-group at-rule</a>.",
        "VALUES": [{
            "value": "all",
            "description": "Suitable for all devices."
        }, {
            "value": "print",
            "description": "Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a title=\"https://developer.mozilla.org/en/CSS/Paged_Media\" href=\"/en/CSS/Paged_Media\">paged media</a>, and the <a title=\"https://developer.mozilla.org/en/CSS/Getting_Started/Media\" href=\"/en/CSS/Getting_Started/Media\">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media."
        }, {
            "value": "screen",
            "description": "Intended primarily for color computer screens."
        }, {
            "value": "speech",
            "description": "Intended for speech synthesizers. Note: CSS2 had a similar media type called &apos;aural&apos; for this purpose. See the appendix on aural style sheets for details."
        }]
    },
    "@namespace": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace",
        "SUMMARY": "<strong><code>@namespace</code></strong> is an <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule\" title=\"CSS at-rules\">at-rule</a> that defines <a href=\"https://developer.mozilla.org/en-US/docs/Namespaces\">XML namespaces</a> to be used in a <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/CSS\">CSS</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet\">style sheet</a>. The defined namespaces can be used to restrict the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors\">universal</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors\">type</a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors\">attribute</a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors\">selectors</a> to only select elements within that namespace. The <code>@namespace</code> rule is generally only useful when dealing with documents containing multiple namespaces—such as HTML5 with inline SVG or MathML, or XML that mixes multiple vocabularies.",
        "VALUES": []
    },
    "@page": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@page",
        "SUMMARY": "The <code>@page</code> CSS at-rule is used to modify some CSS properties when printing a document.<strong> </strong>You can't change all CSS properties with <code>@page</code>. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size\"><code>size</code></a>",
            "description": "Specifies the target size and orientation of the page box&#x2019;s containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@page/marks\"><code>marks</code></a>",
            "description": "Adds crop and/or registration marks to the document."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@page/bleed\"><code>bleed</code></a>",
            "description": "Specifies the extent beyond the page box at which the page rendering is clipped."
        }]
    },
    "@styleset": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@styleset",
        "SUMMARY": "Editorial review completed.",
        "VALUES": []
    },
    "@supports": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@supports",
        "SUMMARY": "The <code>@supports</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"en/CSS/At-rule\">at-rule</a> associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a <em>supports condition</em>.",
        "VALUES": []
    },
    "@viewport": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport",
        "SUMMARY": "The<strong> <code>@viewport</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"en/CSS/At-rule\">at-rule</a> contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/min-width\"><code>min-width</code></a>",
            "description": "Used in the determination of the width of the viewport when the document is first displayed."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/max-width\"><code>max-width</code></a>",
            "description": "Used in the determination of the width of the viewport when the document is first displayed."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/width\"><code>width</code></a>",
            "description": "A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code>"
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/min-height\"><code>min-height</code></a>",
            "description": "Used in the determination of the height of the viewport when the document is first displayed."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/max-height\"><code>max-height</code></a>",
            "description": "Used in the determination of the height of the viewport when the document is first displayed."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/height\"><code>height</code></a>",
            "description": "A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code>"
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom\"><code>zoom</code></a>",
            "description": "Sets the initial zoom factor."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/min-zoom\"><code>min-zoom</code></a>",
            "description": "Sets the minimum zoom factor."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/max-zoom\"><code>max-zoom</code></a>",
            "description": "Sets the maximum zoom factor."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/user-zoom\"><code>user-zoom</code></a>",
            "description": "Controls whether or not the user should be able to change the zoom factor."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation\"><code>orientation</code></a>",
            "description": "Controls the document&apos;s orientation."
        }]
    },
    "Adjacent sibling selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors",
        "SUMMARY": "This is referred to as an adjacent selector or next-sibling selector. It will select only the specified element that immediately follows the former specified element.",
        "VALUES": []
    },
    "Alternative Style Sheets": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets",
        "SUMMARY": "Specifying <strong>alternative style sheets</strong> in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.",
        "VALUES": []
    },
    "At-rule": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule",
        "SUMMARY": "An <strong>at-rule</strong> is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#CSS_statements\">CSS statement</a> beginning with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and includes everything up to the next semi-colon, '<code>;</code>' (<code>U+003B SEMICOLON</code>), or the next <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks\">CSS block</a>, whichever comes first.",
        "VALUES": []
    },
    "Attribute selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors",
        "SUMMARY": "Attribute selectors select an element using the presence of a given attribute or attribute value.",
        "VALUES": [{
            "value": "<code>[<em>attr</em>]</code>",
            "description": "Represents an element with an attribute name of attr."
        }, {
            "value": "<code>[<em>attr</em>=<em>value</em>]</code>",
            "description": "Represents an element with an attribute name of attr and whose value is exactly &quot;value&quot;."
        }, {
            "value": "<code>[<em>attr</em>~=<em>value</em>]</code>",
            "description": "Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly &quot;value&quot;."
        }, {
            "value": "<code>[<em>attr</em>|=<em>value</em>]</code>",
            "description": "Represents an element with an attribute name of attr. Its value can be exactly &#x201C;value&#x201D; or can begin with &#x201C;value&#x201D; immediately followed by &#x201C;-&#x201D; (U+002D). It can be used for language subcode matches."
        }, {
            "value": "<code>[<em>attr</em>^=<em>value</em>]</code>",
            "description": "Represents an element with an attribute name of attr and whose first value is prefixed by &quot;value&quot;."
        }, {
            "value": "<code>[<em>attr</em>$=<em>value</em>]</code>",
            "description": "Represents an element with an attribute name of attr and whose last value is suffixed by &quot;value&quot;."
        }, {
            "value": "<code>[<em>attr</em>*=<em>value</em>]</code>",
            "description": "Represents an element with an attribute name of attr and whose value contains at least one occurrence of string &quot;value&quot; as substring."
        }, {
            "value": "<code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code>",
            "description": "Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range)."
        }]
    },
    "CSS Animations": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations",
        "SUMMARY": "<strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support\">Detecting CSS animation support</a>",
            "description": "Describes a technique for detecting if the browser supports CSS animations."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations\">Using CSS animations</a>",
            "description": "Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips\">CSS animations tips</a>",
            "description": "Tips and tricks to help you make the most of CSS animations in your content. Currently offers a technique for re-playing an animation which has already run through to completion, which the API doesn&apos;t support inherently."
        }]
    },
    "CSS Background and Borders": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders",
        "SUMMARY": "<strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds\">Using CSS multiple backgrounds</a>",
            "description": "Explains how to set backgrounds on elements and how they will interact with it."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images\">Scaling background images</a>",
            "description": "Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not."
        }]
    },
    "CSS Box Model": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model",
        "SUMMARY": "<strong>CSS Box Model</strong> is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model\">Introduction to the CSS box model</a>",
            "description": "Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\">Mastering margin collapsing</a>",
            "description": "In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator\">Box-shadow generator</a>",
            "description": "An interactive tool that allows to visually create shadows and to generate the needed syntax for the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow\" title=\"The box-shadow property describes one or more shadow effects as a comma-separated list.\"><code>box-shadow</code></a> property."
        }]
    },
    "CSS Charsets": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Charsets",
        "SUMMARY": "<strong>CSS Charsets</strong> is a module of CSS that allow to define the character set used in the stylesheet.",
        "VALUES": []
    },
    "CSS Colors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors",
        "SUMMARY": "<strong>CSS Colors</strong> is a module of CSS that deals with colors, color types and transparency.",
        "VALUES": []
    },
    "CSS Columns": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns",
        "SUMMARY": "<strong>CSS Columns</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flow between columns and how gaps and rules are handled.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts\">Using CSS multi-column layouts</a>",
            "description": "Step-by-step tutorial about how to build layouts using several columns."
        }]
    },
    "CSS Compositing and Blending": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Compositing_and_Blending",
        "SUMMARY": "<strong>CSS Compositing and Blending</strong> is a CSS module that defines how shapes of different elements are combined into a single image.",
        "VALUES": []
    },
    "CSS Conditional Rules": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules",
        "SUMMARY": "<strong>CSS Conditional Rules</strong> is a CSS module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.",
        "VALUES": []
    },
    "CSS Device Adaptation": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Device_Adaptation",
        "SUMMARY": "<strong>CSS Device Adaptation</strong> is a CSS module that allows to define the size, zoom factor, and orientation of the viewport.",
        "VALUES": []
    },
    "CSS Display": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Display",
        "SUMMARY": "<strong>CSS Display</strong> is a module of CSS that defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.",
        "VALUES": []
    },
    "CSS Flexible Box Layout": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout",
        "SUMMARY": "<strong>CSS Flexible Box Layout</strong> is a module of CSS that defines a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes\">Using CSS flexible boxes</a>",
            "description": "Step-by-step tutorial about how to build layouts using this feature."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications\">Using flexbox to lay out Web applications</a>",
            "description": "Tutorial explaining how to use flexbox in the specific context of Web applications."
        }]
    },
    "CSS Fonts": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts",
        "SUMMARY": "<strong>CSS Fonts</strong> is a module of CSS that defines font-related properties and how font resources are loaded. It allows to define the style of a font, like its family, its size or its weight, and the variant of the glyph to be used, for a font that has several glyphs for one character. It also allows to define the height of a line.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face\" title=\"Technical review completed.\"><code>@font-face</code></a>",
            "description": "\n <div class=\"index\">\n <ul>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>font-family</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>font-feature-settings</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>font-style</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variant\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>font-variant</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>font-weight</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>font-stretch</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>src</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>unicode-range</code></a></li>\n </ul>\n </div>\n "
        }]
    },
    "CSS Generated Content": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Generated_Content",
        "SUMMARY": "<strong>CSS Generated Content</strong> is a module of CSS that defines how to add content to an element.",
        "VALUES": []
    },
    "CSS Grid Layout": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout",
        "SUMMARY": "<strong>CSS Grid layout</strong> has been designed to provide a two-dimensional layout method for CSS, with the ability to lay out items in rows and columns. The CSS grid can be used to achieve many different layouts. It excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.",
        "VALUES": []
    },
    "CSS Images": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images",
        "SUMMARY": "<strong>CSS Images</strong> is a module of CSS that defines what types of images can be used (the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; 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.\"><code>&lt;image&gt;</code></a> type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients\">Using CSS gradients</a>",
            "description": "Presents a specific type of CSS images, <em>gradients</em>, and how to create and use these."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\">Implementing image sprites in CSS</a>",
            "description": "Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page."
        }]
    },
    "CSS Lists and Counters": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters",
        "SUMMARY": "<strong>CSS Lists and Counters</strong> is a module of CSS that defines how lists are laid out, how the list marker can be styled and how authors can create new counters.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule&#xA0;lets authors define&#xA0;specific counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a>",
            "description": "\n <div class=\"index\">\n <ul>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/system\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>system</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/additive-symbols\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>additive-symbols</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>negative</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/prefix\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>prefix</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/suffix\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>suffix</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/range\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>range</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/pad\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>pad</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>speak-as</code></a></li>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/fallback\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>fallback</code></a></li>\n </ul>\n </div>\n "
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation\">Consistent list indentation</a>",
            "description": "Explains how to reach a consistent indentation between different browsers."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters\">Using CSS counters</a>",
            "description": "Describes how to use counters to be able to use numbering outside of traditional list elements or to perform complex counting."
        }]
    },
    "CSS Logical Properties": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties",
        "SUMMARY": "<strong>CSS Logical Properties</strong> is a module of CSS that defines logical mapping to physical properties to control the layout.",
        "VALUES": []
    },
    "CSS Masks": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Masks",
        "SUMMARY": "<strong>CSS Masks</strong> is a CSS module that defines means, including masking and clipping, for partially or fully hiding portions of visual elements.",
        "VALUES": []
    },
    "CSS Miscellaneous": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Miscellaneous",
        "SUMMARY": "These pages contain CSS properties that are highly experimental or don't fit in any other categories.",
        "VALUES": []
    },
    "CSS Namespaces": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Namespaces",
        "SUMMARY": "<strong>CSS Namespaces</strong> is a CSS module that allows authors to specify <a href=\"https://developer.mozilla.org/en-US/docs/Namespaces\">XML namespaces</a> in CSS.",
        "VALUES": []
    },
    "CSS Pages": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Pages",
        "SUMMARY": "<strong>CSS Pages</strong> is a module of CSS that defines how page switches are handled, as well as orphans and widows.",
        "VALUES": []
    },
    "CSS Positioning": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning",
        "SUMMARY": "<strong>CSS Positioning</strong> is a module of CSS that defines how to absolutely and relavitely position elements on the page.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index\">Understanding CSS z-index</a>",
            "description": "Presents the notion of stacking context and explain how z-ordering works, with several examples."
        }]
    },
    "CSS Properties Reference": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference",
        "SUMMARY": "The following is a basic list of the most common CSS properties with the equivalent of the DOM notation which is usually accessed from JavaScript:",
        "VALUES": []
    },
    "CSS Ruby": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Ruby",
        "SUMMARY": "<strong>CSS Ruby</strong> is a module of CSS that provides the rendering model and formatting controls related to display ruby annotation, a form of interlinear annotation, short runs of text alongside the base text.",
        "VALUES": []
    },
    "CSS Scroll Snap Points": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points",
        "SUMMARY": "<strong>CSS Scroll Snap Points</strong> is a module of CSS that defines properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings",
        "VALUES": []
    },
    "CSS Selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors",
        "SUMMARY": "<strong>Selectors</strong> define to which elements a set of CSS rules apply.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors\">Type selectors</a>",
            "description": "This basic selector chooses all elements that matches the given <em>name</em>.<br>\n <strong>Syntax:</strong> <code><var>eltname</var></code><br>\n <strong>Example:</strong> <code>input</code> will match any <a title=\"The HTML &lt;input&gt; element is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"><code>&lt;input&gt;</code></a> element."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors\">Class selectors</a>",
            "description": "This basic selector chooses elements based on the value of their <code>class</code> attribute.<br>\n <strong>Syntax:</strong> <code>.<var>classname</var></code><br>\n <strong>Example:</strong> <code>.index</code> will match any element that has the class <code>index</code> (likely defined by a <code>class=&quot;index&quot;</code> attribute or similar)."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors\">ID selectors</a>",
            "description": "This basic selector chooses nodes based on the value of its <code>id</code> attribute. There should be only one element with a given ID in a document.<br>\n <strong>Syntax:</strong> <code>#<var>idname</var></code><br>\n <strong>Example:</strong> <code>#toc</code> will match the element that has the id toc (likely defined by a <code>id=&quot;toc&quot;</code> attribute or similar)."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors\">Universal selectors</a>",
            "description": "This basic selector chooses all nodes. It also exists in a one-namespace only and in an all-namespace variant too.<br>\n <strong>Syntax:</strong> <code>*&#xA0;ns|*&#xA0;*|*</code><br>\n <strong>Example:</strong> <code>*</code> will match all the elements of the document."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors\">Attribute selectors</a>",
            "description": "This basic selector chooses nodes based on the value of one of its attributes.<br>\n <strong>Syntax:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>\n <strong>Example:</strong> <code>[autoplay]</code> will match all the elements that have the <code>autoplay</code> attribute set (to any value)."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors\">Adjacent sibling selectors</a>",
            "description": "The <code>&apos;+&apos;</code> combinator selects nodes that immediately follow the former specified element.<br>\n <strong>Syntax:</strong> <code><var>A</var> + <var>B</var></code><br>\n <strong>Example:</strong>&#xA0;div<code>&#xA0;+ p</code>&#xA0;will match any <a title=\"The HTML &lt;p&gt; element represents a paragraph of text.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a> that immediately follows a <a title=\"The HTML &lt;div&gt; element is the generic container for flow content and does not inherently represent anything. Use it to group elements for purposes such as styling (using the class or id attributes), marking a section of a document in a different language (using the lang attribute), and so on.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors\">General sibling selectors</a>",
            "description": "The <code>&apos;~&apos;</code> combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.<br>\n <strong>Syntax:</strong> <code><var>A</var> ~ <var>B</var></code><br>\n <strong>Example:</strong> <code>p ~ span</code> will match all <a title=\"The HTML &lt;span&gt; element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a> elements that follow a <a title=\"The HTML &lt;p&gt; element represents a paragraph of text.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a> element inside the same element."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors\">Child selectors</a>",
            "description": "The <code>&apos;&gt;&apos;</code> combinator selects nodes that are direct children of the former specified element.<br>\n <strong>Syntax:</strong> <code><var>A</var> &gt; <var>B</var></code><br>\n <strong>Example:</strong> <code>ul &gt; li</code> will match all <a title=\"The HTML &lt;li&gt; element is used to represent an item in a list. It must be contained in a parent element: an ordered list (&lt;ol&gt;), an unordered list (&lt;ul&gt;), or a menu (&lt;menu&gt;). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</code></a> elements that are inside a <a title=\"The HTML &lt;ul&gt; element represents an unordered list of items, typically rendered as a bulleted list.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a> element."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors\">Descendant selectors</a>",
            "description": "The <code>&apos; &apos;</code> combinator selects nodes that are children (not necessary direct children) of the former specified element.<br>\n <strong>Syntax:</strong> <code>A B</code><br>\n <strong>Example:</strong> <code>div span</code> will match any <a title=\"The HTML &lt;span&gt; element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a> element that is inside a <a title=\"The HTML &lt;div&gt; element is the generic container for flow content and does not inherently represent anything. Use it to group elements for purposes such as styling (using the class or id attributes), marking a section of a document in a different language (using the lang attribute), and so on.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a> element."
        }]
    },
    "CSS Shapes": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes",
        "SUMMARY": "<strong>CSS Shapes</strong> is a CSS module that defines geometric shapes for use in CSS values.",
        "VALUES": []
    },
    "CSS Table": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table",
        "SUMMARY": "<strong>CSS Table</strong> is a CSS module that defines how to lay out table data.",
        "VALUES": []
    },
    "CSS Text": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text",
        "SUMMARY": "<strong>CSS Text</strong> is a module of CSS that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.",
        "VALUES": []
    },
    "CSS Text Decoration": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text_Decoration",
        "SUMMARY": "<strong>CSS Text Decoration</strong> is a module of CSS that defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.",
        "VALUES": []
    },
    "CSS Transforms": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms",
        "SUMMARY": "<strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms\">Using CSS transforms</a>",
            "description": "Step-by-step tutorial about how to transform elements styled with CSS."
        }]
    },
    "CSS Transitions": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions",
        "SUMMARY": "<strong>CSS Transitions</strong> is a module of CSS that defines how to create smooth transitions between values of given CSS properties. It allows to create them but also to define their evolution, using timing functions.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions\">Using CSS transitions</a>",
            "description": "Step-by-step tutorial about how to create smooth transitions using CSS. This article describes each relevant CSS property and explains how they interact."
        }]
    },
    "CSS Tutorials": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials",
        "SUMMARY": "Learning CSS may be a daunting task. In order to help you, we have written numerous <strong>tutorials about CSS</strong>. Some are aimed at complete beginners, while others present complex features to be used by more experienced users.",
        "VALUES": [{
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Getting_Started\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Getting_Started\">Getting started</a>",
            "description": "\n    This guide is aimed at <u>complete beginners</u>: You haven&apos;t written one single line of CSS? &#x2014; this is for you. It explains the fundamental concepts of the language and guides you in writing basic stylesheets."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds\">Using multiple backgrounds</a>",
            "description": "\n    Backgrounds are fundamental for nice styling: CSS allows you to set several of them on each box. This tutorial explains how they interact and how to achieve nice effects."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Scaling_background_images\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Scaling_background_images\">Scaling background images</a>",
            "description": "\n    CSS allows you to resize images used as an element&apos;s background. This tutorial describes how to achieve this in a simple way."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Media_queries\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Media_queries\">Media queries</a>",
            "description": "\n    The size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. Media queries are the fundamental building blocks in achieving Web sites that render everywhere in their best quality."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index\">Understanding z-index</a>",
            "description": "\n    Controlling superposition of boxes is a basic feature that is very quickly needed by Web developers. Though not that difficult, it requires a basic knowledge of CSS."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Counters\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Counters\">CSS Counters</a>",
            "description": "\n    Counting items and pages is an easy task in CSS. Learn to use <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset\" title=\"\"><code>counter-reset</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment\" title=\"\"><code>counter-increment</code></a>, <a class=\"new\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counters\" title=\"\"><code>counters()</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counter\" title=\"\"><code>counter()</code></a>."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations\">CSS Animations</a>",
            "description": "\n    CSS3 Animations allow you to define configurations of style, as <a href=\"https://developer.mozilla.org/en-US/docs/CSS/@keyframes\" title=\"https://developer.mozilla.org/en-US/docs/CSS/@keyframes\">keyframes</a>, and to transition between them defining an animation."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions\">CSS Transitions</a>",
            "description": "\n    CSS3 Transitions allow you to define an animation between several styles and to control the way this transition happens."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transforms\">CSS Transforms</a>",
            "description": "\n    Transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2D or 3D spaces."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients\">CSS Gradients</a>",
            "description": "\n    Gradients are images that transition smoothly from one color to another. There are several types of gradients allowed in CSS: linear or radial, repeating or not. This tutorial describes how to use them."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts\">CSS multi-column layouts</a>",
            "description": "\n    CSS3 introduces a new layout allowing you to easily define multiple columns in an element. Though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes."
        }, {
            "value": "\n    <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes\">CSS flexible boxes layouts</a>",
            "description": "\n    This new layout allow you to give boxes flexibility, allowing them to be resized smoothly. It is a powerful way to describe complex interfaces."
        }]
    },
    "CSS Types": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types",
        "SUMMARY": "",
        "VALUES": []
    },
    "CSS User Interface": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface",
        "SUMMARY": "<strong>CSS User Interface</strong> is a CSS module that allows to define the rendering and functionality of user interface related features.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property\">Using URL values for the <code>cursor</code> property</a>",
            "description": "Explains and shows how URL can be used with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\" title=\"The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.\"><code>cursor</code></a> property to produce custom cursors."
        }]
    },
    "CSS Writing Modes": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes",
        "SUMMARY": "<strong>CSS Writing Modes</strong> is a CSS module that defines various international writing modes, such as left-to-right (e.g. used by Latin and Indic scripts), right-to-left (e.g. used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some Asian scripts).",
        "VALUES": []
    },
    "CSS animated properties": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties",
        "SUMMARY": "Some CSS properties can be animated, that is can change in a smooth way when its value change, either when used by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations\">CSS Animations</a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions\">CSS Transitions</a>.",
        "VALUES": []
    },
    "CSS documentation index": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Index",
        "SUMMARY": "<strong>Found 767 pages:</strong>",
        "VALUES": []
    },
    "CSS reference": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference",
        "SUMMARY": "Technical review completed.",
        "VALUES": []
    },
    "CSS3": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3",
        "SUMMARY": "<strong>CSS3</strong> is the latest evolution of the <em>Cascading Style Sheets</em> language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients\" title=\"Using CSS gradients\">gradients</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions\" title=\"CSS transitions\">transitions</a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations\" title=\"CSS animations\">animations</a>, as well as new layouts like <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts\" title=\"Using CSS multi-column layouts\">multi-columns</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes\">flexible box</a> or grid layouts.",
        "VALUES": []
    },
    "CSSOM View": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View",
        "SUMMARY": "<strong>CSSOM View</strong> is a module that allows to manipulate the visual view of a document, in particular its scrolling behavior.",
        "VALUES": []
    },
    "Cascade": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade",
        "SUMMARY": "The <em>cascade</em> is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: <em>Cascading</em> Style Sheets.",
        "VALUES": []
    },
    "Child selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors",
        "SUMMARY": "The <code>&gt;</code> combinator separates two selectors and matches only those elements matched by the second selector that are <strong>direct</strong> children of elements matched by the first. By contrast, when two selectors are combined with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors\">descendant selector</a>, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of \"hops\" up the DOM.",
        "VALUES": []
    },
    "Class selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors",
        "SUMMARY": "In an HTML document, CSS class selectors match an element based on the contents of the element's class attribute. The <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class\">class</a></code> attribute is defined as a space-separated list of items, and one of those items must match exactly the class name given in the selector.",
        "VALUES": []
    },
    "Comments": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Comments",
        "SUMMARY": "Comments are used to add explanatory notes or prevent the browser from interpreting parts of the style sheet.",
        "VALUES": []
    },
    "Computed value": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value",
        "SUMMARY": "The <strong>computed value</strong> of a CSS property is computed from the specified value by:",
        "VALUES": []
    },
    "Custom properties (--*)": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/--*",
        "SUMMARY": "Property names that are prefixed with <code>--</code>, like <code>--example-name</code>, represent <em>custom properties</em> that contain a value than can be reused throughout the document using the (<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/var\" title=\"The var() function can be used instead of any part of a value in any property on an element. The var() function can not be used as property names, selectors&#xA0;or anything else besides property values. (Doing so usually produces invalid syntax&#xA0;or else a value whose meaning has no connection to the variable.)\"><code>var()</code></a>) function.",
        "VALUES": [{
            "value": "<code>&lt;declaration-value&gt;</code>",
            "description": "This value matches any sequence of one or more tokens, so long as the sequence does not contain an unallowed tokens. It represents the entirety of what a valid declaration can have as its value."
        }]
    },
    "Descendant selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors",
        "SUMMARY": "The <strong>descendant combinator</strong> — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor element matching the first selector. Selectors that utilize a descendant combinator are called <dfn>descendant selectors</dfn>.",
        "VALUES": []
    },
    "Draft Implementations of CSS Features": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Draft_Implementations_of_CSS_Features",
        "SUMMARY": "Mozilla supports a number of extensions to <a href=\"/en/CSS\" title=\"en/CSS\">CSS</a> that are prefixed with<code> -moz-</code>. The following list contains all Mozilla extensions that are implementations of features that are being standardized by the W3C. Proprietary features are omitted.",
        "VALUES": [{
            "value": "",
            "description": "..."
        }]
    },
    "Filters Effects": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Filters_Effects",
        "SUMMARY": "<strong>Filter Effects</strong> is a module of CSS that defines a way of processing an element’s rendering before it is displayed in the document.",
        "VALUES": []
    },
    "General sibling selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors",
        "SUMMARY": "The <code>~</code> combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.",
        "VALUES": []
    },
    "ID selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors",
        "SUMMARY": "In an HTML document, CSS ID selectors match an element based on the contents of that element's <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-id\">id</a></code> attribute, which must match exactly the value given in the selector.",
        "VALUES": []
    },
    "Layout mode": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode",
        "SUMMARY": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <strong>layout mode</strong>, sometimes abbreviated as <em>layout</em>, is an algorithm determining the position and the size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:",
        "VALUES": []
    },
    "List of Proprietary CSS Features": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/List_of_Proprietary_CSS_Features",
        "SUMMARY": "This list includes proprietary extensions to CSS in different browser engines which are not experimental implementations of features being standardized (see <a href=\"/en/CSS/Draft_Implementations_of_CSS_Features\" title=\"en/CSS/Draft_Implementations_of_CSS_Features\">Draft Implementations of CSS Features</a> for a list of these).",
        "VALUES": [{
            "value": "",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-image\" title=\"\"><code>background-image</code></a>"
        }]
    },
    "Media queries": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries",
        "SUMMARY": "<strong>Media Queries</strong> is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries\">Using media queries</a>",
            "description": "Presents what media queries are doing and explains the possible expressions."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries\">Testing media queries</a>",
            "description": "Explains how to test a media query programmatically, from JavaScript."
        }]
    },
    "Motion Path": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Motion_Path",
        "SUMMARY": "<strong>Motion Path</strong> is a module that allows authors to animate any graphical object along a custom path.",
        "VALUES": []
    },
    "Mozilla CSS Extensions": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions",
        "SUMMARY": "Mozilla supports a number of extensions to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> that are prefixed with <code>-moz-</code>.",
        "VALUES": [{
            "value": "",
            "description": "For all properties"
        }]
    },
    "Mozilla CSS support chart": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_support_chart",
        "SUMMARY": "This page lists supported CSS <a href=\"https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart#Selectors\" title=\"Mozilla_CSS_support_chart#Selectors\">selectors</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart#properties\" title=\"Mozilla_CSS_support_chart#properties\">properties</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart#.40-rules\" title=\"Mozilla_CSS_support_chart#.40-rules\">@-rules</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart#Media_queries\" title=\"Mozilla_CSS_support_chart#Media_queries\">Media queries</a> and <a href=\"https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart#values_and_units\" title=\"Mozilla_CSS_support_chart#values_and_units\">values</a> in alphabetical order.",
        "VALUES": []
    },
    "Paged Media": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media",
        "SUMMARY": "Paged media properties control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements. Popularly supported properties include",
        "VALUES": []
    },
    "Privacy and the :visited selector": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector",
        "SUMMARY": "Historically, the CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:visited\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:visited</code></a> selector has been a way for sites to query the user's history, by using <code>getComputedStyle()</code> or other techniques to walk through the user's history to figure out what sites the user has visited. This can be done quickly, and makes it possible not only to determine where the user has been on the web, but can also be used to guess a lot of information about a user's identity.",
        "VALUES": []
    },
    "Pseudo-classes": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes",
        "SUMMARY": "A CSS <strong><em><dfn>pseudo-class</dfn></em></strong> is a keyword added to selectors that specifies a special state of the element to be selected. For example <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:hover\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:hover</code></a> will apply a style when the user hovers over the element specified by the selector.",
        "VALUES": []
    },
    "Pseudo-elements": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements",
        "SUMMARY": "Just like <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes\" title=\"A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.\"><code>pseudo-classes</code></a>, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of an element. For example, the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line\" title=\"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.\"><code>::first-line</code></a> pseudo-element targets only  the first line of an element specified by the selector.",
        "VALUES": []
    },
    "Questions about CSS": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/FAQ",
        "SUMMARY": "",
        "VALUES": []
    },
    "Replaced element": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element",
        "SUMMARY": "In CSS, a <strong>replaced element</strong> is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\" title=\"The HTML &lt;img&gt; element represents an image in the document.\"><code>&lt;img&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object\" title=\"The&#xA0;HTML Embedded Object Element&#xA0;(&lt;object&gt;) represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.\"><code>&lt;object&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video\" title=\"Use the &#xA0;HTML &lt;video&gt; element&#xA0;to embed video content in a document. The video element contains one or more video sources. To specify a video source, use either the src attribute or the &lt;source&gt; element; the browser will choose the most suitable one.\"><code>&lt;video&gt;</code></a> or form elements like <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\" title=\"The HTML &lt;textarea&gt; element represents a multi-line plain-text editing control.\"><code>&lt;textarea&gt;</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a>. Some elements, like <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio\" title=\"The HTML &lt;audio&gt; element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the &lt;source&gt; element; the browser will choose the most suitable one.\"><code>&lt;audio&gt;</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas\" title=\"The HTML &lt;canvas&gt; Element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the &lt;canvas&gt; block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.\"><code>&lt;canvas&gt;</code></a> are replaced elements only in specific cases. Objects inserted using the CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/content\" title=\"The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.\"><code>content</code></a> properties are <em>anonymous replaced elements</em>.",
        "VALUES": []
    },
    "Resolved value": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value",
        "SUMMARY": "The <strong>resolved value</strong> of a CSS property is the value returned by <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle\" title=\"The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.\"><code>getComputedStyle()</code></a>. For most properties, it is the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>computed value</code></a>, but for a few legacy properties (including <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a>), it is instead the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/used_value\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>used value</code></a>. See the specification link below for more per-property details.",
        "VALUES": []
    },
    "Scaling of SVG backgrounds": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds",
        "SUMMARY": "Given the flexibility of SVG images, there's a lot to keep in mind when using them as background images with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-image\"><code>background-image</code></a> property, and even more to keep in mind when also scaling them using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\"><code>background-size</code></a> property. This article describes how scaling of SVG images is handled when using these properties.",
        "VALUES": []
    },
    "Shorthand properties": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties",
        "SUMMARY": "<dfn>Shorthand properties</dfn> are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, saving time and energy.",
        "VALUES": []
    },
    "Specificity": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity",
        "SUMMARY": "Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of <a title=\"en/CSS/CSS_Reference#Selectors\" href=\"/en/CSS/CSS_Reference#Selectors\">CSS selectors</a>.",
        "VALUES": []
    },
    "Syntax": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax",
        "SUMMARY": "The basic goal of the Cascading Stylesheet (<a href=\"/en/CSS\" title=\"CSS\">CSS</a>) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations. The <em>CSS syntax</em> reflects this goal and its basic building blocks are:",
        "VALUES": []
    },
    "Tools": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Tools",
        "SUMMARY": "CSS offers a number of powerful features that can be tricky to use, or have a number of parameters, so that it's helpful to be able to visualize them while you work on them. This page offers links to a number of useful tools that will help you build the CSS to style your content using these features.",
        "VALUES": [{
            "value": "<dt class=\"landingPageList\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Cubic_Bezier_Generator\">Cubic Bezier Generator</a></dt><dd class=\"landingPageList\">This is a sample tool; it lets you edit Bezier curves. This is not really yet a useful tool, but will be!</dd><dt class=\"landingPageList\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Linear-gradient_Generator\">Linear-gradient Generator</a></dt><dd class=\"landingPageList\">This tool can be used to create custom CSS3 <a title=\"The CSS linear-gradient() function creates an &lt;image&gt; which represents a linear gradient of colors. The result of this function is an object of the CSS &lt;gradient&gt; data type. Like any other gradient, a CSS linear gradient is not a CSS &lt;color&gt; but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size&#xA0;of the element it applies to.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient\"><code>linear-gradient()</code></a> backgrounds.</dd>",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Cubic_Bezier_Generator\">Cubic Bezier Generator</a>"
        }, {
            "value": "This is a sample tool; it lets you edit Bezier curves. This is not really yet a useful tool, but will be!",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Linear-gradient_Generator\">Linear-gradient Generator</a>"
        }, {
            "value": "This tool can be used to create custom CSS3 <a title=\"The CSS linear-gradient() function creates an &lt;image&gt; which represents a linear gradient of colors. The result of this function is an object of the CSS &lt;gradient&gt; data type. Like any other gradient, a CSS linear gradient is not a CSS &lt;color&gt; but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size&#xA0;of the element it applies to.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient\"><code>linear-gradient()</code></a> backgrounds.",
            "description": ""
        }]
    },
    "Type selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors",
        "SUMMARY": "CSS type selectors match elements by node name. Used alone, therefore, a type selector for a particular node name selects all elements of that type — that is, with that node name — in the document.",
        "VALUES": []
    },
    "Universal selectors": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors",
        "SUMMARY": "An asterisk (<code>*</code>) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect. For instance, <code>*.warning</code> and <code>.warning</code> are considered equal.",
        "VALUES": []
    },
    "Used value": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/used_value",
        "SUMMARY": "The used value of any CSS property is the final value of that property after all calculations have been performed. For some properties, used values can be retrieved by calling <a href=\"https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle\" title=\"en/DOM/window.getComputedStyle\" style=\"text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;\">window.getComputedStyle</a>. Dimensions (e.g., <code>width</code>, <code>line-height</code>) are all in pixels, shorthand properties (e.g., background) are consistent with their component properties (e.g., <code>background-color</code>, <code>display)</code> and consistent with <code>position</code> and <code>float</code>, and every CSS property has a value.",
        "VALUES": []
    },
    "Using CSS variables": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables",
        "SUMMARY": "<strong>CSS Variables</strong> are entities defined by CSS authors which contain specific values to be reused throughout a document. They are set using custom property notation (e.g. <strong><code>--main-color: black;</code></strong>) and are accessed using the <code>var()</code> function (e.g. <code>color: <strong>var(--main-color)</strong>;</code>) .",
        "VALUES": []
    },
    "Value definition syntax": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax",
        "SUMMARY": "",
        "VALUES": []
    },
    "Visual formatting model": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model",
        "SUMMARY": "The CSS <em>visual formatting model</em> is an algorithm that processes a document and displays it on visual media.",
        "VALUES": []
    },
    "WebKit extensions": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions",
        "SUMMARY": "WebKit supports a number of extensions to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> that are prefixed with <code>-webkit</code>. All <code>-webkit</code> prefixed properties also work with an <code>-apple</code> prefix.",
        "VALUES": []
    },
    "actual value": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/actual_value",
        "SUMMARY": "The <strong>actual value</strong> of a CSS property is the used value after all approximations have been applied. For example, a user agent may only be able to render borders with a integer pixel value and may be forced to approximate the computed width of the border.",
        "VALUES": []
    },
    "align-content": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/align-content",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <strong><code>align-content</code></strong> property defines how the browser distributes space between and around content items along the main-axis of their container.",
        "VALUES": [{
            "value": "<code>start</code>",
            "description": "The items are packed flush to each other toward the start edge of the alignment container in the cross axis."
        }, {
            "value": "<code>end</code>",
            "description": "The items are packed flush to each other toward the end edge of the alignment container in the cross axis."
        }, {
            "value": "<code>flex-start</code>",
            "description": "The items are packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s cross-start side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>start</code>."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The items are packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s cross-end side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>end</code>."
        }, {
            "value": "<code>center</code>",
            "description": "The items are packed flush to each other toward the center of the of the alignment container along the cross axis."
        }, {
            "value": "<code>left</code>",
            "description": "The items are packed flush to each other toward the left edge of the alignment container in the cross axis. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>right</code>",
            "description": "The items are packed flush to each other toward the right edge of the alignment container in the cross axis. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>baseline<br>\n first baseline</code><br>\n <code>last baseline</code>",
            "description": "Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box&#x2019;s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>\n The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>."
        }, {
            "value": "<code>space-between</code>",
            "description": "The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge."
        }, {
            "value": "<code>space-around</code>",
            "description": "The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items."
        }, {
            "value": "<code>space-evenly</code>",
            "description": "The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same."
        }, {
            "value": "<code>stretch</code>",
            "description": "If the combined size of the items&#xA0;along the cross axis is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\" title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\"><code>max-height</code></a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\" title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\"><code>max-width</code></a> (or equivalent functionality), so that the combined size exactly fills the alignment container&#xA0;along the cross axis."
        }, {
            "value": "<code>safe</code>",
            "description": "If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>."
        }, {
            "value": "<code>unsafe</code>",
            "description": "Regardless of the relative sizes of the item and alignment container, the given alignment value is honored."
        }]
    },
    "align-items": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/align-items",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <strong><code>align-items</code></strong> property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content\" title=\"The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.\"><code>justify-content</code></a> but in the perpendicular direction.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "The effect of this keyword is dependent of the layout mode we are in:\n <ul>\n  <li>In absolutely-positioned layouts, the keyword behaves like <code>start</code> on <em>replaced</em> absolutely-positioned boxes, and as <code>stretch</code> on <em>all other</em> absolutely-positioned boxes. <span style=\"display: none;\"> </span><span style=\"display: none;\">&#xA0;</span><span style=\"display: none;\"> </span></li>\n  <li>In static position of absolutely-positioned layouts, the keyword behaves as <code>stretch</code>.</li>\n  <li>For flex items, the keyword behaves as <code>stretch</code>.</li>\n  <li>For grid items, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>\n  <li>The property doesn&apos;t apply to block-level boxes, and to table cells.</li>\n </ul>\n "
        }, {
            "value": "<code>flex-start</code>",
            "description": "The cross-start margin edge of the flex item is flushed with the cross-start edge of the line."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The cross-end margin edge of the flex item is flushed with the cross-end edge of the line."
        }, {
            "value": "<code>center</code>",
            "description": "The flex item&apos;s margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions."
        }, {
            "value": "<code>start</code>",
            "description": "The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>end</code>",
            "description": "The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>center</code>",
            "description": "The items are packed flush to each other toward the center of the of the alignment container."
        }, {
            "value": "<code>left</code>",
            "description": "The items are packed flush to each other toward the left edge of the alignment container. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>right</code>",
            "description": "The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>self-start</code>",
            "description": "The items is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis."
        }, {
            "value": "<code>self-end</code>",
            "description": "The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis."
        }, {
            "value": "<code>baseline</code>",
            "description": "<code>first baseline<br>\n last baseline</code>"
        }, {
            "value": "All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.",
            "description": "<code>stretch</code>"
        }, {
            "value": "Flex items are stretched such as the cross-size of the item&apos;s margin box is the same as the line while respecting width and height constraints.",
            "description": "<code>safe</code>"
        }, {
            "value": "If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>.",
            "description": "<code>unsafe</code>"
        }]
    },
    "align-self": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/align-self",
        "SUMMARY": "The <strong><code>align-self</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property aligns flex items of the current flex line overriding the <a title=\"The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-items\"><code>align-items</code></a> value. If any of the item's cross-axis margin is set to <code>auto</code>, then <code>align-self</code> is ignored.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Computes to the parent&apos;s <a title=\"The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-items\"><code>align-items</code></a> value."
        }, {
            "value": "<code>normal</code>",
            "description": "The effect of this keyword is dependent of the layout mode we are in:\n <ul>\n  <li>In absolutely-positioned layouts, the keyword behaves like <code>start</code> on <em>replaced</em> absolutely-positioned boxes, and as <code>stretch</code> on <em>all other</em> absolutely-positioned boxes. <span style=\"display: none;\"> </span><span style=\"display: none;\">&#xA0;</span><span style=\"display: none;\"> </span></li>\n  <li>In static position of absolutely-positioned layouts, the keyword behaves as <code>stretch</code>.</li>\n  <li>For flex items, the keyword behaves as <code>stretch</code>.</li>\n  <li>For grid items, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>\n  <li>The property doesn&apos;t apply to block-level boxes, and to table cells.</li>\n </ul>\n "
        }, {
            "value": "<code>self-start</code>",
            "description": "Aligns the items to be flush with the edge of the alignment container corresponding to the item&apos;s start side in the cross axis."
        }, {
            "value": "<code>self-end</code>",
            "description": "Aligns the items to be flush with the edge of the alignment container corresponding to the item&apos;s end side in the cross axis."
        }, {
            "value": "<code>flex-start</code>",
            "description": "The cross-start margin edge of the flex item is flushed with the cross-start edge of the line."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The cross-end margin edge of the flex item is flushed with the cross-end edge of the line."
        }, {
            "value": "<code>center</code>",
            "description": "The flex item&apos;s margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions."
        }, {
            "value": "<code>baseline<br>\n first baseline</code><br>\n <code>last baseline</code>",
            "description": "Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box&#x2019;s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>\n The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>."
        }, {
            "value": "<code>stretch</code>",
            "description": "If the combined size of the items along the cross axis is less than the size of the alignment container and the item is <code>auto</code>-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by <a title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\"><code>max-height</code></a>/<a title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\"><code>max-width</code></a> (or equivalent functionality), so that the combined size of all <code>auto</code>-sized items exactly fills the alignment container along the cross axis."
        }, {
            "value": "<code>safe</code>",
            "description": "If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>."
        }, {
            "value": "<code>unsafe</code>",
            "description": "Regardless of the relative sizes of the item and alignment container, the given alignment value is honored."
        }]
    },
    "all": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/all",
        "SUMMARY": "The CSS<em> </em><code><strong>all</strong></code> shorthand property resets all properties, apart from <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi\" title=\"The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.\"><code>unicode-bidi</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, to their initial or inherited value.",
        "VALUES": [{
            "value": "<code>initial</code>",
            "description": "This keyword indicates to change all the properties applying to the element or the element&apos;s parent to their initial value. <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi\" title=\"The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.\"><code>unicode-bidi</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> values are not affected."
        }, {
            "value": "<code>inherit</code>",
            "description": "This keyword indicates to change all the properties applying to the element or the element&apos;s parent to their parent value. <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi\" title=\"The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.\"><code>unicode-bidi</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> values are not affected."
        }, {
            "value": "<code>unset</code>",
            "description": "This keyword indicates to change all the properties applying to the element or the element&apos;s parent to their parent value if they are inheritable or to their initial value if not. <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi\" title=\"The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.\"><code>unicode-bidi</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> values are not affected."
        }, {
            "value": "<code>revert</code>",
            "description": "If the cascaded value of a property is the revert keyword, the behavior depends on the origin to which the declaration belongs:\n <dl>\n  <dt>user-agent origin</dt>\n  <dd>Equivalent to unset.</dd>\n  <dt>user origin</dt>\n  <dd>Rolls back the cascade to the user-agent level, so that the specified value is calculated as if no author-level or user-level rules were specified for this property.</dd>\n  <dt>author origin</dt>\n  <dd>Rolls back the cascade to the user level, so that the specified value is calculated as if no author-level rules were specified for this property. For the purpose of revert, this origin includes the Override and Animation origins.</dd>\n </dl>\n "
        }, {
            "value": "user-agent origin",
            "description": "Equivalent to unset."
        }, {
            "value": "user origin",
            "description": "Rolls back the cascade to the user-agent level, so that the specified value is calculated as if no author-level or user-level rules were specified for this property."
        }, {
            "value": "author origin",
            "description": "Rolls back the cascade to the user level, so that the specified value is calculated as if no author-level rules were specified for this property. For the purpose of revert, this origin includes the Override and Animation origins."
        }]
    },
    "animation": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation",
        "SUMMARY": "The <strong><code>animation</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand property</a> for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name\" title=\"The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.\"><code>animation-name</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration\" title=\"The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.\"><code>animation-duration</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function\" title=\"The animation-timing-function CSS property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several &lt;timing-function&gt;.\"><code>animation-timing-function</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay\" title=\"The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.\"><code>animation-delay</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count\" title=\"The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping. If multiple values are specified, each time the animation is played, the next value in the list is used, cycling back to the first value after the last one is used.\"><code>animation-iteration-count</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction\" title=\"The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.\"><code>animation-direction</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode\" title=\"The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.\"><code>animation-fill-mode</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state\" title=\"The animation-play-state CSS property determines whether an animation is running or paused. This can be queried to determine whether or not the animation is currently running. In addition, its value can be set to pause and resume playback of an animation.\"><code>animation-play-state</code></a>.",
        "VALUES": []
    },
    "animation-delay": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay",
        "SUMMARY": "The <strong><code>animation-delay</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.",
        "VALUES": [{
            "value": "<code>&lt;time&gt;</code>",
            "description": "The time offset from the time at which the animation is applied to the element at which the animation should begin. This may be specified in either seconds (by specifying <code>s</code> as the unit) or milliseconds (by specifying <code>ms</code> as the unit). If you don&apos;t specify a unit, the statement is invalid."
        }]
    },
    "animation-direction": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction",
        "SUMMARY": "The <strong><code>animation-direction</code></strong> CSS property indicates whether the animation should play in reverse on alternate cycles.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "The animation should play forward each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again. This is the default animation direction setting."
        }, {
            "value": "<code>reverse</code>",
            "description": "The animation plays backward each cycle. Each time the animation cycles, the animation resets to the end state and starts over again."
        }, {
            "value": "<code>alternate</code>",
            "description": "The animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an <code>ease-in</code> animation is replaced with an <code>ease-out</code> animation when played in reverse. The count to determine if it is an even or an odd iteration starts at one."
        }, {
            "value": "<code>alternate-reverse</code>",
            "description": "The animation plays backward on the first play-through, then forward on the next, then continues to alternate. The count to determinate if it is an even or an odd iteration starts at one."
        }]
    },
    "animation-duration": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration",
        "SUMMARY": "The <strong><code>animation-duration</code></strong> CSS property specifies the length of time that an animation should take to complete one cycle.",
        "VALUES": [{
            "value": "<code>&lt;time&gt;</code>",
            "description": "The duration that an animation should take to complete one cycle. This may be specified in either seconds (by specifying <code>s</code> as the unit) or milliseconds (by specifying <code>ms</code> as the unit). If you don&apos;t specify a unit, the declaration will be invalid."
        }]
    },
    "animation-fill-mode": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode",
        "SUMMARY": "The <strong><code>animation-fill-mode</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property specifies how a CSS animation should apply styles to its target before and after it is executing.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The animation will not apply any styles to the target when it&apos;s not executing; it will instead be displayed using its state based on all other CSS rules applied to it."
        }, {
            "value": "<code>forwards</code>",
            "description": "The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of <a title=\"The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction\"><code>animation-direction</code></a> and <a title=\"The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping. If multiple values are specified, each time the animation is played, the next value in the list is used, cycling back to the first value after the last one is used.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count\"><code>animation-iteration-count</code></a>:\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <th scope=\"col\"><code>animation-direction</code></th>\n    <th scope=\"col\"><code>animation-iteration-count</code></th>\n    <th scope=\"col\">last keyframe encountered</th>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <td><code>normal</code></td>\n    <td>even or odd</td>\n    <td><code>100%</code> or <code>to</code></td>\n   </tr>\n   <tr>\n    <td><code>reverse</code></td>\n    <td>even or odd</td>\n    <td><code>0%</code> or <code>from</code></td>\n   </tr>\n   <tr>\n    <td><code>alternate</code></td>\n    <td>even</td>\n    <td><code>0%</code> or <code>from</code></td>\n   </tr>\n   <tr>\n    <td><code>alternate</code></td>\n    <td>odd</td>\n    <td><code>100%</code> or <code>to</code></td>\n   </tr>\n   <tr>\n    <td><code>alternate-reverse</code></td>\n    <td>even</td>\n    <td><code>100%</code> or <code>to</code></td>\n   </tr>\n   <tr>\n    <td><code>alternate-reverse</code></td>\n    <td>odd</td>\n    <td><code>0%</code> or <code>from</code></td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<code>backwards</code>",
            "description": "The animation will apply the values defined in the first relevant <a href=\"https://developer.mozilla.org/en-US/docs/CSS/@keyframes\">keyframe</a> as soon as it is applied to the target, and retain this during the <a title=\"The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it&apos;s applied to an element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay\"><code>animation-delay</code></a> period. The first relevant keyframe depends on the value of <a title=\"The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction\"><code>animation-direction</code></a>:\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <th scope=\"col\"><code>animation-direction</code></th>\n    <th scope=\"col\">first relevant keyframe</th>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <td><code>normal</code> or <code>alternate</code></td>\n    <td><code>0%</code> or <code>from</code></td>\n   </tr>\n   <tr>\n    <td><code>reverse</code> or <code>alternate-reverse</code></td>\n    <td><code>100%</code> or <code>to</code></td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<code>both</code>",
            "description": "The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions."
        }]
    },
    "animation-iteration-count": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count",
        "SUMMARY": "The <strong><code>animation-iteration-count</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property defines the number of times an animation cycle should be played before stopping. If multiple values are specified, each time the animation is played, the next value in the list is used, cycling back to the first value after the last one is used.",
        "VALUES": [{
            "value": "<code>infinite</code>",
            "description": "The animation will repeat forever."
        }, {
            "value": "<code>&lt;number&gt;</code>",
            "description": "The number of times the animation should repeat; this is <code>1</code> by default. Negative values are invalid. You may specify non-integer values to play part of an animation cycle (for example <code>0.5</code> will play half of the animation cycle)."
        }]
    },
    "animation-name": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name",
        "SUMMARY": "The <strong><code>animation-name</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property specifies a list of animations that should be applied to the selected element. Each name indicates a <a title=\"The @keyframes CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you'd get when letting the browser handle everything automatically.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes\"><code>@keyframes</code></a> at-rule that defines the property values for the animation sequence.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Is a special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;custom-ident&gt;</code></a>",
            "description": "A string identifying the animation. This identifier is composed by a combination of case-insensitive letters&#xA0;<code>a</code> to <code>z</code>, numbers <code>0</code> to <code>9</code>, underscores (<code>_</code>), and/or dashes (<code>-</code>). The first non-dash character must be a letter (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier. It can&apos;t be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code> in any combination of cases."
        }]
    },
    "animation-play-state": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state",
        "SUMMARY": "The <strong><code>animation-play-state</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property determines whether an animation is running or paused. This can be queried to determine whether or not the animation is currently running. In addition, its value can be set to pause and resume playback of an animation.",
        "VALUES": [{
            "value": "<code>running</code>",
            "description": "The animation is currently playing."
        }, {
            "value": "<code>paused</code>",
            "description": "The animation is currently paused."
        }]
    },
    "animation-timing-function": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function",
        "SUMMARY": "The <code><strong>animation-timing-function</strong></code> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <a title=\"The &lt;single-transition-timing-function&gt; 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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function\"><code>&lt;timing-function&gt;</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;timingfunction&gt;</code>",
            "description": "Each <a title=\"The &lt;single-transition-timing-function&gt; 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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function\"><code>&lt;timing-function&gt;</code></a> represents the timing function to link to the corresponding property to animate, as defined in <a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-property\" class=\"new\"><code>animation-property</code></a>."
        }]
    },
    "appearance": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/appearance",
        "SUMMARY": "The <strong><code>appearance</code></strong> CSS property indicates whether to display an element using platform-native styling based on the operating system's theme or not.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The user agent may render form controls using native controls of the host operating system or with a look and feel not otherwise expressible in CSS. On form control elements where the computed value is <code>auto</code> UAs may disregard some CSS properties to ensure that the intended appearance is preserved, or because these properties may not be meaningful for the chosen appearance. However, the following properties must still be honored:\n <ul>\n  <li><a title=\"The CSS all shorthand property resets all properties, apart from&#xA0;unicode-bidi and direction, to their initial or inherited value.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/all\"><code>all</code></a></li>\n  <li><a title=\"The bottom CSS property participates in specifying the position of positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\"><code>bottom</code></a></li>\n  <li><a title=\"The appearance CSS property indicates whether to&#xA0;display an element using platform-native styling based on the operating system&apos;s theme or not.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/appearance\"><code>appearance</code></a></li>\n  <li><a title=\"The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/clear\"><code>clear</code></a></li>\n  <li><a title=\"The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\"><code>cursor</code></a></li>\n  <li><a title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\"><code>direction</code></a></li>\n  <li><a title=\"The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\"><code>display</code></a></li>\n  <li><a title=\"The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/float\"><code>float</code></a></li>\n  <li><a title=\"The left CSS property specifies part of the position of positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\"><code>left</code></a></li>\n  <li><a title=\"The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin\"><code>margin</code></a> and related long-hand properties</li>\n  <li><a title=\"The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\"><code>position</code></a></li>\n  <li><a title=\"The right CSS property specifies part of the position of positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\"><code>right</code></a></li>\n  <li><a title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\"><code>top</code></a></li>\n  <li><a title=\"The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi\"><code>unicode-bidi</code></a></li>\n  <li><a title=\"The visibility property can be used to hide an element while leaving the space where it would have been. It can also hide rows or columns of a table.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/visibility\"><code>visibility</code></a></li>\n  <li><a title=\"The z-index property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/z-index\"><code>z-index</code></a></li>\n </ul>\n "
        }, {
            "value": "<code>none</code>",
            "description": "Form controls are not made to look like native controls, making them non-replaced elements. The element is rendered following the usual rules of CSS.&#xA0; No other replaced elements other than form controls are affected."
        }]
    },
    "attr": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/attr",
        "SUMMARY": "The <code>attr()</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on pseudo-elements too and, in this case, the value of the attribute on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a>'s originated element is returned.",
        "VALUES": [{
            "value": "<code>attribute-name</code>",
            "description": "Is the name of an attribute on the HTML element referenced in the CSS."
        }, {
            "value": "<code>&lt;type-</code>or-unit&gt; <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Is a keyword representing either the type of the attribute&apos;s value, or its unit, as in HTML some attributes have implicit units. If the use of <code>&lt;type-or-unit&g … [Строка слишком длинная. Вы можете скачать файл]
        }, {
            "value": "<code>&lt;fallback&gt;</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code>&lt;fallback&gt;</code> value must be of the type defined by <code>&lt;type-or-unit&gt;</code>. If not set, CSS will use the default value defined for each <code>&lt;type-or-unit&gt;</code>."
        }]
    },
    "aural": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/Aural",
        "SUMMARY": "A <a href=\"https://developer.mozilla.org/en-US/docs/CSS/@media#Media_groups\" title=\"CSS/@media#Media_groups\">media group</a> defined by the <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> standards.",
        "VALUES": []
    },
    "azimuth": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/azimuth",
        "SUMMARY": "In combination with<code> elevation</code>, <code>azimuth</code> enables different audio sources to be positioned spatially for aural presentation. This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage.",
        "VALUES": [{
            "value": "angle",
            "description": "Audible source position is described as an angle within the range <code>-360deg</code> to <code>360deg</code>. The value <code>0deg</code> means directly ahead in the center of the sound stage (this is the default value). <code>90deg</code> is to the right, <code>180deg</code> is behind, and <code>270deg</code> or <code>-90deg</code> is to the left."
        }]
    },
    "backdrop-filter": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter",
        "SUMMARY": "The <code>backdrop-filter</code> property provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element's transparency/opacity.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Keyword indicating that no filter is applied to the backdrop."
        }, {
            "value": "<code>&lt;filter-function-list&gt;</code>",
            "description": "Space-separated list of filter functions, which will be applied to the backdrop. The different filter functions are the same as for the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Functions\"><code>filter</code></a> property."
        }]
    },
    "backface-visibility": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility",
        "SUMMARY": "The <strong><code>backface-visibility</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property determines whether or not the back face of the element is visible when facing the user. The back face of an element is always a transparent background, letting, when visible, a mirror image of the front face be displayed.",
        "VALUES": [{
            "value": "<code>visible</code>",
            "description": "This keyword means that the back face is visible, allowing the front face to be displayed mirrored."
        }, {
            "value": "<code>hidden</code>",
            "description": "This keyword means that the back face is not visible, hiding the front face."
        }]
    },
    "background": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background",
        "SUMMARY": "The <strong><code>background</code></strong> CSS property is a shorthand for setting the individual background values in a single place in the style sheet. <code>background</code> can be used to set the values for one or more of: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip\" title=\"The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.\"><code>background-clip</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-color\" title=\"The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.\"><code>background-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\"><code>background-image</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin\" title=\"The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.\"><code>background-origin</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-position\" title=\"The background-position CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin.\"><code>background-position</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\" title=\"The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.\"><code>background-repeat</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" title=\"The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.\"><code>background-size</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment\" title=\"If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.\"><code>background-attachment</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;attachment&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment\" title=\"If a background-image is specified, the background-attachment CSS property determines whether that image&apos;s position is fixed within the viewport, or scrolls along with its containing block.\"><code>background-attachment</code></a>"
        }, {
            "value": "<code>&lt;box&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip\" title=\"The background-clip CSS property specifies whether an element&apos;s background, either the color or image, extends underneath its border.\"><code>background-clip</code></a>"
        }, {
            "value": "<code>&lt;background-color&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-color\" title=\"The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.\"><code>background-color</code></a>"
        }, {
            "value": "<code>&lt;bg-image&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\"><code>background-image</code></a>"
        }, {
            "value": "<code>&lt;position&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-position\" title=\"The background-position CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin.\"><code>background-position</code></a>"
        }, {
            "value": "<code>&lt;repeat-style&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\" title=\"The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.\"><code>background-repeat</code></a>"
        }, {
            "value": "<code>&lt;bg-size&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" title=\"The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.\"><code>background-size</code></a>. This property must be specified after <strong>&lt;position&gt;</strong>, separated with the &apos;/&apos; character."
        }]
    },
    "background-attachment": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment",
        "SUMMARY": "If a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\"><code>background-image</code></a> is specified, the <strong><code>background-attachment</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.",
        "VALUES": [{
            "value": "<code>fixed</code>",
            "description": "This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a &#x2018;fixed&#x2019; background doesn&apos;t move with the element."
        }, {
            "value": "<code>local</code>",
            "description": "This keyword means that the background is fixed with regard to the element&apos;s contents: if the element has a scrolling mechanism, the background scrolls with the element&apos;s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them."
        }, {
            "value": "<code>scroll</code>",
            "description": "This keyword means that the background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element&apos;s border.)"
        }]
    },
    "background-blend-mode": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode",
        "SUMMARY": "The <strong><code>background-blend-mode</code></strong> CSS property describes how the element's background images should blend with each other and the element's background color.",
        "VALUES": [{
            "value": "<code>&lt;blend-mode&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode\" title=\"The &lt;blend-mode&gt;&#xA0;type is a collection of keywords describing blend modes.\"><code>&lt;blend-mode&gt;</code></a> denoting the blending mode to be applied. There can be several values, separated by commas."
        }]
    },
    "background-clip": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip",
        "SUMMARY": "The <strong><code>background-clip</code></strong> CSS property specifies whether an element's background, either the color or image, extends underneath its border.",
        "VALUES": [{
            "value": "<code>border-box</code>",
            "description": "The background extends to the outside edge of the border (but underneath the border in z-ordering)."
        }, {
            "value": "<code>padding-box</code>",
            "description": "No background is drawn below the border (background extends to the outside edge of the padding)."
        }, {
            "value": "<code>content-box</code>",
            "description": "The background is painted within (clipped to) the content box."
        }, {
            "value": "<code>text </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The background is painted within (clipped to) the foreground text."
        }]
    },
    "background-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-color",
        "SUMMARY": "The <strong><code>background-color</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property sets the background color of an element, either through a color value or the keyword <code>transparent</code>.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "description": "Is a CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> that describes the uniform color of the background. Even if one or several <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\"><code>background-image</code></a> are defined, this color can be affect the rendering, by transparency if the images aren&apos;t opaque. In CSS, <code>transparent</code> is a color."
        }]
    },
    "background-image": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-image",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> <strong><code>background-image</code></strong> property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.",
        "VALUES": [{
            "value": "<a name=\"none\" id=\"none\"><code>none</code></a>",
            "description": "Is a keyword denoting the absence of images."
        }, {
            "value": "<a name=\"image\" id=\"image\"><code>&lt;image&gt;</code></a>",
            "description": "Is an <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; 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.\"><code>&lt;image&gt;</code></a> denoting the image to display. There can be several of them, separated by commas, as <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds\" title=\"Multiple backgrounds\">multiple backgrounds</a> are supported."
        }]
    },
    "background-origin": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin",
        "SUMMARY": "The <strong><code>background-origin</code></strong> CSS property determines the background positioning area, that is the position of the origin of an image specified using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\"><code>background-image</code></a> CSS property.",
        "VALUES": [{
            "value": "<code>border-box</code>",
            "description": "The background extends to the outside edge of the border (but underneath the border in z-ordering)."
        }, {
            "value": "<code>padding-box</code>",
            "description": "No background is drawn below the border (background extends to the outside edge of the padding)."
        }, {
            "value": "<code>content-box</code>",
            "description": "The background is painted within (clipped to) the content box."
        }]
    },
    "background-position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position",
        "SUMMARY": "The <strong><code>background-position</code></strong> CSS property sets the initial position for each defined background image, relative to the background position layer defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin\" title=\"The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.\"><code>background-origin</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;position&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position_value\" title=\"The &lt;position&gt; CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.\"><code>&lt;position&gt;</code></a>&#x2014;that is, one to four values representing a 2D position in relation to&#xA0;the edges of the element&apos;s box. Relative or absolute offsets can be given. Note that the position can be set outside of the element&apos;s box."
        }]
    },
    "background-position-x": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x",
        "SUMMARY": "Technical review completed. Editorial review completed.",
        "VALUES": [{
            "value": "<code>left</code>",
            "description": "Aligns the left edge of the background image with the left edge of the background position layer."
        }, {
            "value": "<code>center</code>",
            "description": "Aligns the center of the background image with the center of the background position layer."
        }, {
            "value": "<code>right</code>",
            "description": "Aligns the right edge of the background image with the right edge of the background position layer."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "A <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> value defines&#xA0;the offset of the given background image&apos;s horizontal edge from the corresponding background position layer&apos;s horitzontal edge. If no edge is mentioned, it refers to the left edge."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> value defining the offset of the given background image&apos;s horitzontal edge from the corresponding background position layer&apos;s horitzontal edge relative to its width. If no edge is given, it refers to the left edge by default."
        }]
    },
    "background-position-y": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y",
        "SUMMARY": "Technical review completed. Editorial review completed.",
        "VALUES": [{
            "value": "<code>top</code>",
            "description": "Aligns the top edge of the background image with the top edge of the background position layer."
        }, {
            "value": "<code>center</code>",
            "description": "Aligns the vertical center of the background image with the vertical center of the background position layer."
        }, {
            "value": "<code>bottom</code>",
            "description": "Aligns the bottom edge of the background image with the bottom edge of the background position layer."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "A <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> value defining the offset of the given background image&apos;s vertical edge from the corresponding background position layer&apos;s vertical edge. If no edge is given, it refers to the top edge."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> value defining the offset of the given background image&apos;s vertical edge from the corresponding background position layer&apos;s vertical edge relative to its height. If no edge is given, it refers to the top edge."
        }]
    },
    "background-repeat": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat",
        "SUMMARY": "The <strong><code>background-repeat</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.",
        "VALUES": [{
            "value": "<code>&lt;repeat-style&gt;</code>",
            "description": "The one-value syntax is a shorthand for the full two-value syntax:"
        }, {
            "value": "\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td><strong>Single value</strong></td>\n    <td><strong>Two-value equivalent</strong></td>\n   </tr>\n   <tr>\n    <td><code>repeat-x</code></td>\n    <td><code>repeat no-repeat</code></td>\n   </tr>\n   <tr>\n    <td><code>repeat-y</code></td>\n    <td><code>no-repeat repeat</code></td>\n   </tr>\n   <tr>\n    <td><code>repeat</code></td>\n    <td><code>repeat repeat</code></td>\n   </tr>\n   <tr>\n    <td><code>space</code></td>\n    <td><code>space space</code></td>\n   </tr>\n   <tr>\n    <td><code>round</code></td>\n    <td><code>round round</code></td>\n   </tr>\n   <tr>\n    <td><code>no-repeat</code></td>\n    <td><code>no-repeat no-repeat</code></td>\n   </tr>\n  </tbody>\n </table>\n In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior. Here is an explanation of how each option works for either direction:",
            "description": "\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td><code>repeat</code></td>\n    <td>The image is repeated as much as needed to cover the whole background image painting area. The last image will be clipped if it doesn&apos;t fit.</td>\n   </tr>\n   <tr>\n    <td><code>space</code></td>\n    <td>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 <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-position\" title=\"The background-position CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin.\"><code>background-position</code></a> property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using <code>space</code> is when there isn&apos;t enough room to display one image.</td>\n   </tr>\n   <tr>\n    <td><code>round</code></td>\n    <td>As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left &gt;= half of the image width) 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.</td>\n   </tr>\n   <tr>\n    <td><code>no-repeat</code></td>\n    <td>The image is not repeated (and hence the background image painting area will not necessarily be entirely covered). The position of the non-repeated background image is defined by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-position\" title=\"The background-position CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin.\"><code>background-position</code></a> CSS property.</td>\n   </tr>\n  </tbody>\n </table>\n "
        }]
    },
    "background-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-size",
        "SUMMARY": "The <strong><code>background-size</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.",
        "VALUES": [{
            "value": "<a name=\"length\" id=\"length\"><code>&lt;length&gt;</code></a>",
            "description": "A <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a></code> value that scales the background image to the specified length in the corresponding dimension. Negative lengths are not allowed."
        }, {
            "value": "<a name=\"&lt;percentage&gt;\" id=\"&lt;percentage&gt;\"><code>&lt;percentage&gt;</code></a>",
            "description": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin\" title=\"The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.\"><code>background-origin</code></a>. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>attachment</code></a> is <code>fixed</code>, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed."
        }, {
            "value": "<a name=\"auto\" id=\"auto\"><code>auto</code></a>",
            "description": "A keyword that scales the background image in the corresponding direction such that its intrinsic proportion is maintained."
        }, {
            "value": "<a name=\"contain\" id=\"contain\"><code>contain</code></a>",
            "description": "A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn&apos;t get squished). Image is <strong> letterboxed</strong> within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color."
        }, {
            "value": "<a name=\"cover\" id=\"cover\"><code>cover</code></a>",
            "description": "A keyword that is the inverse of <code>contain</code>. Scales the image as large as possible and maintains image aspect ratio (image doesn&apos;t get squished). The image &quot;covers&quot; the entire width or height of the container. When the image and container have different dimensions, <em>the image is clipped</em> either left/right or top/bottom."
        }, {
            "value": "If both components of <code>background-size</code> are specified and are not <code>auto</code>:",
            "description": "The background image renders at the specified size."
        }, {
            "value": "If the <code>background-size</code> is <code>contain</code> or <code>cover</code>:",
            "description": "The image is rendered, preserving its intrinsic proportion, at the largest size contained within, or covering, the background positioning area.&#xA0; If the image has no intrinsic proportion, then it is rendered at the size of the background positioning area."
        }, {
            "value": "If the <code>background-size</code> is <code>auto</code> or <code>auto auto</code>:",
            "description": "If the image has both intrinsic dimensions, it is rendered at that size.&#xA0; If it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the background positioning area.&#xA0; If it has no dimensions but has a proportion, it&apos;s rendered as if <code>contain</code> had been specified instead.&#xA0; If the image has one intrinsic dimension and a proportion, it&apos;s rendered at the size determined by that one dimension and the proportion.&#xA0; If the image has one intrinsic dimension but no proportion, it&apos;s rendered using the intrinsic dimension and the corresponding dimension of the background positioning area.\n <div class=\"note\"><strong>Note:</strong> SVG images have a <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio\">preserveAspectRatio</a> attribute which defaults to the equivalent of &apos;contain&apos;. On Firefox 43, as opposed to Chrome 52,&#xA0;an explicit background-size&#xA0;causes preserveAspectRatio to be ignored.</div>\n "
        }, {
            "value": "If the background-size has one <code>auto</code> component and one non-<code>auto</code> component:",
            "description": "If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion.&#xA0; If the image has no intrinsic proportion, use the specified dimension for that dimension.&#xA0; For the other dimension, use the image&apos;s corresponding intrinsic dimension if there is one.&#xA0; If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area."
        }]
    },
    "block-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/block-size",
        "SUMMARY": "The <strong><code>block-size</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical size of an element's block depending on its writing mode. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> or the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> property depending on the value defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>block-size</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> properties."
        }]
    },
    "border": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border",
        "SUMMARY": "The <code>border</code> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand property</a> for setting the individual border property values in a single place in the style sheet. <code>border</code> can be used to set the values for one or more of: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;</code>",
            "description": "Default value <code>medium</code> is used if absent. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a>."
        }, {
            "value": "<code>&lt;br-style&gt;</code>",
            "description": "Default value <code>none</code> is used if absent. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a>."
        }, {
            "value": "<code>&lt;color&gt;</code>",
            "description": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> denoting the color of the border. If not set, its default value is the value of the element&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"The color property sets the foreground color of an element&apos;s text content, and its decorations. It also sets the &lt;currentcolor&gt; value which may be used as an indirect value on other properties, and is the default for other color properties, such as border-color.\"><code>color</code></a> property (the text color, not the background color). See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a>."
        }]
    },
    "border-block-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end",
        "SUMMARY": "The<strong> <code>border-block-end</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for setting the individual logical block end border property values in a single place in the style sheet. <code>border-block-end</code> can be used to set the values for one or more of: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width\" title=\"The border-block-end-width CSS property defines the width of the logical block end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-end-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style\" title=\"The border-block-end-style CSS property defines the style of the logical block end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style,&#xA0;border-right-style,&#xA0;border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-end-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color\" title=\"The border-block-end-color CSS property defines the color of the logical block end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color,&#xA0;border-right-color,&#xA0;border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-end-color</code></a>. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a>"
        }, {
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a>"
        }, {
            "value": "<code>&lt;&apos;color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"The color property sets the foreground color of an element&apos;s text content, and its decorations. It doesn&apos;t affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.\"><code>color</code></a>"
        }]
    },
    "border-block-end-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color",
        "SUMMARY": "The <code>border-block-end-color</code> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the color of the logical block end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color\"><code>border-top-color</code></a>, <a title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties&#xA0; border-color or border-right are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color\"><code>border-right-color</code></a>, <a title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color\"><code>border-bottom-color</code></a>, or <a title=\"The border-left-color CSS property sets the color of the left border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color\"><code>border-left-color</code></a> property depending on the values defined for <a title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\"><code>writing-mode</code></a>, <a title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\"><code>direction</code></a>, and <a title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a>"
        }]
    },
    "border-block-end-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style",
        "SUMMARY": "The<strong> <code>border-block-end-style</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the style of the logical block end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a>"
        }]
    },
    "border-block-end-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width",
        "SUMMARY": "The <strong><code>border-block-end-width</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the width of the logical block end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a>"
        }]
    },
    "border-block-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start",
        "SUMMARY": "The<strong> <code>border-block-start</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet. <code>border-block-start</code> can be used to set the values for one or more of: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width\" title=\"The border-block-start-width CSS property defines the width of the logical block start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-start-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style\" title=\"The border-block-start-style CSS property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style,&#xA0;border-right-style,&#xA0;border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-start-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color\" title=\"The border-block-start-color CSS property defines the color of the logical block start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color,&#xA0;border-right-color,&#xA0;border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-start-color</code></a>. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a>"
        }, {
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a>"
        }, {
            "value": "<code>&lt;&apos;color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"The color property sets the foreground color of an element&apos;s text content, and its decorations. It doesn&apos;t affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.\"><code>color</code></a>"
        }]
    },
    "border-block-start-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color",
        "SUMMARY": "The <strong><code>border-block-start-color</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the color of the logical block start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties&#xA0; border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the left border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a>"
        }]
    },
    "border-block-start-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style",
        "SUMMARY": "The <strong><code>border-block-start-style</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a>"
        }]
    },
    "border-block-start-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width",
        "SUMMARY": "The <strong><code>border-block-start-width</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the width of the logical block start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a title=\"The border-top-width CSS property sets the width of the top border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\"><code>border-top-width</code></a>, <a title=\"The border-right-width CSS property sets the width of the right border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\"><code>border-right-width</code></a>, <a title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\"><code>border-bottom-width</code></a>, or <a title=\"The border-left-width CSS property sets the width of the left border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\"><code>border-left-width</code></a> property depending on the values defined for <a title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\"><code>writing-mode</code></a>, <a title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\"><code>direction</code></a>, and <a title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a>"
        }]
    },
    "border-bottom": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom",
        "SUMMARY": "The <code>border-bottom</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property is a shorthand that sets the values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>. These properties describe the bottom border of elements.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>."
        }, {
            "value": "<code>&lt;br-style&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>."
        }, {
            "value": "<code>&lt;color&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>."
        }]
    },
    "border-bottom-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color",
        "SUMMARY": "The<strong> <code>border-bottom-color</code></strong> CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a> are more convenient and preferable.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> CSS value describing the color of the bottom border."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword denoting the color of the bottom border of the parent&apos;s element (which may be different from the <code>border-bottom-color</code> default value)"
        }]
    },
    "border-bottom-left-radius": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius",
        "SUMMARY": "The<strong> <code>border-bottom-left-radius</code></strong> CSS property sets the rounding of the bottom-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square.",
        "VALUES": [{
            "value": "<em>radius</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the radius of the circle to use for the border in that corner."
        }, {
            "value": "<em>horizontal</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner."
        }, {
            "value": "<em>vertical</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the vertical semi-major axis of the ellipsis to use for the border in that corner."
        }, {
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. As absolute length it can be expressed in any unit allowed by the CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid."
        }]
    },
    "border-bottom-right-radius": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius",
        "SUMMARY": "The <strong><code>border-bottom-right-radius</code></strong> CSS property sets the rounding of the bottom-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square.",
        "VALUES": [{
            "value": "<em>radius</em>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> or a <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> denoting the radius of the circle to use for the border in that corner."
        }, {
            "value": "<em>horizontal</em>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> or a <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner."
        }, {
            "value": "<em>vertical</em>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> or a <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> denoting the vertical semi-major axis of the ellipsis to use for the border in that corner."
        }, {
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. As absolute length it can be expressed in any unit allowed by the CSS <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid."
        }]
    },
    "border-bottom-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style",
        "SUMMARY": "The <strong><code>border-bottom-style</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property sets the line style of the bottom border of a box.",
        "VALUES": [{
            "value": "<code>&lt;br-style&gt;</code>",
            "description": "Is a keyword describing the style of the bottom border. It can have the following values:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>none</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: none; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Like for the <code>hidden</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>none</code> value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>hidden</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: hidden; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Like for the <code>none</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>hidden</code> value has the highest priority: it means that if any other conflicting border is set, it won&apos;t be displayed.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>dotted</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dotted; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a series of rounded dots. The spacing of the dots are not defined by the specification and are implementation-specific. The radius of the dots is half the calculated <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>dashed</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dashed; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>solid</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: solid; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a single, straight, solid line.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>double</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: double; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays two straight lines that add up to the pixel amount defined as <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>groove</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: groove; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border leading to a carved effect. It is the opposite of <code>ridge</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>ridge</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: ridge; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>inset</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: inset; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border that makes the box appear embedded. It is the opposite of <code>outset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>outset</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: outset; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">\n     <p>Displays a border that makes the box appear in 3D, embossed. It is the opposite of <code>inset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>ridge</code>.</p>\n    </td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<code>inherit</code>",
            "description": "Represents the border style used by the parent of the current element."
        }]
    },
    "border-bottom-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width",
        "SUMMARY": "The <strong><code>border-bottom-width</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property sets the width of the bottom border of a box.",
        "VALUES": [{
            "value": "&lt;<code>br-width&gt;</code>",
            "description": "Is either a non-negative explicit <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>thin</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A thin border</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>medium</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A medium border</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>thick</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A thick border</td>\n   </tr>\n  </tbody>\n </table>\n The specification doesn&apos;t precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin &#x2264; medium &#x2264; thick</code> inequality and that the values are constant on a single document."
        }, {
            "value": "<code>inherit</code>",
            "description": "Represents the calculated value of the <code>border-bottom-width</code> of the parent&apos;s element."
        }]
    },
    "border-collapse": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse",
        "SUMMARY": "The <strong><code>border-collapse</code></strong> CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.",
        "VALUES": [{
            "value": "<code>separate</code>",
            "description": "Is a keyword requesting the use of the separated-border table rendering model. It is the default value."
        }, {
            "value": "<code>collapse</code>",
            "description": "Is a keyword requesting the use of the collapsed-border table rendering model."
        }]
    },
    "border-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-color",
        "SUMMARY": "The <strong><code>border-color</code></strong> CSS property is a shorthand for setting the color of the four sides of an element's border: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties&#xA0; border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the left border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a>",
        "VALUES": [{
            "value": "<code>color</code>",
            "description": "Is a <a title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\"><code>&lt;color&gt;</code></a> denoting the color to apply to the edges."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that all four values are inherited from their parent&apos;s element calculated value."
        }]
    },
    "border-image": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image",
        "SUMMARY": "The <strong><code>border-image</code></strong> CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases. The <code>border-image</code> is used instead of the border styles given by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a> properties. Though the specification requires that <code>border-style</code> must be present if <code>border-image</code> is used, some browsers may not implement this.",
        "VALUES": [{
            "value": "",
            "description": "See the respective properties for the different values."
        }]
    },
    "border-image-outset": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset",
        "SUMMARY": "The <strong><code>border-image-outset</code></strong> property describes by what amount the <dfn>border image area</dfn> extends beyond the border box.",
        "VALUES": [{
            "value": "<em>sides</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> of the amount by which the border image area extends beyond the border box in all four directions."
        }, {
            "value": "<em>horizontal</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> of the amount by which the border image area extends beyond the border box in both horizontal directions&#xA0;(left and right)."
        }, {
            "value": "<em>vertical</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> of the amount by which the border image area extends beyond the border box in both vertical directions&#xA0;(top and bottom)."
        }, {
            "value": "<em>top</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> of the amount by which the border image area extends beyond the border box past its top edge."
        }, {
            "value": "<em>bottom</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> of the amount by which the border image area extends beyond the border box past its bottom edge."
        }, {
            "value": "<em>right</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> of the amount by which the border image area extends beyond the border box past its right edge."
        }, {
            "value": "<em>left</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> of the amount by which the border image area extends beyond the border box past its left edge."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that all four values are inherited from each parent&#xA0;elements&apos; calculated value."
        }]
    },
    "border-image-repeat": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat",
        "SUMMARY": "The <strong><code>border-image-repeat</code></strong> CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.",
        "VALUES": [{
            "value": "<em>type</em>",
            "description": "One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated both horizontally and vertically."
        }, {
            "value": "<em>horizontal</em>",
            "description": "One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated horizontally."
        }, {
            "value": "<em>vertical</em>",
            "description": "One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated vertically."
        }, {
            "value": "<code>stretch</code>",
            "description": "Keyword indicating that the image must be stretched to fill the gap between the two borders."
        }, {
            "value": "<code>repeat</code>",
            "description": "Keyword indicating that the image must be repeated until it fills the gap between the two borders."
        }, {
            "value": "<code>round</code>",
            "description": "Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn&apos;t fit after being repeated for an integral number of times, the image is rescaled to fit."
        }, {
            "value": "<code>space</code>",
            "description": "The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles."
        }]
    },
    "border-image-slice": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice",
        "SUMMARY": "The <strong><code>border-image-slice</code></strong> CSS property divides the image specified by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source\" title=\"The border-image-source CSS property defines the &lt;image&gt; to use instead of the style of the border. If this property is set to none, the style defined by border-style is used instead.\"><code>border-image-source</code></a> in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.",
        "VALUES": [{
            "value": "<em>slice</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the offset for the four slicing lines. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>."
        }, {
            "value": "<em>horizontal</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the offset for the two slicing lines corresponding to the horizontal edges, the right and the left ones. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>."
        }, {
            "value": "<em>vertical</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the offset for the two slicing lines corresponding to the vertical edges, the top and the bottom ones. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>."
        }, {
            "value": "<em>top</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the offset for the top slicing line. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>."
        }, {
            "value": "<em>bottom</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the offset for the bottom slicing line. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>."
        }, {
            "value": "<em>right</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the offset for the right slicing line. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>."
        }, {
            "value": "<em>left</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the offset for the left slicing line. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>."
        }, {
            "value": "<code>fill</code>",
            "description": "Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that all four values are inherited from their parent&apos;s element calculated value."
        }]
    },
    "border-image-source": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source",
        "SUMMARY": "The <strong><code>border-image-source</code></strong> CSS property defines the <a title=\"The &lt;image&gt; 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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\"><code>&lt;image&gt;</code></a> to use instead of the style of the border. If this property is set to <code>none</code>, the style defined by <a title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\"><code>border-style</code></a> is used instead.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Specifies that no image should be used for the border. Instead the style defined by <a title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\"><code>border-style</code></a> is used."
        }, {
            "value": "<code>&lt;image&gt;</code>",
            "description": "Image reference to use for the border."
        }]
    },
    "border-image-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width",
        "SUMMARY": "The <strong><code>border-image-width</code></strong> CSS property defines the width of the border image by defining inward offsets from the border edges. If the <code>border-image-width</code> is greater than the <a title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\"><code>border-width</code></a>, then the border image extends beyond the padding (and/or content) edge.",
        "VALUES": [{
            "value": "<em>width</em>",
            "description": "Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax."
        }, {
            "value": "<em>vertical</em>",
            "description": "Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax."
        }, {
            "value": "<em>horizontal</em>",
            "description": "Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes."
        }, {
            "value": "<em>top</em>",
            "description": "Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes."
        }, {
            "value": "<em>bottom</em>",
            "description": "Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes."
        }, {
            "value": "<em>right</em>",
            "description": "Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax."
        }, {
            "value": "<em>left</em>",
            "description": "Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that all four values are inherited from their parent&apos;s element calculated value."
        }, {
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "Represents the width of the border. It can be an absolute or relative length. Percentages refer to the width of the border image area for horizontal offsets and the height of the border image area for vertical offsets. This length must not be negative."
        }, {
            "value": "<code>&lt;number&gt;</code>",
            "description": "Represents a multiple of the computed value of the element&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> property to be used as the border width. The number must not be negative."
        }, {
            "value": "<code>auto</code>",
            "description": "Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice\" title=\"The border-image-slice CSS property divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.\"><code>border-image-slice</code></a>. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead."
        }]
    },
    "border-inline-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end",
        "SUMMARY": "The <strong><code>border-inline-end</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for setting the individual logical inline end border property values in a single place in the style sheet. <code>border-inline-end</code> can be used to set the values for one or more of: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width\" title=\"The border-inline-end-width CSS property defines the width of the logical inline end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-end-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style\" title=\"The border-inline-end-style CSS property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style,&#xA0;border-right-style,&#xA0;border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-end-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color\" title=\"The border-inline-end-color CSS property defines the color of the logical inline end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color,&#xA0;border-right-color,&#xA0;border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-end-color</code></a>. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property sets the width of the border of a box. Using the shorthand property border is often more convenient.\"><code>border-width</code></a>"
        }, {
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the elements border.\"><code>border-style</code></a>"
        }, {
            "value": "<code>&lt;&apos;color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"Technical review completed. Editorial review completed.\"><code>color</code></a>"
        }]
    },
    "border-inline-end-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color",
        "SUMMARY": "The <strong><code>border-inline-end-color</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the color of the logical inline end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties&#xA0; border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a>"
        }]
    },
    "border-inline-end-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style",
        "SUMMARY": "The <strong><code>border-inline-end-style</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the elements border.\"><code>border-style</code></a>"
        }]
    },
    "border-inline-end-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width",
        "SUMMARY": "The<strong> <code>border-inline-end-width</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the width of the logical inline end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>border-bottom-width</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property sets the width of the border of a box. Using the shorthand property border is often more convenient.\"><code>border-width</code></a>"
        }]
    },
    "border-inline-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start",
        "SUMMARY": "The<strong> <code>border-inline-start</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for setting the individual logical inline start border property values in a single place in the style sheet. <code>border-inline-start</code> can be used to set the values for one or more of: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width\" title=\"The border-inline-start-width CSS property defines the width of the logical inline start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-start-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style\" title=\"The border-inline-start-style CSS property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style,&#xA0;border-right-style,&#xA0;border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-start-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color\" title=\"The border-inline-start-color CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color,&#xA0;border-right-color,&#xA0;border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-start-color</code></a>. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property sets the width of the border of a box. Using the shorthand property border is often more convenient.\"><code>border-width</code></a>"
        }, {
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the elements border.\"><code>border-style</code></a>"
        }, {
            "value": "<code>&lt;&apos;color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"Technical review completed. Editorial review completed.\"><code>color</code></a>"
        }]
    },
    "border-inline-start-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color",
        "SUMMARY": "The <strong><code>border-inline-start-color</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color\"><code>border-top-color</code></a>, <a title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties&#xA0; border-color or border-right are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color\"><code>border-right-color</code></a>, <a title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color\"><code>border-bottom-color</code></a>, or <a title=\"The border-left-color CSS property sets the color of the left border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color\"><code>border-left-color</code></a> property depending on the values defined for <a title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\"><code>writing-mode</code></a>, <a title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\"><code>direction</code></a>, and <a title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-color&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element&apos;s border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a>"
        }]
    },
    "border-inline-start-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style",
        "SUMMARY": "The <strong><code>border-inline-start-style</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the elements border.\"><code>border-style</code></a>"
        }]
    },
    "border-inline-start-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width",
        "SUMMARY": "The <strong><code>border-inline-start-width</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the width of the logical inline start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>border-bottom-width</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;border-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property sets the width of the border of a box. Using the shorthand property border is often more convenient.\"><code>border-width</code></a>"
        }]
    },
    "border-left": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left",
        "SUMMARY": "The <strong><code>border-left</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property is a shorthand that sets the values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the left border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a>. These properties describe the left border of elements.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a>."
        }, {
            "value": "<code>&lt;br-style&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a>."
        }, {
            "value": "<code>&lt;color&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the left border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a>."
        }]
    },
    "border-left-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color",
        "SUMMARY": "The <strong><code>border-left-color</code></strong> CSS property sets the color of the left border of an element. Note that in many cases the shorthand CSS properties <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> are more convenient and preferable.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> CSS value describing the color of the left border."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword denoting the color of the bottom border of the parent&apos;s element (which may be different from the <code>border-left-color</code> default value)"
        }]
    },
    "border-left-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style",
        "SUMMARY": "The <strong><code>border-left-style</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property sets the line style of the left border of a box.",
        "VALUES": [{
            "value": "<code>&lt;br-style&gt;</code>",
            "description": "Is a keyword describing the style of the left border. It can have the following values:\n <table>\n  <tbody>\n   <tr>\n    <td><code>none</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: none; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Like for the <code>hidden</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>none</code> value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.</td>\n   </tr>\n   <tr>\n    <td><code>hidden</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: hidden; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Like for the <code>none</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>hidden</code> value has the highest priority: it means that if any other conflicting border is set, it won&apos;t be displayed.</td>\n   </tr>\n   <tr>\n    <td><code>dotted</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dotted; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Displays a series of rounded dots. The spacing of the dots are not defined by the specification and are implementation-specific. The radius of the dots is half the calculated <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td><code>dashed</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dashed; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.</td>\n   </tr>\n   <tr>\n    <td><code>solid</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: solid; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Displays a single, straight, solid line.</td>\n   </tr>\n   <tr>\n    <td><code>double</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: double; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Displays two straight lines that add up to the pixel amount defined as <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td><code>groove</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: groove; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Displays a border leading to a carved effect. It is the opposite of <code>ridge</code>.</td>\n   </tr>\n   <tr>\n    <td><code>ridge</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: ridge; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td><code>inset</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: inset; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>Displays a border that makes the box appear embedded. It is the opposite of <code>outset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td><code>outset</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: outset; background-color: palegreen;\"><span style=\"display: none;\">fake</span></div>\n    </td>\n    <td>\n     <p>Displays a border that makes the box appear in 3D, embossed. It is the opposite of <code>inset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>ridge</code>.</p>\n    </td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "inherit",
            "description": "Represents the border style used by the parent of the current element."
        }]
    },
    "border-left-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width",
        "SUMMARY": "The <strong><code>border-left-width</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property sets the width of the left border of a box.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;</code>",
            "description": "Is either a non-negative explicit <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value or a keyword denoting the thickness of the left border. The keyword must be one of the following values:\n <table>\n  <tbody>\n   <tr>\n    <td><code>thin</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>A thin border</td>\n   </tr>\n   <tr>\n    <td><code>medium</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>A medium border</td>\n   </tr>\n   <tr>\n    <td><code>thick</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>A thick border</td>\n   </tr>\n  </tbody>\n </table>\n The specification doesn&apos;t define precisely the thickness of each fo the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin &#x2264; medium &#x2264; thick</code> pattern and is constant on a single document."
        }, {
            "value": "<code>inherit</code>",
            "description": "Represents the calculated value of the <code>border-left-width</code> of the parent&apos;s element."
        }]
    },
    "border-radius": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
        "SUMMARY": "The <strong><code>border-radius</code></strong> CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> data types. Negative values are invalid."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid."
        }]
    },
    "border-right": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right",
        "SUMMARY": "The <strong><code>border-right</code></strong> <a title=\"CSS\" href=\"/en/CSS\">CSS</a> property is a shorthand that sets the values of <a title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties&#xA0; border-color or border-right are more convenient and preferable.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color\"><code>border-right-color</code></a>, <a title=\"The border-right-style CSS property sets the line style of the right border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style\"><code>border-right-style</code></a>, and <a title=\"The border-right-width CSS property sets the width of the right border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\"><code>border-right-width</code></a>. These properties describe the right border of elements.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>."
        }, {
            "value": "<code>&lt;br-style&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>."
        }, {
            "value": "<code>&lt;color&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties&#xA0; border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>."
        }]
    },
    "border-right-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color",
        "SUMMARY": "The <strong><code>border-right-color</code></strong> CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties  <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a> are more convenient and preferable.",
        "VALUES": [{
            "value": "<code>&lt;color</code>&gt;",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> CSS value describing the color of the right border."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword denoting the color of the bottom border of the parent&apos;s element (which may be different from the <code>border-right-color</code> default value)"
        }]
    },
    "border-right-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style",
        "SUMMARY": "The <strong><code>border-right-style</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property sets the line style of the right border of a box.",
        "VALUES": [{
            "value": "<code>&lt;br-style&gt;</code>",
            "description": "Is a keyword describing the style of the bottom border. It can have the following values:\n <table>\n  <tbody>\n   <tr>\n    <td><code>none</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: none; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Like for the <code>hidden</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>none</code> value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.</td>\n   </tr>\n   <tr>\n    <td><code>hidden</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: hidden; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Like for the <code>none</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>hidden</code> value has the highest priority: it means that if any other conflicting border is set, it won&apos;t be displayed.</td>\n   </tr>\n   <tr>\n    <td><code>dotted</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dotted; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Displays a series of rounded dots. The spacing of the dots are not defined by the specification and are implementation-specific. The radius of the dots is half the calculated <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td><code>dashed</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dashed; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.</td>\n   </tr>\n   <tr>\n    <td><code>solid</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: solid; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Displays a single, straight, solid line.</td>\n   </tr>\n   <tr>\n    <td><code>double</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: double; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Displays two straight lines that add up to the pixel amount defined as <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td><code>groove</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-right-style: groove; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Displays a border leading to a carved effect. It is the opposite of <code>ridge</code>.</td>\n   </tr>\n   <tr>\n    <td><code>ridge</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: ridge; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td><code>inset</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: inset; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>Displays a border that makes the box appear embedded. It is the opposite of <code>outset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td><code>outset</code></td>\n    <td>\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: outset; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td>\n     <p>Displays a border that makes the box appear in 3D, embossed. It is the opposite of <code>inset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>ridge</code>.</p>\n    </td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<code>inherit</code>",
            "description": "Represents the border style used by the parent of the current element."
        }]
    },
    "border-right-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width",
        "SUMMARY": "The <strong><code>border-right-width</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property sets the width of the right border of a box.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;</code>",
            "description": "Is either a non-negative explicit <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value or a keyword denoting the thickness of the right border. The keyword must be one of the following values:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>thin</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A thin border</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>medium</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A medium border</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>thick</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A thick border</td>\n   </tr>\n  </tbody>\n </table>\n The specification doesn&apos;t define precisely the thickness of each fo the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the rule&#xA0;<code>thin &#x2264; medium &#x2264; thick</code>, and is constant on a single document."
        }, {
            "value": "<code>inherit</code>",
            "description": "Represents the calculated value of the <code>border-right-width</code> of the parent&apos;s element."
        }]
    },
    "border-spacing": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing",
        "SUMMARY": "The <strong><code>border-spacing</code></strong> CSS property specifies the distance between the borders of adjacent table cells (only for the <a href=\"/en/CSS/border-collapse\" title=\"en/CSS/border-collapse\">separated borders model</a>). This is equivalent to the <code>cellspacing</code> attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.",
        "VALUES": [{
            "value": "<em>length</em>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> value that describes both the horizontal and vertical spacings between cells. It is used only in the one-value syntax."
        }, {
            "value": "<em>horizontal</em>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> value that describes the horizontal spacing between cells, that is the space between cells in adjacent columns. It is used only in the two-value syntax."
        }, {
            "value": "<em>vertical</em>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> value that describes the vertical spacing between cells, that is the space between cells in adjacent rows. It is used only in the two-value syntax."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that the calculated value of <code>border-spacing</code> of the parent&apos;s element must be used."
        }]
    },
    "border-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-style",
        "SUMMARY": "The <strong><code>border-style</code></strong> property is a shorthand property for setting the line style for all four sides of the element´s border.",
        "VALUES": [{
            "value": "<code>&lt;br-style&gt;</code>",
            "description": "Is a keyword describing the style of the bottom border. It can have the following values:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>none</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Like for the <code>hidden</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>none</code> value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>hidden</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Like for the <code>none</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>hidden</code> value has the highest priority: it means that if any other conflicting border is set, it won&apos;t be displayed.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>dotted</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>dashed</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>solid</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a single, straight, solid line.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>double</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays two straight lines that add up to the pixel amount defined as <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> .</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>groove</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border leading to a carved effect. It is the opposite of <code>ridge</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>ridge</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>inset</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border that makes the box appear embedded. It is the opposite of <code>outset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>outset</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">\n     <p>Displays a border that makes the box appear in 3D, embossed. It is the opposite of <code>inset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>ridge</code>.</p>\n    </td>\n   </tr>\n  </tbody>\n </table>\n "
        }]
    },
    "border-top": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top",
        "SUMMARY": "The <strong><code>border-top</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is a shorthand that sets the values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>. These properties describe the top border of elements.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>."
        }, {
            "value": "<code>&lt;br-style&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>."
        }, {
            "value": "<code>&lt;color&gt;&#xA0;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>."
        }]
    },
    "border-top-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color",
        "SUMMARY": "The <strong><code>border-top-color</code></strong> CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties <a title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\"><code>border-color</code></a> or <a title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top\"><code>border-top</code></a> are more convenient and preferable.",
        "VALUES": [{
            "value": "&lt;<code>color&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> CSS value describing the color of the top border."
        }, {
            "value": "inherit",
            "description": "Is a keyword denoting the color of the top border of the parent&apos;s element (which may be different from the <code>border-top-color</code> default value)"
        }]
    },
    "border-top-left-radius": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius",
        "SUMMARY": "The <strong><code>border-top-left-radius</code></strong> CSS property sets the rounding of the top-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0,</code>no rounding is done and the corner is square.",
        "VALUES": [{
            "value": "<em>radius</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the radius of the circle to use for the border in that corner."
        }, {
            "value": "<em>horizontal</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner."
        }, {
            "value": "<em>vertical</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the vertical semi-major axis of the ellipsis to use for the border in that corner."
        }, {
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. As absolute length it can be expressed in any unit allowed by the CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid."
        }]
    },
    "border-top-right-radius": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius",
        "SUMMARY": "The <strong><code>border-top-right-radius</code></strong> CSS property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square.",
        "VALUES": [{
            "value": "<em>radius</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the radius of the circle to use for the border in that corner."
        }, {
            "value": "<em>horizontal</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner."
        }, {
            "value": "<em>vertical</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> denoting the vertical semi-major axis of the ellipsis to use for the border in that corner."
        }, {
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. As absolute length it can be expressed in any unit allowed by the CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid."
        }]
    },
    "border-top-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style",
        "SUMMARY": "The<strong> <code>border-top-style</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property sets the line style of the top border of a box.",
        "VALUES": [{
            "value": "<code>&lt;br-style&gt;</code>",
            "description": "Is a keyword describing the style of the top border. It can have the following values:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>none</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-top-style: none; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Like for the <code>hidden</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>none</code> value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>hidden</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: hidden; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Like for the <code>none</code> keyword, displays no border. In that case, except if a background image is set, the calculated values of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a> will be <code>0</code>, even if specified otherwise through the property. In case of table cell and border collapsing, the <code>hidden</code> value has the highest priority: it means that if any other conflicting border is set, it won&apos;t be displayed.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>dotted</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dotted; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a series of rounded dots. The spacing of the dots are not defined by the specification and are implementation-specific. The radius of the dots is half the calculated <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>dashed</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dashed; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>solid</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: solid; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a single, straight, solid line.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>double</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: double; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays two straight lines that add up to the pixel amount defined as <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>groove</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: groove; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border leading to a carved effect. It is the opposite of <code>ridge</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>ridge</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: ridge; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>inset</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: inset; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">Displays a border that makes the box appear embedded. It is the opposite of <code>outset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>groove</code>.</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>outset</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: outset; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">\n     <p>Displays a border that makes the box appear in 3D, embossed. It is the opposite of <code>inset</code>. When applied to a table cell with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse\" title=\"The border-collapse CSS property determines whether a table&apos;s borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.\"><code>border-collapse</code></a> set to <code>collapsed</code>, this value behaves like <code>ridge</code>.</p>\n    </td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<code>inherit</code>",
            "description": "Represents the border style used by the parent of the current element."
        }]
    },
    "border-top-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width",
        "SUMMARY": "The <strong><code>border-top-width</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property sets the width of the top border of a box.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;</code>",
            "description": "Is either a non-negative explicit <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>thin</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A thin border</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>medium</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A medium border</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>thick</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A thick border</td>\n   </tr>\n  </tbody>\n </table>\n The specification doesn&apos;t precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin &#x2264; medium &#x2264; thick</code> inequality and that the values are constant on a single document."
        }, {
            "value": "<code>inherit</code>",
            "description": "Represents the calculated value of the <code>border-top-width</code> of the parent&apos;s element."
        }]
    },
    "border-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-width",
        "SUMMARY": "The <strong><code>border-width</code></strong> property is a shorthand property for setting <a title=\"The border-top-width CSS property sets the width of the top border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width\"><code>border-top-width</code></a>, <a title=\"The border-right-width CSS property sets the width of the right border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width\"><code>border-right-width</code></a>, <a title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width\"><code>border-bottom-width</code></a> and <a title=\"The border-left-width CSS property sets the width of the left border of a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width\"><code>border-left-width</code></a> of a box at the same place.",
        "VALUES": [{
            "value": "<code>&lt;br-width&gt;</code>",
            "description": "Is either a non-negative explicit <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value or a keyword denoting the thickness of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model\">border area</a> of a box. The keyword must be one of the following values:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>thin</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A thin border</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>medium</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A medium border</td>\n   </tr>\n   <tr>\n    <td style=\"vertical-align: middle;\"><code>thick</code></td>\n    <td style=\"vertical-align: middle;\">\n     <div style=\"margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;\">&#xA0;</div>\n    </td>\n    <td style=\"vertical-align: middle;\">A thick border</td>\n   </tr>\n  </tbody>\n </table>\n The specification doesn&apos;t precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin &#x2264; medium &#x2264; thick</code> inequality and that the values are constant on a single document."
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that all four values are inherited from their parent&apos;s element calculated value."
        }]
    },
    "bottom": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/bottom",
        "SUMMARY": "The <strong><code>bottom</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property participates in specifying the position of <strong>positioned elements</strong>.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "A negative, <code>null</code>, or positive <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> that represents:\n <ul>\n  <li>for <strong>absolutely positioned elements</strong>, the distance to the bottom edge of the containing block;</li>\n  <li>for <strong>relatively positioned elements</strong>, the offset that the element is moved above its position in the normal flow if it wasn&apos;t positioned.</li>\n </ul>\n "
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> of the containing block&apos;s height, used as described in the <a href=\"#Summary\">summary</a>."
        }, {
            "value": "<code>auto</code>",
            "description": "Specifies that:\n <ul>\n  <li>for <strong>absolutely positioned elements</strong>, the position of the element is based on the <a title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\"><code>top</code></a> property, and <code>height: auto</code> is treated as a height based on the content.</li>\n  <li>for <strong>relatively positioned elements</strong>, the offset the element from its original position is based on the <a title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\"><code>top</code></a> property, or if <code>top</code> is also <code>auto</code>, the element is not moved vertically at all.</li>\n </ul>\n "
        }, {
            "value": "<code>inherit</code>",
            "description": "Indicates that the value is the same as the computed value from its parent element (which may not be its containing block). This computed value is then handled as if it were a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a>, <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a>, or the <code>auto</code> keyword."
        }]
    },
    "box-align": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-align",
        "SUMMARY": "The CSS <code>box-align</code> property specifies how an element aligns its contents across (perpendicular to) the direction of its layout. The effect of this is only visible if there is extra space in the box. See <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Flexbox\" title=\"CSS/Flexible_boxes\">Flexbox</a> for more about the properties of flexbox elements.",
        "VALUES": [{
            "value": "<code>start</code>",
            "description": "The box aligns contents at the start, leaving any extra space at the end."
        }, {
            "value": "<code>center</code>",
            "description": "The box aligns contents in the center, dividing any extra space equally between the start and the end."
        }, {
            "value": "<code>end</code>",
            "description": "The box aligns contents at the end, leaving any extra space at the start."
        }, {
            "value": "<code>baseline</code>",
            "description": "The box aligns the baselines of the contents (lining up the text). This only applies if the box&apos;s orientation is horizontal."
        }, {
            "value": "<code>stretch</code>",
            "description": "The box stretches the contents so that there is no extra space in the box."
        }]
    },
    "box-decoration-break": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break",
        "SUMMARY": "The <strong><code>box-decoration-break</code></strong> CSS property specifies how the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background\" title=\"The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.\"><code>background</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding\" title=\"The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border\" title=\"The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.\"><code>border</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-image\" title=\"The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases. The border-image is used instead of the border styles given by the border-style properties. Though the specification requires that border-style must be present if border-image is used, some browsers many not implement this.\"><code>border-image</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow\" title=\"The box-shadow property describes one or more shadow effects as a comma-separated list.\"><code>box-shadow</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin\" title=\"The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.\"><code>margin</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/clip\" title=\"The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.\"><code>clip</code></a> of an element is applied when the box for the element is fragmented.  Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.  Each piece of the rendering for the element is called a fragment.",
        "VALUES": [{
            "value": "<code>slice</code>",
            "description": "The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details."
        }, {
            "value": "<code>clone</code>",
            "description": "Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\" title=\"The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.\"><code>border-radius</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-image\" title=\"The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases. The border-image is used instead of the border styles given by the border-style properties. Though the specification requires that border-style must be present if border-image is used, some browsers many not implement this.\"><code>border-image</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow\" title=\"The box-shadow property describes one or more shadow effects as a comma-separated list.\"><code>box-shadow</code></a>, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\" title=\"The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.\"><code>background-repeat</code></a>: <code>no-repeat</code> may be repeated multiple times."
        }]
    },
    "box-direction": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-direction",
        "SUMMARY": "The CSS <code>box-direction</code> property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge). See <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Flexbox\" title=\"CSS/Flexible_boxes\">Flexbox</a> for more about the properties of flexbox elements.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "The box lays out its contents from the start (the left or top edge)."
        }, {
            "value": "<code>reverse</code>",
            "description": "The box lays out its contents from the end (the right or bottom edge)."
        }]
    },
    "box-flex": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex",
        "SUMMARY": "The <code>-moz-box-flex</code> and <code>-webkit-box-flex</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> properties specify how a <code>-moz-box</code> or <code>-webkit-box</code> grows to fill the box that contains it, in the direction of the containing box's layout. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes\">Flexbox</a> for more about the properties of flexbox elements.",
        "VALUES": [{
            "value": "&lt;number&gt;",
            "description": "If the value is 0, the box does not grow. If it is greater than 0, the box grows to fill a proportion of the available space."
        }]
    },
    "box-flex-group": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex-group",
        "SUMMARY": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes\">Flexbox</a> for more information.",
        "VALUES": [{
            "value": "<code>&lt;integer&gt;</code>",
            "description": "Any positive integer."
        }]
    },
    "box-lines": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-lines",
        "SUMMARY": "See <a href=\"/en/CSS/Flexbox\">Flexbox</a> for more information.",
        "VALUES": [{
            "value": "single",
            "description": "Box elements lay out in a single row or column."
        }, {
            "value": "multiple",
            "description": "Box elements layout in multiple rows or columns."
        }]
    },
    "box-ordinal-group": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-ordinal-group",
        "SUMMARY": "The CSS <code>box-ordinal-group</code> property assigns the flexbox's child elements to an ordinal group. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flexible_box_properties\">Flexbox</a> for more about the properties of flexbox elements.",
        "VALUES": [{
            "value": "<code>&lt;integer&gt;</code>",
            "description": "Any positive integer."
        }]
    },
    "box-orient": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient",
        "SUMMARY": "The CSS <code>box-orient</code> property specifies whether an element lays out its contents horizontally or vertically. See <a href=\"/en/CSS/Flexible_boxes#box-_implementation\" rel=\"internal\" title=\"/en/CSS/Flexible_boxes#box-_implementation\">Flexbox</a> for more about the properties of flexbox elements.",
        "VALUES": [{
            "value": "<code>horizontal</code>",
            "description": "The box lays out its contents horizontally."
        }, {
            "value": "<code>vertical</code>",
            "description": "The box lays out its contents vertically."
        }, {
            "value": "<code>inline-axis</code> (HTML)",
            "description": "The box displays its children along the inline axis."
        }, {
            "value": "<code>block-axis</code> (HTML)",
            "description": "The box displays its children along the block axis."
        }]
    },
    "box-pack": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack",
        "SUMMARY": "The <code>-moz-box-pack</code> and <code>-webkit-box-pack</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> properties specify how a <code>-moz-box</code> or <code>-webkit-box</code> packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flexible_box_properties\">Flexbox</a> for more about the properties of flexbox elements.",
        "VALUES": [{
            "value": "<code>start</code>",
            "description": "The box packs contents at the start, leaving any extra space at the end."
        }, {
            "value": "<code>center</code>",
            "description": "The box packs contents in the center, dividing any extra space equally between the start and the end."
        }, {
            "value": "<code>end</code>",
            "description": "The box packs contents at the end, leaving any extra space at the start."
        }, {
            "value": "<code>justify</code>",
            "description": "The space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. If there is only one child, treat the value as if it were <code>start</code>."
        }]
    },
    "box-shadow": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow",
        "SUMMARY": "The <code>box-shadow</code> property describes one or more shadow effects as a comma-separated list.",
        "VALUES": [{
            "value": "<a name=\"inset\" id=\"inset\"><code>inset</code></a>",
            "description": "If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).<br>\n The presence of the <code>inset</code> keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content."
        }, {
            "value": "<a name=\"&lt;offset-x&gt; &lt;offset-y&gt;\" id=\"&lt;offset-x&gt; &lt;offset-y&gt;\"><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></a>",
            "description": "These are two <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> values to set the shadow offset. <code>&lt;offset-x&gt;</code> specifies the horizontal distance. Negative values place the shadow to the left of the element. <code>&lt;offset-y&gt;</code> specifies the vertical distance. Negative values place the shadow above the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible units.<br>\n If both values are <code>0</code>, the shadow is placed behind the element (and may generate a blur effect if <code>&lt;blur-radius&gt;</code> and/or <code>&lt;spread-radius&gt;</code> is set)."
        }, {
            "value": "<a name=\"&lt;blur-radius&gt;\" id=\"&lt;blur-radius&gt;\"><code>&lt;blur-radius&gt;</code></a>",
            "description": "This is a third <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be <code>0</code> (the shadow&apos;s edge is sharp). The specification does not include an exact algorithm for how the blur radius should be calculated, however, it does elaborate as follows:"
        }, {
            "value": "\n <blockquote>&#x2026;for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow&#x2019;s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.</blockquote>\n ",
            "description": "<a name=\"&lt;spread-radius&gt;\" id=\"&lt;spread-radius&gt;\"><code>&lt;spread-radius&gt;</code></a>"
        }, {
            "value": "This is a fourth <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be <code>0</code> (the shadow will be the same size as the element).",
            "description": "<a name=\"&lt;color&gt;\" id=\"&lt;color&gt;\"><code>&lt;color&gt;</code></a>"
        }]
    },
    "box-sizing": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing",
        "SUMMARY": "The <strong><code>box-sizing</code></strong> property is used to alter the default <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model\">CSS box model</a> used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.",
        "VALUES": [{
            "value": "<code>content-box</code>",
            "description": "This is the initial and default value as specified by the CSS standard. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> properties are measured including only the content, but not the padding, border or margin. Note: Padding, border &amp; margin will be outside of the box e.g. IF <code>.box {width: 350px;}</code>&#xA0;THEN you apply <code>{border: 10px solid black;}</code> RESULT {rendered in the browser} a&#xA0;<code>box of width: 370px.</code>"
        }, {
            "value": "So simply the dimension of element is calculated as, <em>width = width of the content</em>, and <em>height = height of the content (excluding the values of border and padding)</em>.",
            "description": "<code>border-box</code>"
        }, {
            "value": "The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> properties include the content, the padding and border, but not the margin. This is the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model\">box model</a> used by Internet Explorer when the document is in Quirks mode.&#xA0;Note that padding and border will be inside of the box e.g.&#xA0; <code>.box {width: 350px; border: 10px solid black;}</code> leads to a box rendered in the browser of <code>width: 350px</code>. The content box can&apos;t be negative and is floored to 0, making it impossible to use border-box to make the element disappear.",
            "description": "Here the dimension is calculated as, <em>width = border + padding + width of the content</em>, and <em>height = border + padding + height of the content</em>."
        }, {
            "value": "<code>padding-box</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span> <span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span>",
            "description": "The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was&#xA0;removed in Firefox 50."
        }]
    },
    "box-suppress": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-suppress",
        "SUMMARY": "The <code>box-suppress</code> CSS property controls the box generation of an element.",
        "VALUES": [{
            "value": "<code>show</code>",
            "description": "The element generates boxes as normal, per its <code>display-*</code> properties."
        }, {
            "value": "<code>discard</code>",
            "description": "The element generates no boxes at all."
        }, {
            "value": "<code>hide</code>",
            "description": "The element generates boxes as normal, but those boxes do not participate in layout in any way, and must not be displayed."
        }, {
            "value": "For the purpose of any layout-related information, such as querying for the computed value of the element&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> property, it must be treated as if it did not generate any boxes.",
            "description": "Properties that rely on boxes but do not rely on layout, such as animations, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment\" title=\"The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter&apos;s value can be reset using the counter-reset CSS property.\"><code>counter-increment</code></a>, etc., must work as normal on this element and its descendants."
        }]
    },
    "break-after": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/break-after",
        "SUMMARY": "The <strong><code>break-after</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property describes the page, column, or region break behavior (in other words, how and whether to break) after the generated box. If there is no generated box, the property is ignored.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Initial value. Allows, meaning neither forbid nor force, any break (either page, column or region) to be&#xA0;inserted after the principal box."
        }, {
            "value": "<code>always</code>",
            "description": "Always force page breaks after the principal box. This is a synonym of <code>page</code>, it has been kept to facilitate transition from <a title=\"The page-break-after CSS property adjusts page breaks after the current element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after\"><code>page-break-after</code></a> which is subset of this property."
        }, {
            "value": "<code>avoid</code>",
            "description": "Prevent any break, either page, column or region, to be inserted right after the principal box."
        }, {
            "value": "<code>left</code>",
            "description": "Force one or two page breaks right after the principal box so that the next page is formatted as a left page."
        }, {
            "value": "<code>right</code>",
            "description": "Force one or two page breaks right after the principal box so that the next page is formatted as a right page."
        }, {
            "value": "<code>page</code>",
            "description": "Always force one page break right after the principal box."
        }, {
            "value": "<code>column</code>",
            "description": "Always force one column break right after the principal box."
        }, {
            "value": "<code>region </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Always force one region break right after the principal box."
        }, {
            "value": "<code>recto</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Force one or two page breaks right after the principal box so that next page is formatted as a recto page, that is a right page in a left-to-right spread or a left page in a right-to-left spread."
        }, {
            "value": "<code>verso </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Force one or two page breaks right after the principal box so that next page is formatted as a verso page, that is a left page in a left-to-right spread or a left right in a right-to-left spread."
        }, {
            "value": "<code>avoid-page</code>",
            "description": "Avoid any page break right after the principal box."
        }, {
            "value": "<code>avoid-column</code>",
            "description": "Avoid any column break right after the principal box."
        }, {
            "value": "<code>avoid-region </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Avoid any region break right after the principal box."
        }]
    },
    "break-before": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/break-before",
        "SUMMARY": "The<strong> <code>break-before</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property describes the page, column or region break behavior before the generated box. If there is no generated box, the property is ignored.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Initial value. Allows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted before the principle box."
        }, {
            "value": "<code>always</code>",
            "description": "Always force page breaks before the principle box. This is a synonym of <code>page</code>, it has been kept to facilitate transition from <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before\" title=\"The page-break-before CSS property adjusts page breaks before the current element.\"><code>page-break-before</code></a> which is subset of this property."
        }, {
            "value": "<code>avoid</code>",
            "description": "Prevent any break, either page, column or region, to be inserted right before the principle box."
        }, {
            "value": "<code>left</code>",
            "description": "Force one or two page breaks right before the principle box so that the next page is formatted as a left page."
        }, {
            "value": "<code>right</code>",
            "description": "Force one or two page breaks right before the principle box so that the next page is formatted as a right page."
        }, {
            "value": "<code>page</code>",
            "description": "Always force one page break right before the principle box."
        }, {
            "value": "<code>column</code>",
            "description": "Always force one column break right before the principle box."
        }, {
            "value": "<code>region </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Always force one region break right before the principle box."
        }, {
            "value": "<code>recto</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Force one or two page breaks right before the principle box so that next page is formatted as a recto page, that is a right page in a left-to-right spread or a left page in a right-to-left spread."
        }, {
            "value": "<code>verso </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Force one or two page breaks right before the principle box so that next page is formatted as a verso page, that is a left page in a left-to-right spread or a right page in a right-to-left spread."
        }, {
            "value": "<code>avoid-page</code>",
            "description": "Avoid any page break right before the principle box."
        }, {
            "value": "<code>avoid-column</code>",
            "description": "Avoid any column break right before the principle box."
        }, {
            "value": "<code>avoid-region </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Avoid any region break right before the principle box."
        }]
    },
    "break-inside": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside",
        "SUMMARY": "The <strong><code>break-inside</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property describes how the page, column or region break inside the generated box. If there is no generated box, the property is ignored.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Allows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted within the principle box."
        }, {
            "value": "<code>avoid-page</code>",
            "description": "Avoid any page break within the principle box."
        }, {
            "value": "<code>avoid-column</code>",
            "description": "Avoid any column break within the principle box."
        }, {
            "value": "<code>avoid-region </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Avoid any region break within the principle box."
        }]
    },
    "calc()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/calc",
        "SUMMARY": "The <code>calc()</code> CSS function can be used anywhere a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/frequency\" title=\"The &lt;frequency&gt; CSS data type denotes a frequency dimension, like the pitch of a speaking voice.\"><code>&lt;frequency&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/angle\" title=\"The &lt;angle&gt; CSS data type represents angle values. Positive angles represent clockwise angles, negative angles represent counterclockwise angles. Its syntax is a &lt;number&gt; data type immediately followed by the unit (deg, grad, rad or turn). Like for any CSS dimension, there is no space between the unit literal and the number.\"><code>&lt;angle&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/time\" title=\"The &lt;time&gt; CSS data type denotes time dimensions expressed in seconds or milliseconds. They consists of a&#x200B; &#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&lt;number&gt; immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number.\"><code>&lt;time&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a '.' followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn't any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; 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.\"><code>&lt;integer&gt;</code></a> is required. With <code>calc()</code>, you can perform calculations to determine CSS property values.",
        "VALUES": [{
            "value": "expression",
            "description": "A mathematical expression, the result of which is used as the value."
        }, {
            "value": "<strong>+</strong>",
            "description": "Addition."
        }, {
            "value": "<strong>-</strong>",
            "description": "Subtraction."
        }, {
            "value": "<strong>*</strong>",
            "description": "Multiplication. At least one of the arguments must be a <a title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\"><code>&lt;number&gt;</code></a>."
        }, {
            "value": "<strong>/</strong>",
            "description": "Division. The right-hand side must be a <a title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\"><code>&lt;number&gt;</code></a>."
        }]
    },
    "caption-side": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side",
        "SUMMARY": "The <strong><code>caption-side</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property positions the content of a table's <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption\" title=\"The HTML &lt;caption&gt; element represents the title of a table. Though it is always the first descendant of a &lt;table&gt;, its styling, using CSS, may place it elsewhere, relative to the table.\"><code>&lt;caption&gt;</code></a> on the specified side.",
        "VALUES": [{
            "value": "<code>top</code>",
            "description": "Is a keyword indicating that the caption box should be positioned above the table."
        }, {
            "value": "<code>bottom</code>",
            "description": "Is a keyword indicating that the caption box should be positioned below the table."
        }, {
            "value": "<code>left</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Is a keyword indicating that the caption box should be positioned on the left side of the table.<br>\n <div class=\"note\"><strong>Note:</strong>&#xA0;This value was proposed for CSS 2, but removed from the final CSS 2.1 specification. It is non-standard.</div>"
        }, {
            "value": "<code>right</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Is a keyword indicating that the caption box should be positioned on the right side of the table.<br>\n <div class=\"note\"><strong>Note:</strong>&#xA0;This value was proposed for CSS 2, but removed from the final CSS 2.1 specification. It is non-standard.</div>"
        }, {
            "value": "<code>top-outside</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Is a keyword indicating that the caption box should be positioned above the table, while the width and horizontal alignment behavior are not bound to the table&apos;s horizontal layout.<br>\n <div class=\"note\"><strong>Note:</strong>&#xA0;The CSS 2.1 specification notes that the CSS 2 specification described a different behavior for the <code>top</code> value, which will be reintroduced by this value in a future specification.</div>"
        }, {
            "value": "<code>bottom-outside</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Is a keyword indicating that the caption box should be positioned below the table, while the width and horizontal alignment behavior are not bound to the table&apos;s horizontal layout.<br>\n <div class=\"note\"><strong>Note:</strong>&#xA0;The CSS 2.1 specification notes that the CSS 2 specification described a different behavior for the <code>bottom</code> value, which will be reintroduced by this value in a future specification.</div>"
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that the <code>caption-side</code> value defined on the parent&apos;s element must be used."
        }]
    },
    "caret-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color",
        "SUMMARY": "The <strong><code>caret-color</code></strong> CSS property specifies the color of the caret, the visible indicator of the insertion point in an element where text and other content is inserted by the user's typing or editing.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "User agents should use <code>currentcolor</code> but may automatically adjust the color of the caret to ensure good visibility and contrast with the surrounding content, possibly based on <code>currentcolor</code>, the background, shadows, etc.\n\t<div class=\"note\"><strong>Note:</strong> While user agents may use <code>currentcolor</code> for the <code>auto</code> value, in opposite to the <code>currentcolor</code> value, <code>auto</code> is not interpolated on transitions/animations.</div>\n\t"
        }, {
            "value": "&lt;color&gt;",
            "description": "Use the specified color as the caret color."
        }]
    },
    "clear": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/clear",
        "SUMMARY": "The <strong><code>clear</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies whether an element can be next to <a href=\"https://developer.mozilla.org/en-US/docs/CSS/float\" title=\"CSS/float\">floating</a> elements that precede it or must be moved down (cleared) below them. The <code>clear</code> property applies to both floating and non-floating elements.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Is a keyword indicating that the element is <em>not</em> moved down to clear past floating elements."
        }, {
            "value": "<code>left</code>",
            "description": "Is a keyword indicating that the element is moved down to clear past <em>left</em> floats."
        }, {
            "value": "<code>right</code>",
            "description": "Is a keyword indicating that the element is moved down to clear past <em>right</em> floats."
        }, {
            "value": "<code>both</code>",
            "description": "Is a keyword indicating that the element is moved down to clear past <em>both</em> left and right floats."
        }, {
            "value": "<code>inline-start</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Is a keyword indicating that the element is moved down to clear floats on <em>start side of its containing block</em>, that is the <em>left</em> floats on ltr scripts and the <em>right</em> floats on rtl scripts."
        }, {
            "value": "<code>inline-end</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Is a keyword indicating that the element is moved down to clear floats on <em>end side of its containing block</em>, that is the <em>right</em> floats on ltr scripts and the <em>left</em> floats on rtl scripts."
        }]
    },
    "clip": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/clip",
        "SUMMARY": "The <strong><code>clip</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines what portion of an element is visible. The <code>clip</code> property applies only to absolutely positioned elements, that is elements with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>position:absolute</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>position:fixed</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;shape&gt;</code>",
            "description": "A rectangular <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/shape\" title=\"The &lt;shape&gt; 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.\"><code>&lt;shape&gt;</code></a> of the form <code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code> or of the form <code>rect(&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;)</code> (which is a more backwards compatible syntax) <code>&lt;top&gt;</code> and <code>&lt;bottom&gt;</code> specify offsets from the <em>inside top border edge</em> of the box, and <code>&lt;right&gt;</code>, and <code>&lt;left&gt;</code> specify offsets from the <em>inside left border edge</em> of the box &#x2014; that is, the extent of the padding box."
        }, {
            "value": "<code>&lt;top&gt;</code>, <code>&lt;right&gt;</code>, <code>&lt;bottom&gt;</code>, and <code>&lt;left&gt;</code> may either have a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value or<code> auto</code>. If any side&apos;s value is <code>auto</code>, the element is clipped to that side&apos;s <em>inside border edge</em>.",
            "description": "<code>auto</code>"
        }]
    },
    "clip-path": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path",
        "SUMMARY": "The <code><strong>clip-path</strong></code> CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed i.e, only a specific region of the element is displayed. The clipping region is a path specified as a URL referencing an inline or external SVG, or shape method such as <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle\">circle()</a>. The clip-path property replaces the now deprecated <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/clip\">clip</a> property.",
        "VALUES": [{
            "value": "<code>url()</code>",
            "description": "Represents a URL referencing a clip path element."
        }, {
            "value": "<code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code>",
            "description": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape\" title=\"The &lt;basic-shape&gt;&#xA0;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 &lt;basic-shape&gt; 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.\"><code>&lt;basic-shape&gt;</code></a> function. Such a shape will make use of the specified <code>&lt;geometry-box&gt;</code> to size and position the basic shape. If no geometry box is specified, the <code>border-box</code> will be used as reference box."
        }, {
            "value": "<code>&lt;geometry-box&gt;</code>",
            "description": "If specified in combination with a <code>&lt;basic-shape&gt;</code>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\" title=\"The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.\"><code>border-radius</code></a>) as clipping path. The geometry box can be one of the following values:\n <dl>\n  <dt><code>fill-box</code></dt>\n  <dd>Uses the object bounding box as reference box.</dd>\n  <dt><code>stroke-box</code></dt>\n  <dd>Uses the stroke bounding box as reference box.</dd>\n  <dt><code>view-box</code></dt>\n  <dd>Uses the nearest SVG viewport as reference box. If a <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox\">viewBox</a></code> attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute.</dd>\n  <dt><code>margin-box</code></dt>\n  <dd>Uses the <a href=\"CSS_Box_Model/Introduction_to_the_CSS_box_model\">margin box</a> as the reference box.</dd>\n  <dt><code>border-box</code></dt>\n  <dd>Uses the <a href=\"CSS_Box_Model/Introduction_to_the_CSS_box_model\">border box</a> as the reference box.</dd>\n  <dt><code>padding-box</code></dt>\n  <dd>Uses the <a href=\"CSS_Box_Model/Introduction_to_the_CSS_box_model\">padding box</a> as the reference box.</dd>\n  <dt><code>content-box</code></dt>\n  <dd>Uses the <a href=\"CSS_Box_Model/Introduction_to_the_CSS_box_model\">content box</a> as the reference box.</dd>\n </dl>\n "
        }, {
            "value": "<code>none</code>",
            "description": "There is no clipping path created."
        }, {
            "value": "<code>fill-box</code>",
            "description": "Uses the object bounding box as reference box."
        }, {
            "value": "<code>stroke-box</code>",
            "description": "Uses the stroke bounding box as reference box."
        }, {
            "value": "<code>view-box</code>",
            "description": "Uses the nearest SVG viewport as reference box. If a <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox\">viewBox</a></code> attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute."
        }, {
            "value": "<code>margin-box</code>",
            "description": "Uses the <a href=\"CSS_Box_Model/Introduction_to_the_CSS_box_model\">margin box</a> as the reference box."
        }, {
            "value": "<code>border-box</code>",
            "description": "Uses the <a href=\"CSS_Box_Model/Introduction_to_the_CSS_box_model\">border box</a> as the reference box."
        }, {
            "value": "<code>padding-box</code>",
            "description": "Uses the <a href=\"CSS_Box_Model/Introduction_to_the_CSS_box_model\">padding box</a> as the reference box."
        }, {
            "value": "<code>content-box</code>",
            "description": "Uses the <a href=\"CSS_Box_Model/Introduction_to_the_CSS_box_model\">content box</a> as the reference box."
        }]
    },
    "color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/color",
        "SUMMARY": "The <strong><code>color</code></strong> property sets the foreground <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\">color</a> of an element's text content, and its <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration\">decorations</a>. It also sets the <a title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/currentColor\"><code>&lt;currentcolor&gt;</code></a> value which may be used as an indirect value on <em>other</em> properties, and is the default for other color properties, such as <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-color\">border-color</a>.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> value giving the color of the textual elements of the element."
        }]
    },
    "column-count": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-count",
        "SUMMARY": "The <strong><code>column-count</code></strong> CSS property describes the number of columns of the element.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the number of columns should be determined by other CSS properties, like <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-width\" title=\"The column-width CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns.&#xA0;This allows us&#xA0;to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.\"><code>column-width</code></a>."
        }, {
            "value": "<code>&lt;number&gt;</code>",
            "description": "Is a strictly positive <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> describing the ideal number of columns into which the content of the element will be flowed. If the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-width\" title=\"The column-width CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns.&#xA0;This allows us&#xA0;to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.\"><code>column-width</code></a> is also set to a non-<strong>auto</strong> value, it merely indicates the maximum allowed number of columns."
        }]
    },
    "column-fill": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill",
        "SUMMARY": "The <strong><code>column-fill</code></strong> CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using <code>auto</code>, just take up the room the content needs.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that columns are filled sequentially."
        }, {
            "value": "<code>balance</code>",
            "description": "Is a keyword indicating that content is equally divided between columns."
        }]
    },
    "column-gap": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap",
        "SUMMARY": "The <strong><code>column-gap</code></strong> CSS property sets the size of the gap between columns for elements which are specified to be displayed as multi-column elements.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Is a keyword indicating to use the browser-defined default spacing between columns. The specification, which most modern browsers follow, recommends that this&#xA0;be equal to a length of <code>1em</code>."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value defining the size of the gap between columns. It must not be negative, but may be equal to <code>0</code>."
        }]
    },
    "column-rule": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule",
        "SUMMARY": "In multi-column layouts, the <strong><code>column-rule</code></strong> CSS property specifies a straight line, or \"rule\", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual <code>column-rule-*</code> properties separately: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width\" title=\"The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.\"><code>column-rule-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style\" title=\"The column-rule-style CSS property lets you set the style of the rule drawn between columns in multi-column layouts.\"><code>column-rule-style</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color\" title=\"The column-rule-color CSS property lets you set the color of the &quot;rule&quot; or line drawn between columns in multi-column layouts.\"><code>column-rule-color</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;column-rule-width&apos;&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or one of the three keywords, <code>thin</code>, <code>medium</code>, or <code>thick</code>. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-width\" title=\"The border-width property is a shorthand property for setting border-top-width,&#xA0;border-right-width,&#xA0;border-bottom-width and&#xA0;border-left-width&#xA0;of a box at the same place.\"><code>border-width</code></a> for details."
        }, {
            "value": "<code>&lt;&apos;column-rule-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a> for possible values and details."
        }, {
            "value": "<code>&lt;&apos;column-rule-color&apos;&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> value."
        }]
    },
    "column-rule-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color",
        "SUMMARY": "The<strong> <code>column-rule-color</code></strong> CSS property lets you set the color of the \"rule\" or line drawn between columns in multi-column layouts.",
        "VALUES": [{
            "value": "&lt;color&gt;",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> value representing the color of the rule separating columns."
        }]
    },
    "column-rule-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style",
        "SUMMARY": "The <strong><code>column-rule-style</code></strong> CSS property lets you set the style of the rule drawn between columns in multi-column layouts.",
        "VALUES": [{
            "value": "&lt;br-style&gt;&#xA0;",
            "description": "Is a keyword defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a> describing the style of the rule. The styling must be interpreted as in the collapsing border model."
        }]
    },
    "column-rule-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width",
        "SUMMARY": "The <strong><code>column-rule-width</code></strong> CSS property lets you set the width of the rule drawn between columns in multi-column layouts.",
        "VALUES": [{
            "value": "&lt;br-width&gt;&#xA0;",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or one of the <code>thin</code>, <code>medium</code> or <code>thick</code> keyword describing the width of the rule separating two columns."
        }]
    },
    "column-span": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-span",
        "SUMMARY": "The <strong><code>column-span</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property makes it possible for an element to span across all columns when its value is set to <code>all</code>. An element that spans more than one column is called a <strong>spanning element</strong>.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The element does not span multiple columns."
        }, {
            "value": "<code>all</code>",
            "description": "The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context."
        }]
    },
    "column-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/column-width",
        "SUMMARY": "The <strong><code>column-width</code></strong> CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns. This allows us to achieve scalable designs that fit different screen sizes. Especially in presence of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-count\" title=\"The column-count CSS property describes the number of columns of the element.\"><code>column-count</code></a> CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-width\" title=\"The column-width CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns.&#xA0;This allows us&#xA0;to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.\"><code>column-width</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap\" title=\"The column-gap CSS property sets the size of the gap between columns for elements which are specified to be displayed as multi-column elements.\"><code>column-gap</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width\" title=\"The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.\"><code>column-rule-width</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the width of the column should be determined by other CSS properties, like <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-count\" title=\"The column-count CSS property describes the number of columns of the element.\"><code>column-count</code></a>."
        }]
    },
    "columns": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/columns",
        "SUMMARY": "The <strong><code>columns</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property is a shorthand property allowing to set both the <a title=\"The column-width CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns.&#xA0;This allows us&#xA0;to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-width\"><code>column-width</code></a> and the <a title=\"The column-count CSS property describes the number of columns of the element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-count\"><code>column-count</code></a> properties at the same time.",
        "VALUES": [{
            "value": "<code>&lt;&apos;column-width&apos;&gt;</code>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid."
        }, {
            "value": "<code>&lt;&apos;column-count&apos;&gt;</code>",
            "description": "Is a strictly positive <a title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\"><code>&lt;integer&gt;</code></a> describing the ideal number of columns into which the content of the element will be flowed. If the <a title=\"The column-width CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns.&#xA0;This allows us&#xA0;to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/column-width\"><code>column-width</code></a> is also set to a non-<strong>auto</strong> value, it merely indicates the maximum allowed number of columns."
        }]
    },
    "contain": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/contain",
        "SUMMARY": "The <strong><code>contain</code></strong> property allows an author to indicate that an element and its contents are, as much as possible, <em>independent</em> of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page. This property is useful on pages that contain a lot of widgets that are all independent as it can be used to prevent one widget's CSS rules from changing other things on the page.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Indicates the&#xA0;element renders as normal, with no containment applied."
        }, {
            "value": "strict",
            "description": "Indicates that all containment rules are applied to the element. This is equivalent to <code>contain: size layout style paint</code>."
        }, {
            "value": "content",
            "description": "Indicates that all containment rules except size are applied to the element. This is equivalent to <code>contain: layout style paint</code>."
        }, {
            "value": "size",
            "description": "Indicates that the element can be sized without the need to examine its dependants for size changes."
        }, {
            "value": "layout",
            "description": "Indicates that nothing outside the element may affect its internal layout and vice versa.&#xA0;"
        }, {
            "value": "style",
            "description": "Indicates that, for properties that can have effects on more than just an element and its descendants, those effects don&apos;t escape the containing element."
        }, {
            "value": "paint",
            "description": "Indicates that descendents of the element don&apos;t display outside its bounds. If an element is off-screen or otherwise not visible, it&apos;s descendants are also guaranteed to not be visible."
        }]
    },
    "content": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/content",
        "SUMMARY": "The <strong><code>content</code></strong> CSS property is used with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::before\" title=\"::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.\"><code>::before</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::after\" title=\"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.\"><code>::after</code></a> pseudo-elements to generate content in an element. Objects inserted using the <code>content</code> property are <em>anonymous <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Replaced_element\" title=\"CSS/Replaced_element\">replaced elements</a>.</em>",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The pseudo-element is not generated."
        }, {
            "value": "<code>normal</code>",
            "description": "Computes to <code>none</code> for the <code>:before</code> and <code>:after</code> pseudo-elements."
        }, {
            "value": "<code>&lt;string&gt;</code>",
            "description": "Text content."
        }, {
            "value": "<code>&lt;uri&gt;</code> or <code>url()</code>",
            "description": "The value is a URI that designates an external resource (such as an image). If the resource or image can&apos;t be displayed, it is either ignored or some placeholder shows up."
        }, {
            "value": "<code>counter()</code>&#xA0;or <code>counters()</code>",
            "description": "Counters may be specified with two different functions: &apos;counter()&apos; or &apos;counters()&apos;. The former has two forms: &apos;counter(<var>name</var>)&apos; or &apos;counter(<var>name</var>, <var>style</var>)&apos;. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style (&apos;decimal&apos; by default). The latter function also has two forms: &apos;counters(<var>name</var>, <var>string</var>)&apos; or &apos;counters(<var>name</var>, <var>string</var>, <var>style</var>)&apos;. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style (&apos;decimal&apos; by default). See the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counter\">section on automatic counters and numbering</a> for more information. The name must not be &apos;none&apos;, &apos;inherit&apos; or &apos;initial&apos;. Such a name causes the declaration to be ignored."
        }, {
            "value": "<code>attr(X)</code>",
            "description": "Returns the value of the element&apos;s attribute X as a string. If there is no attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language."
        }, {
            "value": "<code>open-quote</code> | <code>close-quote</code>",
            "description": "These values are replaced by the appropriate string from the <a title=\"The quotes CSS property indicates how user agents should render quotation marks.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/quotes\"><code>quotes</code></a> property."
        }, {
            "value": "<code>no-open-quote</code> | <code>no-close-quote</code>",
            "description": "Introduces no content, but increments (decrements) the level of nesting for quotes."
        }]
    },
    "counter-increment": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment",
        "SUMMARY": "The <strong><code>counter-increment</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property is used to increase the value of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters\">CSS Counters</a> by a given value. The counter's value can be reset using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset\" title=\"The counter-reset CSS property is used to reset CSS Counters to a given value.\"><code>counter-reset</code></a> CSS property.",
        "VALUES": [{
            "value": "<a title=\"The &lt;custom-ident&gt; 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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident\"><code>&lt;custom-ident&gt;</code></a>",
            "description": "The name of the counter to increment. This identifier is composed by a combination of case-insensitive letters <code>a</code>&#xA0;to&#xA0;<code>z</code>, numbers <code>0</code>&#xA0;to&#xA0;<code>9</code>, underscores (<code>_</code>), and/or dashes (<code>-</code>). The first non-dash character must be a letter (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier. It can&apos;t be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code> in any combination of cases."
        }, {
            "value": "<a title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\"><code>&lt;integer&gt;</code></a>",
            "description": "The value to add to the counter. Defaults to 1 if not given."
        }, {
            "value": "<code>none</code>",
            "description": "No counter must be incremented. This is used as the default value, or to cancel an increment in more specific rules."
        }]
    },
    "counter-reset": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset",
        "SUMMARY": "The <strong><code>counter-reset</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property is used to reset <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters\">CSS Counters</a> to a given value.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;custom-ident&gt;</code></a>",
            "description": "The name of the counter to increment. This identifier is composed by a combination of case-insensitive letters <code>a</code> to <code>z</code>, numbers <code>0</code> to <code>9</code>, underscores (<code>_</code>), and/or dashes (<code>-</code>). The first non-dash character must be a letter (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier. It can&apos;t be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code> in any combination of cases."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a>",
            "description": "The value to reset the counter to on each occurrence of the element. Defaults to <code>0</code> if not given."
        }, {
            "value": "<code>none</code>",
            "description": "Is a keyword indicating that no counter reset is to be performed. It can be used to hide <code>counter-reset</code> defined in less specific rules."
        }]
    },
    "cursor": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/cursor",
        "SUMMARY": "The <strong><code>cursor</code></strong> CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.",
        "VALUES": [{
            "value": "<a name=\"&lt;uri&gt;\" id=\"&lt;uri&gt;\">&lt;<code>uri</code>&gt;</a>",
            "description": "A <code>url(&#x2026;)</code> or a comma separated list <code>url(&#x2026;), url(&#x2026;), &#x2026;</code>, pointing to an image file. More than one <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/uri\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;uri&gt;</code></a> may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one or more of the other values) <strong>must</strong> be at the end of the fallback list. See <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Using_URL_values_for_the_cursor_property\" title=\"Using_URL_values_for_the_cursor_property\">Using URL values for the cursor property</a> for more details."
        }, {
            "value": "<a name=\"&lt;x&gt; &lt;y&gt;\"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> </a><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32."
        }, {
            "value": "<a name=\"Keyword values\" id=\"Keyword values\">Keyword values</a>",
            "description": "\n <p><strong style=\"color: red; font-size: big;\">Move mouse over value for testing:</strong></p>\n\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <th>Category</th>\n    <th style=\"width: 7.5em;\">CSS value</th>\n   <th>Description</th>\n   </tr>\n   <tr style=\"cursor: auto;\">\n    <td rowspan=\"3\">General</td>\n    <td><code>auto</code></td>\n    <td>The browser determines the cursor to display based on the current context.<br>\n     E.g. equivalent to <code>text</code> when hovering text.</td>\n   </tr>\n   <tr style=\"cursor: default;\">\n    <td><code>default</code></td>\n    <td>Default cursor, typically an arrow.</td>\n   </tr>\n   <tr style=\"cursor: none;\">\n    <td><code>none</code></td>\n    <td>No cursor is rendered.</td>\n   </tr>\n   <tr style=\"cursor: context-menu;\">\n    <td rowspan=\"5\" style=\"cursor: auto;\">Links &amp; status</td>\n    <td><code>context-menu</code></td>\n    <td>A context menu is available under the cursor.<br>\n     Only IE 10 and up have implemented this on Windows: <a href=\"https://bugzilla.mozilla.org/show_bug.cgi?id=258960\" class=\"external\" title=\"&apos;context-menu&apos; cursor glyph missing for Windows\">bug&#xA0;258960</a>.</td>\n   </tr>\n   <tr style=\"cursor: help;\">\n    <td><code>help</code></td>\n    <td>Indicating help is available.</td>\n   </tr>\n   <tr style=\"cursor: pointer;\">\n    <td><code>pointer</code></td>\n    <td>E.g. used when hovering over links, typically a hand.</td>\n   </tr>\n   <tr style=\"cursor: progress;\">\n    <td><code>progress</code></td>\n    <td>The program is busy in the background but the user can still interact with the interface (unlike for <code>wait</code>).</td>\n   </tr>\n   <tr style=\"cursor: wait;\">\n    <td><code>wait</code></td>\n    <td>The program is busy (sometimes an hourglass or a watch).</td>\n   </tr>\n   <tr style=\"cursor: cell;\">\n    <td rowspan=\"4\" style=\"cursor: auto;\">Selection</td>\n    <td><code>cell</code></td>\n    <td>Indicating that cells can be selected.</td>\n   </tr>\n   <tr style=\"cursor: crosshair;\">\n    <td><code>crosshair</code></td>\n    <td>Cross cursor, often used to indicate selection in a bitmap.</td>\n   </tr>\n   <tr style=\"cursor: text;\">\n    <td><code>text</code></td>\n   <td>Indicating text can be selected, typically an I-beam.</td>\n   </tr>\n   <tr style=\"cursor: vertical-text;\">\n    <td><code>vertical-text</code></td>\n    <td>Indicating that vertical text can be selected, typically a sideways I-beam.</td>\n   </tr>\n   <tr style=\"cursor: alias;\">\n    <td rowspan=\"5\" style=\"cursor: auto;\">Drag and drop</td>\n    <td><code>alias</code></td>\n        <td>Indicating an alias or shortcut is to be created.</td>\n   </tr>\n   <tr style=\"cursor: copy;\">\n    <td><code>copy</code></td>\n    <td>Indicating that something can be copied.</td>\n   </tr>\n   <tr style=\"cursor: move;\">\n    <td><code>move</code></td>\n    <td>The hovered object may be moved.</td>\n   </tr>\n   <tr style=\"cursor: no-drop;\">\n    <td><code>no-drop</code></td>\n    <td>Cursor showing that a drop is not allowed at the current location.<br>\n     <a href=\"https://bugzilla.mozilla.org/show_bug.cgi?id=275173\" class=\"external\" title=\"Cursor glyph for CSS3 &apos;no-drop&apos; is the same as for &apos;not-allowed&apos;\">bug&#xA0;275173</a> on Windows&#xA0;and Mac OS X, &quot;no-drop is the same as not-allowed&quot;.</td>\n   </tr>\n   <tr style=\"cursor: not-allowed;\">\n    <td><code>not-allowed</code></td>\n     <td>Cursor showing that something cannot be done.</td>\n   </tr>\n   <tr style=\"cursor: all-scroll;\">\n    <td rowspan=\"15\" style=\"cursor: auto;\">Resize &amp; scrolling</td>\n    <td><code>all-scroll</code></td>\n    <td>Cursor showing that something can be scrolled in any direction (panned).<br>\n     <a href=\"https://bugzilla.mozilla.org/show_bug.cgi?id=275174\" class=\"external\" title=\"Cursor glyph for CSS3 &apos;all-scroll&apos; is the same as for &apos;move&apos;\">bug&#xA0;275174</a> on Windows, &quot;<em>all-scroll</em> is the same as <em>move</em>&quot;.</td>\n   </tr>\n   <tr style=\"cursor: col-resize;\">\n    <td><code>col-resize</code></td>\n    <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.</td>\n   </tr>\n   <tr style=\"cursor: row-resize;\">\n    <td><code>row-resize</code></td>\n    <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td>\n   </tr>\n   <tr style=\"cursor: n-resize;\">\n    <td><code>n-resize</code></td>\n    <td rowspan=\"8\" style=\"cursor: auto;\">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>\n     In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</td>\n   </tr>\n   <tr style=\"cursor: e-resize;\">\n    <td><code>e-resize</code></td>\n    </tr>\n   <tr style=\"cursor: s-resize;\">\n    <td><code>s-resize</code></td>\n    </tr>\n   <tr style=\"cursor: w-resize;\">\n    <td><code>w-resize</code></td>\n    </tr>\n   <tr style=\"cursor: ne-resize;\">\n    <td><code>ne-resize</code></td>\n    </tr>\n   <tr style=\"cursor: nw-resize;\">\n    <td><code>nw-resize</code></td>\n    </tr>\n   <tr style=\"cursor: se-resize;\">\n    <td><code>se-resize</code></td>\n    </tr>\n   <tr style=\"cursor: sw-resize;\">\n    <td><code>sw-resize</code></td>\n    </tr>\n   <tr style=\"cursor: ew-resize;\">\n    <td><code>ew-resize</code></td>\n    <td rowspan=\"4\" style=\"cursor: auto;\">Indicates a bidirectional resize cursor.</td>\n   </tr>\n   <tr style=\"cursor: ns-resize;\">\n    <td><code>ns-resize</code></td>\n    </tr>\n   <tr style=\"cursor: nesw-resize;\">\n    <td><code>nesw-resize</code></td>\n    </tr>\n   <tr style=\"cursor: nwse-resize;\">\n    <td><code>nwse-resize</code></td>\n    </tr>\n   <tr style=\"cursor: -webkit-zoom-in; cursor: zoom-in;\">\n    <td rowspan=\"2\">Zoom</td>\n    <td><code>zoom-in</code></td>\n    <td rowspan=\"2\" style=\"cursor: auto;\">\n     <p>Indicates that something can be zoomed (magnified) in or out.</p>\n    </td>\n   </tr>\n   <tr style=\"cursor: -webkit-zoom-out; cursor: zoom-out;\">\n    <td><code>zoom-out</code></td>\n    </tr>\n   <tr id=\"grab\" style=\"cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;\">\n    <td rowspan=\"2\">Grab</td>\n    <td><code>grab</code></td>\n    <td rowspan=\"2\" style=\"cursor: auto;\">\n     <p>Indicates that something can be grabbed (dragged to be moved).</p>\n    </td>\n   </tr>\n   <tr style=\"cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;\">\n    <td><code>grabbing</code></td>\n    </tr>\n  </tbody>\n </table>\n "
        }]
    },
    "direction": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/direction",
        "SUMMARY": "Set the <strong><code>direction</code></strong> CSS property to match the direction of the text: <code>rtl</code> for languages written from right-to-left (like Hebrew or Arabic) text and <code>ltr</code> for other scripts. This is typically done as part of the document (e.g., using the <code>dir</code> attribute in HTML) rather than through direct use of CSS.",
        "VALUES": [{
            "value": "<code>ltr</code>",
            "description": "The initial value of <code>direction</code> (that is, if not otherwise specified). Text and other elements go from left to right."
        }, {
            "value": "<code>rtl</code>",
            "description": "Text and other elements go from right to left"
        }]
    },
    "display": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/display",
        "SUMMARY": "The <strong><code>display</code></strong> CSS property specifies the type of rendering box used for an element. In HTML, default <code>display</code> property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is <code>inline</code>.",
        "VALUES": [{
            "value": "<a name=\"display-outside\" id=\"display-outside\">&lt;display-outside&gt;</a>",
            "description": "These keywords specify the element&#x2019;s outer display type, which is essentially its role in flow layout. They are defined as follows:\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <td class=\"header\">Value</td>\n    <td class=\"header\">Description</td>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <td><code>block</code></td>\n    <td>The element generates a block element box.</td>\n   </tr>\n   <tr>\n    <td><code>inline</code></td>\n    <td>The element generates one or more inline element boxes.</td>\n   </tr>\n   <tr>\n    <td><code>run-in</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements. That is:\n     <ul>\n      <li>If the run-in box contains a block box, same as block.</li>\n      <li>If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.</li>\n      <li>If an inline box follows, the run-in box becomes a block box.</li>\n     </ul>\n    </td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<a name=\"display-inside\" id=\"display-inside\">&lt;display-inside&gt;</a>",
            "description": "These keywords specify the element&#x2019;s inner display type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). They are defined as follows:\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <td class=\"header\">Value</td>\n    <td class=\"header\">Description</td>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <td><code>flow</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>The element lays out its contents using flow layout (block-and-inline layout).\n     <p>If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.</p>\n\n     <p>Depending on the value of other properties (such as <a title=\"The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\"><code>position</code></a>, <a title=\"The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/float\"><code>float</code></a>, or <a title=\"The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/overflow\"><code>overflow</code></a>) and whether it is itself participating in a block or inline formatting context, it either establishes a new <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\">block formatting context</a> for its contents or integrates its contents into its parent formatting context.</p>\n    </td>\n   </tr>\n   <tr>\n    <td><code>flow-root</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>The element generates a block element box that establishes a new <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\">block formatting context</a>.</td>\n   </tr>\n   <tr>\n    <td><code>table</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;table&gt; element represents tabular data &#x2014;that is, information expressed via a two-dimensional data table.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table\"><code>&lt;table&gt;</code></a> HTML elements. It defines a block-level box.</td>\n   </tr>\n   <tr>\n    <td><code>flex</code></td>\n    <td>The element behaves like a block element and lays out its content according to the flexbox model.</td>\n   </tr>\n   <tr>\n    <td><code>-webkit-flex</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span></td>\n    <td>Alias for <code>flex</code>.</td>\n   </tr>\n   <tr>\n    <td><code>-moz-box</code> / <code>-webkit-box</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span></td>\n    <td>The element behaves like a flexible box according to an outdated Flexbox specification.</td>\n   </tr>\n   <tr>\n    <td><code>grid</code></td>\n    <td>The element behaves like a block element and lays out its content according to the grid model.</td>\n   </tr>\n   <tr>\n    <td><code>subgrid</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>If the parent element has <code>display:grid</code>, the element itself and its content are laid out according to the grid model.</td>\n   </tr>\n   <tr>\n    <td><code>ruby</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding <a title=\"The HTML &lt;ruby&gt; element represents a ruby annotation. Ruby annotations are for showing pronunciation of East Asian characters.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby\"><code>&lt;ruby&gt;</code></a> HTML elements.</td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<a name=\"display-listitem\" id=\"display-listitem\">&lt;display-listitem&gt;</a>",
            "description": "\n <p>The element generates a block box for the content and a separate list-item inline box.</p>\n\n <p>If no <code>&lt;display-inside&gt;</code> value is specified, the principal box&#x2019;s inner display type defaults to <code>flow</code>. If no <code>&lt;display-outside&gt;</code> value is specified, the principal box&#x2019;s outer display type defaults to <code>block</code>.</p>\n "
        }, {
            "value": "<a name=\"display-internal\" id=\"display-internal\">&lt;display-internal&gt;</a>",
            "description": "\n <p>Some layout models, such as <span class=\"css\">table</span> and ruby, have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those &quot;internal&quot; display values, which only have meaning within that particular layout mode.</p>\n\n <p>Unless otherwise specified, both the inner display type and the outer display type of elements using these display values are set to the given keyword.</p>\n\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <td class=\"header\">Value</td>\n    <td class=\"header\">Description</td>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <td><code>table-row-group</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;tbody&gt; element groups one or more &lt;tr&gt; elements as the body of a &lt;table&gt; element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody\"><code>&lt;tbody&gt;</code></a> HTML elements</td>\n   </tr>\n   <tr>\n    <td><code>table-header-group</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;thead&gt; element defines a set of rows defining the head of the columns of the table.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead\"><code>&lt;thead&gt;</code></a> HTML elements.</td>\n   </tr>\n   <tr>\n    <td><code>table-footer-group</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;tfoot&gt; element defines a set of rows summarizing the columns of the table.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot\"><code>&lt;tfoot&gt;</code></a> HTML elements.</td>\n   </tr>\n   <tr>\n    <td><code>table-row</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;tr&gt; element defines a row of cells in a table. Those can be a mix of &lt;td&gt; and &lt;th&gt; elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr\"><code>&lt;tr&gt;</code></a> HTML elements.</td>\n   </tr>\n   <tr>\n    <td><code>table-cell</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;td&gt; element defines a cell of a table that contains data. It participates in the table model.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td\"><code>&lt;td&gt;</code></a> HTML elements.</td>\n   </tr>\n   <tr>\n    <td><code>table-column-group</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;colgroup&gt; element defines a group of columns within a table.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup\"><code>&lt;colgroup&gt;</code></a> HTML elements.</td>\n   </tr>\n   <tr>\n    <td><code>table-column</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;col&gt; element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a &lt;colgroup&gt; element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col\"><code>&lt;col&gt;</code></a> HTML elements.</td>\n   </tr>\n   <tr>\n    <td><code>table-caption</code></td>\n    <td>These elements behave like <a title=\"The HTML &lt;caption&gt; element represents the title of a table. Though it is always the first descendant of a &lt;table&gt;, its styling, using CSS, may place it elsewhere, relative to the table.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption\"><code>&lt;caption&gt;</code></a> HTML elements.</td>\n   </tr>\n   <tr>\n    <td><code>ruby-base</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>These elements behave like <a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb\" class=\"new\"><code>&lt;rb&gt;</code></a> elements.</td>\n   </tr>\n   <tr>\n    <td><code>ruby-text</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>These elements behave like <a title=\"The HTML &lt;rt&gt; element embraces pronunciation of characters presented in a ruby annotations, which are used to describe the pronunciation of East Asian characters. This element is always used inside a &lt;ruby&gt; element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt\"><code>&lt;rt&gt;</code></a> elements.</td>\n   </tr>\n   <tr>\n    <td><code>ruby-base-container</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>These elements behave like <a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rbc\" class=\"new\"><code>&lt;rbc&gt;</code></a> elements generated as anonymous boxes.</td>\n   </tr>\n   <tr>\n    <td><code>ruby-text-container</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>These elements behave like <a title=\"The HTML &lt;rtc&gt; element embraces semantic annotations of characters presented in a ruby of &lt;rb&gt; elements used inside of &lt;ruby&gt; element. &lt;rb&gt; elements can have both pronunciation (&lt;rt&gt;) and semantic (&lt;rtc&gt;) annotations.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc\"><code>&lt;rtc&gt;</code></a> elements.</td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<a name=\"display-box\" id=\"display-box\">&lt;display-box&gt;</a>",
            "description": "These values define whether an element generates display boxes at all.\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <td class=\"header\">Value</td>\n    <td class=\"header\">Description</td>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <td><code>contents</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>These elements don&apos;t produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.</td>\n   </tr>\n   <tr>\n    <td><code>none</code></td>\n    <td>\n     <p>Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.</p>\n\n     <p>To render an element box&apos;s dimensions, yet have its contents be invisible, see the <a title=\"The visibility property can be used to hide an element while leaving the space where it would have been. It can also hide rows or columns of a table.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/visibility\"><code>visibility</code></a> property.</p>\n    </td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<a name=\"display-legacy\" id=\"display-legacy\">&lt;display-legacy&gt;</a>",
            "description": "CSS 2 used a single-keyword syntax for the <code>display</code> property, requiring separate keywords for block-level and inline-level variants of the same layout mode. They are defined as follows:\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <td class=\"header\">Value</td>\n    <td class=\"header\">Description</td>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <td><code>inline-block</code></td>\n    <td>\n     <p>The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)</p>\n\n     <p>It is equivalent to <code>inline flow-root</code>.</p>\n    </td>\n   </tr>\n   <tr>\n    <td><code>inline-list-item</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span></td>\n    <td>This value makes the element a list item, with the effects described above. Additionally, the <code>outside</code> value of <a title=\"The list-style-position property specifies the position of the marker box in the principal block box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position\"><code>list-style-position</code></a> computes to <code>inside</code> on this element. Otherwise, this display value is treated identically to inline.</td>\n   </tr>\n   <tr>\n    <td><code>inline-table</code></td>\n    <td>\n     <p>The<code> inline-table </code>value does not have a direct mapping in HTML. It behaves like a <a title=\"The HTML &lt;table&gt; element represents tabular data &#x2014;that is, information expressed via a two-dimensional data table.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table\"><code>&lt;table&gt;</code></a> HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.</p>\n\n     <p>It is equivalent to <code>inline table</code>.</p>\n    </td>\n   </tr>\n   <tr>\n    <td><code>inline-flex</code></td>\n    <td>\n     <p>The element behaves like an inline element and lays out its content according to the flexbox model.</p>\n\n     <p>It is equivalent to <code>inline flex</code>.</p>\n    </td>\n   </tr>\n   <tr>\n    <td><code>-webkit-inline-flex</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span></td>\n    <td>Alias for <code>inline-flex</code>.</td>\n   </tr>\n   <tr>\n    <td><code>-moz-inline-box</code> / <code>-webkit-inline-box</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span></td>\n    <td>The element behaves like a inline flexible box according to an outdated Flexbox specification.</td>\n   </tr>\n   <tr>\n    <td><code>inline-grid</code></td>\n    <td>The element behaves like an inline element and lays out its content according to the grid model.</td>\n   </tr>\n  </tbody>\n </table>\n "
        }]
    },
    "display-inside": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/display-inside",
        "SUMMARY": "The <code>display-inside</code> CSS property specifies the inner display type of the box generated by an element, dictating how its contents lay out inside the box.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "If the element&apos;s computed <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display-outside\" title=\"The display-outside CSS property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context.\"><code>display-outside</code></a> value is <code>inline-level</code>, the element is an inline element, and lays out its contents using inline layout. If the element&apos;s computed <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display-outside\" title=\"The display-outside CSS property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context.\"><code>display-outside</code></a> value is an layout-specific internal type, this elements acts as normal for its given <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display-outside\" title=\"The display-outside CSS property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context.\"><code>display-outside</code></a> value. Otherwise, this value computes to block."
        }, {
            "value": "<code>block</code>",
            "description": "The element lays out its contents using block layout."
        }, {
            "value": "<code>table</code>",
            "description": "The element lays out its contents using table layout."
        }, {
            "value": "<code>flex</code>",
            "description": "The element lays out its contents using flex layout."
        }, {
            "value": "<code>grid</code>",
            "description": "The element lays out its contents using grid layout."
        }, {
            "value": "<code>ruby</code>",
            "description": "The element lays out its contents using ruby layout."
        }]
    },
    "display-list": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/display-list",
        "SUMMARY": "The <code>display-list</code> CSS property specifies whether a list marker should be displayed for an element.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "There is no list marker displayed for the element."
        }, {
            "value": "<code>list-item</code>",
            "description": "The element generates a <code>::marker</code> pseudo-element and is considered a list item."
        }]
    },
    "display-outside": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/display-outside",
        "SUMMARY": "The <code>display-outside</code> CSS property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context.",
        "VALUES": [{
            "value": "<code>block-level</code>",
            "description": "The element generates a block-level box, and participates in a block formatting context. Other formatting contexts, such as flex formatting contexts, may also work with block-level elements."
        }, {
            "value": "<code>inline-level</code>",
            "description": "The element generates an inline-level box, and participates in an inline formatting context."
        }, {
            "value": "<code>run-in</code>",
            "description": "The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements."
        }, {
            "value": "<code>contents</code>",
            "description": "The element lays out its contents using flex layout."
        }, {
            "value": "<code>none</code>",
            "description": "The element generates no boxes, and does not participate in any formatting context."
        }, {
            "value": "<code>table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption</code>",
            "description": "The element is an internal table element, and participates in a table layout context.<br>\n <br>\n <code>table-cell</code> and <code>table-caption</code> are layout-specific leaf types; the rest are <a href=\"#layout-internal\">layout-specific internal types</a>."
        }, {
            "value": "<code>ruby-base, ruby-text, ruby-base-container, ruby-text-container</code>",
            "description": "The element is an internal ruby element, and participates in a ruby layout context.<br>\n <br>\n <code>ruby-base</code> and <code>ruby-text</code> are <a href=\"#layout-leaf\">layout-specific leaf types</a>; <code>ruby-base-container</code> and <code>ruby-text-container</code> are <a href=\"#layout-internal\">layout-specific internal types</a>."
        }, {
            "value": "<a name=\"layout-internal\">layout-specific internal types</a>",
            "description": "These display types require their parent and children to be of particular display types. For example, a <code>table-row</code> box requires its parent to be a table row group box and its children to be <code>table-cell</code> boxes."
        }, {
            "value": "<a name=\"layout-leaf\">layout-specific leaf types</a>",
            "description": "These display types require their parent to be of a particular display type, but can accept any <code>display-inside</code> value. For example, a <code>table-caption</code> box must have a <code>table</code> parent, but can establish any kind of formatting context for its children."
        }]
    },
    "element": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/element",
        "SUMMARY": "The <code>element()</code> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> function defines an <a title=\"The &lt;image&gt; 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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\"><code>&lt;image&gt;</code></a> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.",
        "VALUES": [{
            "value": "<strong><code>id</code></strong>",
            "description": "The ID of an element to use as the background, specified using the HTML attribute #<em>id</em> on the element."
        }]
    },
    "empty-cells": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells",
        "SUMMARY": "The <strong><code>empty-cells</code></strong> CSS property specifies how user agents should render borders and backgrounds around cells that have no visible content.",
        "VALUES": [{
            "value": "<code>show</code>",
            "description": "Is a keyword indicating that borders and backgrounds should be drawn like in normal cells."
        }, {
            "value": "<code>hide</code>",
            "description": "Is a keyword indicating that no borders or backgrounds should be drawn."
        }]
    },
    "filter": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/filter",
        "SUMMARY": "The <strong><code>filter</code></strong> property provides graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.",
        "VALUES": [{
            "value": "<code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(required)</small>",
            "description": "These are two <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> values to set the shadow offset. <code>&lt;offset-x&gt;</code> specifies the horizontal distance. Negative values place the shadow to the left of the element. <code>&lt;offset-y&gt;</code> specifies the vertical distance. Negative values place the shadow above the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible units.<br>\n If both values are <code>0</code>, the shadow is placed behind the element (and may generate a blur effect if <code>&lt;blur-radius&gt;</code> and/or <code>&lt;spread-radius&gt;</code> is set)."
        }, {
            "value": "<code>&lt;blur-radius&gt;</code> <small>(optional)</small>",
            "description": "This is a third <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be <code>0</code> (the shadow&apos;s edge is sharp)."
        }, {
            "value": "<code>&lt;spread-radius&gt;</code> <small>(optional)</small>",
            "description": "This is a fourth <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be <code>0</code> (the shadow will be the same size as the element).&#xA0;<br>\n Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added."
        }, {
            "value": "<code>&lt;color&gt;</code> <small>(optional)</small>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> values for possible keywords and notations. If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"The color property sets the foreground color of an element&apos;s text content, and its decorations. It doesn&apos;t affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.\"><code>color</code></a> property is used. On the other hand, WebKit&apos;s shadow is transparent and therefore useless if <code>&lt;color&gt;</code> is omitted."
        }]
    },
    "fit-content()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content",
        "SUMMARY": "The <strong><code>fit-content()</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> function clamps a given size to an available size according to the formula <code>min(<var>maximum size</var>, max(<var>minimum size</var>, <var>argument</var>))</code>.",
        "VALUES": [{
            "value": "&lt;length&gt;",
            "description": "An absolute length."
        }, {
            "value": "&lt;percentage&gt;",
            "description": "A percentage relative to the available space in the given axis."
        }]
    },
    "flex": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex",
        "SUMMARY": "The <strong><code>flex</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.",
        "VALUES": [{
            "value": "<a name=\"&lt;&apos;flex-grow&apos;&gt;\" id=\"&lt;&apos;flex-grow&apos;&gt;\"><code>&lt;&apos;flex-grow&apos;&gt;</code></a>",
            "description": "Defines the&#xA0;<code><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow\">flex-grow</a></code>&#xA0;of the flex item. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> for more details. Negative values are considered invalid. Defaults to <code>0</code> when omitted."
        }, {
            "value": "<a name=\"&lt;&apos;flex-shrink&apos;&gt;\" id=\"&lt;&apos;flex-shrink&apos;&gt;\"><code>&lt;&apos;flex-shrink&apos;&gt;</code></a>",
            "description": "Defines the&#xA0;<code><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink\">flex-shrink</a></code>&#xA0;of the flex item. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> for more details. Negative values are considered invalid. Defaults to <code>1</code> when omitted."
        }, {
            "value": "<a name=\"&lt;&apos;flex-basis&apos;&gt;\" id=\"&lt;&apos;flex-basis&apos;&gt;\"><code>&lt;&apos;flex-basis&apos;&gt;</code></a>",
            "description": "Defines the&#xA0;<a href=\"https://developer.mozilla.org/en-US/docs/CSS/flex-basis\" title=\"CSS/flex-basis\"><code>flex-basis</code></a>&#xA0;of the flex item. Any value valid for <code>width</code> and <code>height</code> properties are accepted. A preferred size of <code>0</code> must have a unit to avoid being interpreted as a flexibility. Defaults to <code>auto</code>&#xA0;when omitted."
        }, {
            "value": "<a name=\"none\" id=\"none\"><code>none</code></a>",
            "description": "This keyword computes to <code>0 0 auto</code>."
        }]
    },
    "flex-basis": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis",
        "SUMMARY": "The <strong><code>flex-basis</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the flex basis which is the initial <strong>main size</strong> of a flex item. This property determines the size of the content-box unless specified otherwise using <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing\" title=\"The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.\"><code>box-sizing</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;width&apos;&gt;</code>",
            "description": "Defined as a number followed by a absolute unit such as <code>px</code>, <code>mm</code> or <code>pt</code>, or a percentage of the parent flex container main size property. Negative values are invalid."
        }, {
            "value": "<code>content</code>",
            "description": "Indicates automatic sizing, based on the flex item&#x2019;s content."
        }]
    },
    "flex-direction": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction",
        "SUMMARY": "The <strong><code>flex-direction</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).",
        "VALUES": [{
            "value": "<code>row</code>",
            "description": "The flex container&apos;s main-axis is defined to be the same as the text direction. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the content direction."
        }, {
            "value": "<code>row-reverse</code>",
            "description": "Behaves the same as <code>row</code> but the <strong>main-start</strong> and <strong>main-end</strong> points are permuted."
        }, {
            "value": "<code>column</code>",
            "description": "The flex container&apos;s main-axis is the same as the block-axis. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the <strong>before</strong> and <strong>after</strong> points of the writing-mode."
        }, {
            "value": "<code>column-reverse</code>",
            "description": "Behaves the same as <code>column</code> but the <strong>main-start</strong> and <strong>main-end</strong> are permuted."
        }]
    },
    "flex-flow": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow",
        "SUMMARY": "The <strong><code>flex-flow</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for <code>flex-direction</code> and <code>flex-wrap</code> individual properties.",
        "VALUES": [{
            "value": "",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/CSS/flex-direction\" title=\"en-US/docs/CSS/flex-direction\"><code>flex-direction</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/CSS/flex-wrap\" title=\"flex-wrap\"><code>flex-wrap</code></a> for details on the values."
        }]
    },
    "flex-grow": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow",
        "SUMMARY": "The <strong><code>flex-grow</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up.",
        "VALUES": [{
            "value": "<code>&lt;number&gt;</code>",
            "description": "See <a title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\"><code>&lt;number&gt;</code></a>. Negative values are invalid."
        }]
    },
    "flex-shrink": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink",
        "SUMMARY": "The <strong><code>flex-shrink</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies the flex shrink factor of a flex item.",
        "VALUES": [{
            "value": "<code>&lt;number</code>&gt;",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a>. Negative values are invalid."
        }]
    },
    "flex-wrap": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> <strong><code>flex-wrap</code></strong> property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.",
        "VALUES": [{
            "value": "<code>nowrap</code>",
            "description": "The flex items are laid out in a single line which may cause the flex container to overflow. The <strong>cross-start</strong> is either equivalent to <strong>start</strong> or <strong>before</strong> depending <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction\" title=\"The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\"><code>flex-direction</code></a> value."
        }, {
            "value": "<code>wrap</code>",
            "description": "The flex items break into multiple lines. The <strong>cross-start</strong> is either equivalent to <strong>start</strong> or <strong>before</strong> depending <code>flex-direction</code> value and the <strong>cross-end</strong> is the opposite of the specified <strong>cross-start</strong>."
        }, {
            "value": "<code>wrap-reverse</code>",
            "description": "Behaves the same as <code>wrap</code> but <strong>cross-start</strong> and <strong>cross-end</strong> are permuted."
        }]
    },
    "float": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/float",
        "SUMMARY": "The <strong><code>float</code></strong> CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.",
        "VALUES": [{
            "value": "<code>left</code>",
            "description": "Is a keyword indicating that the element must float on the left side of its containing block."
        }, {
            "value": "<code>right</code>",
            "description": "Is a keyword indicating that the element must float on the right side of its containing block."
        }, {
            "value": "<code>none</code>",
            "description": "Is a keyword indicating that the element must not float."
        }, {
            "value": "<code>inline-start</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Is a keyword indicating that the element must float on the start side of its containing block, that is the left side on ltr scripts and the right side on rtl scripts."
        }, {
            "value": "<code>inline-end</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Is a keyword indicating that the element must float on the end side of its containing block, that is the right side on ltr scripts and the left side on rtl scripts."
        }]
    },
    "font": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font",
        "SUMMARY": "The <code>font</code> CSS property is either a shorthand property for setting <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-style\" title=\"The font-style CSS property lets you select italic or oblique faces within a font-family. Italic forms are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. Both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (see font-synthesis for control over this).\"><code>font-style</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant\" title=\"The font-variant property acts as a shorthand for the longhand properties: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. You can also set the CSS Level 2 (Revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.\"><code>font-variant</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight\" title=\"The font-weight CSS property specifies the weight or boldness of the font. Some fonts are only available in normal and bold.\"><code>font-weight</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font (historically the width of the capital &quot;M&quot;). Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/line-height\" title=\"On block level elements, the line-height property specifies the minimum height of line boxes within the element.\"><code>line-height</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-family\" title=\"The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.\"><code>font-family</code></a>, or a way to set the element's font to a system font, using specific keywords.",
        "VALUES": [{
            "value": "<code>&lt;&apos;font-style&apos;&gt;</code>",
            "description": "See the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-style\" title=\"The font-style CSS property lets you select italic or oblique faces within a font-family. Italic forms are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. Both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (see font-synthesis for control over this).\"><code>font-style</code></a> CSS property."
        }, {
            "value": "<code>&lt;&apos;font-variant&apos;&gt;</code>",
            "description": "See the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant\" title=\"The font-variant property acts as a shorthand for the longhand properties: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. You can also set the CSS Level 2 (Revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.\"><code>font-variant</code></a> CSS property."
        }, {
            "value": "<code>&lt;&apos;font-weight&apos;&gt;</code>",
            "description": "See the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight\" title=\"The font-weight CSS property specifies the weight or boldness of the font. Some fonts are only available in normal and bold.\"><code>font-weight</code></a> CSS property."
        }, {
            "value": "<code>&lt;&apos;font-stretch&apos;&gt;</code>",
            "description": "See the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch\" title=\"The font-stretch property selects a normal, condensed, or expanded face from a font.\"><code>font-stretch</code></a> CSS property."
        }, {
            "value": "<code>&lt;&apos;font-size&apos;&gt;</code>",
            "description": "See the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font . Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a> CSS property."
        }, {
            "value": "<code>&lt;&apos;line-height&apos;&gt;</code>",
            "description": "See the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/line-height\" title=\"On block level elements, the line-height property specifies the minimum height of line boxes within the element.\"><code>line-height</code></a> CSS property."
        }, {
            "value": "<code>&lt;&apos;font-family&apos;&gt;</code>",
            "description": "See the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-family\" title=\"The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.\"><code>font-family</code></a> CSS property."
        }, {
            "value": "<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code>",
            "description": "Instead of specifying individual longhand properties, a keyword can be used to represent a specific system font:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td><code>caption</code></td>\n    <td>The font used for captioned controls (e.g., buttons, drop-downs, etc.).</td>\n   </tr>\n   <tr>\n    <td><code>icon</code></td>\n    <td>The font used to label icons.</td>\n   </tr>\n   <tr>\n    <td><code>menu</code></td>\n    <td>The font used in menus (e.g., dropdown menus and menu lists).</td>\n   </tr>\n   <tr>\n    <td><code>message-box</code></td>\n    <td>The font used in dialog boxes.</td>\n   </tr>\n   <tr>\n    <td><code>small-caption</code></td>\n    <td>The font used for labeling small controls.</td>\n   </tr>\n   <tr>\n    <td><code>status-bar</code></td>\n    <td>The font used in window status bars.</td>\n   </tr>\n  </tbody>\n </table>\n Browsers implementing these often implement several more, prefixed, values; Gecko implements <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code> and <code>-moz-field</code>."
        }]
    },
    "font-family": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family",
        "SUMMARY": "The <strong><code>font-family</code></strong> CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a <a title=\"The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face\"><code>@font-face</code></a> at-rule.",
        "VALUES": [{
            "value": "<a name=\"&lt;family-name&gt;\" id=\"&lt;family-name&gt;\"><code>&lt;family-name&gt;</code></a>",
            "description": "The name of a font family. For example, &quot;Times&quot; and &quot;Helvetica&quot; are font families. Font family names containing whitespace should be quoted."
        }, {
            "value": "<a name=\"&lt;generic-name&gt;\" id=\"&lt;generic-name&gt;\"><code>&lt;generic-name&gt;</code></a>",
            "description": "\n <p>Generic font families are a fallback mechanism, a means of preserving some of the style sheet author&apos;s intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:</p>\n\n <dl>\n  <dt><code>serif</code></dt>\n  <dd style=\"font-family: serif;\">Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.<br>\n  E.g. <span style=\"font-family: lucida bright,serif;\">Lucida Bright</span>, <span style=\"font-family: lucida fax,serif;\">Lucida Fax</span>, <span style=\"font-family: palatino,serif;\">Palatino</span>, <span style=\"font-family: palatino linotype,serif;\">&quot;Palatino Linotype&quot;</span>, <span style=\"font-family: palladio,serif;\">Palladio</span>, <span style=\"font-family: urw palladio,serif;\">&quot;URW Palladio&quot;</span>, <span style=\"font-family: serif;\">serif</span>.</dd>\n  <dt><code>sans-serif</code></dt>\n  <dd style=\"font-family: sans-serif;\">Glyphs have stroke endings that are plain.<br>\n  E.g. <span style=\"font-family: open sans,sans-serif;\">&quot;Open Sans&quot;</span>, <span style=\"font-family: fira sans,sans-serif;\">&quot;Fira Sans&quot;</span>, <span style=\"font-family: lucida sans,sans-serif;\">&quot;Lucida Sans&quot;</span>, <span style=\"font-family: lucida sans unicode,sans-serif;\">&quot;Lucida Sans Unicode&quot;</span>, <span style=\"font-family: trebuchet ms,sans-serif;\">&quot;Trebuchet MS&quot;</span>, <span style=\"font-family: liberation sans,sans-serif;\">&quot;Liberation Sans&quot;</span>, <span style=\"font-family: nimbus sans l,sans-serif;\">&quot;Nimbus Sans L&quot;</span>, <span style=\"font-family: sans-serif;\">sans-serif</span>.</dd>\n  <dt><code>monospace</code></dt>\n  <dd style=\"font-family: monospace;\">All glyphs have the same fixed width.<br>\n  E.g. <span style=\"font-family: fira mono,monospace;\">&quot;Fira Mono&quot;</span>, <span style=\"font-family: dejavu sans mono,monospace;\">&quot;DejaVu Sans Mono&quot;</span>, <span style=\"font-family: menlo,monospace;\">Menlo</span>, <span style=\"font-family: consolas,monospace;\">Consolas</span>, <span style=\"font-family: liberation mono,monospace;\">&quot;Liberation Mono&quot;</span>, <span style=\"font-family: monaco,monospace;\">Monaco</span>, <span style=\"font-family: lucida console,monospace;\">&quot;Lucida Console&quot;</span>, <span style=\"font-family: monospace;\">monospace.</span></dd>\n  <dt><code>cursive</code></dt>\n  <dd style=\"font-family: cursive;\">Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.<br>\n  E.g. <span style=\"font-family: brush script mt,cursive;\">&quot;Brush Script MT</span>&quot;, <span style=\"font-family: brush script std,cursive;\">&quot;Brush Script Std</span>&quot;, <span>&quot;Lucida Calligraphy&quot;</span>, <span>&quot;Lucida Handwriting&quot;</span>, <span style=\"font-family: apple chancery,cursive;\">&quot;Apple Chancery&quot;</span>, <span style=\"font-family: cursive;\">cursive</span>.</dd>\n  <dt><code>fantasy</code></dt>\n  <dd style=\"font-family: fantasy;\">Fantasy fonts are primarily decorative fonts that contain playful representations of characters.<br>\n  E.g. <span style=\"font-family: papyrus,fantasy;\">Papyrus</span>, <span style=\"font-family: herculanum,fantasy;\">Herculanum</span>, <span style=\"font-family: party let,fantasy;\">Party LET</span>, <span style=\"font-family: curlz mt,fantasy;\">Curlz MT</span>, <span style=\"font-family: harrington,fantasy;\">Harrington</span>, <span style=\"font-family: fantasy;\">fantasy</span>.</dd>\n  <dt><code>system-ui</code></dt>\n  <dd style=\"\">Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don&apos;t map cleanly into the other generics.</dd>\n </dl>\n "
        }, {
            "value": "<code>serif</code>",
            "description": "Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.<br>\n  E.g. <span style=\"font-family: lucida bright,serif;\">Lucida Bright</span>, <span style=\"font-family: lucida fax,serif;\">Lucida Fax</span>, <span style=\"font-family: palatino,serif;\">Palatino</span>, <span style=\"font-family: palatino linotype,serif;\">&quot;Palatino Linotype&quot;</span>, <span style=\"font-family: palladio,serif;\">Palladio</span>, <span style=\"font-family: urw palladio,serif;\">&quot;URW Palladio&quot;</span>, <span style=\"font-family: serif;\">serif</span>."
        }, {
            "value": "<code>sans-serif</code>",
            "description": "Glyphs have stroke endings that are plain.<br>\n  E.g. <span style=\"font-family: open sans,sans-serif;\">&quot;Open Sans&quot;</span>, <span style=\"font-family: fira sans,sans-serif;\">&quot;Fira Sans&quot;</span>, <span style=\"font-family: lucida sans,sans-serif;\">&quot;Lucida Sans&quot;</span>, <span style=\"font-family: lucida sans unicode,sans-serif;\">&quot;Lucida Sans Unicode&quot;</span>, <span style=\"font-family: trebuchet ms,sans-serif;\">&quot;Trebuchet MS&quot;</span>, <span style=\"font-family: liberation sans,sans-serif;\">&quot;Liberation Sans&quot;</span>, <span style=\"font-family: nimbus sans l,sans-serif;\">&quot;Nimbus Sans L&quot;</span>, <span style=\"font-family: sans-serif;\">sans-serif</span>."
        }, {
            "value": "<code>monospace</code>",
            "description": "All glyphs have the same fixed width.<br>\n  E.g. <span style=\"font-family: fira mono,monospace;\">&quot;Fira Mono&quot;</span>, <span style=\"font-family: dejavu sans mono,monospace;\">&quot;DejaVu Sans Mono&quot;</span>, <span style=\"font-family: menlo,monospace;\">Menlo</span>, <span style=\"font-family: consolas,monospace;\">Consolas</span>, <span style=\"font-family: liberation mono,monospace;\">&quot;Liberation Mono&quot;</span>, <span style=\"font-family: monaco,monospace;\">Monaco</span>, <span style=\"font-family: lucida console,monospace;\">&quot;Lucida Console&quot;</span>, <span style=\"font-family: monospace;\">monospace.</span>"
        }, {
            "value": "<code>cursive</code>",
            "description": "Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.<br>\n  E.g. <span style=\"font-family: brush script mt,cursive;\">&quot;Brush Script MT</span>&quot;, <span style=\"font-family: brush script std,cursive;\">&quot;Brush Script Std</span>&quot;, <span>&quot;Lucida Calligraphy&quot;</span>, <span>&quot;Lucida Handwriting&quot;</span>, <span style=\"font-family: apple chancery,cursive;\">&quot;Apple Chancery&quot;</span>, <span style=\"font-family: cursive;\">cursive</span>."
        }, {
            "value": "<code>fantasy</code>",
            "description": "Fantasy fonts are primarily decorative fonts that contain playful representations of characters.<br>\n  E.g. <span style=\"font-family: papyrus,fantasy;\">Papyrus</span>, <span style=\"font-family: herculanum,fantasy;\">Herculanum</span>, <span style=\"font-family: party let,fantasy;\">Party LET</span>, <span style=\"font-family: curlz mt,fantasy;\">Curlz MT</span>, <span style=\"font-family: harrington,fantasy;\">Harrington</span>, <span style=\"font-family: fantasy;\">fantasy</span>."
        }, {
            "value": "<code>system-ui</code>",
            "description": "Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don&apos;t map cleanly into the other generics."
        }]
    },
    "font-feature-settings": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings",
        "SUMMARY": "The <strong><code>font-feature-settings</code></strong> CSS property gives you control over advanced typographic features in OpenType fonts.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Text is laid out using default settings."
        }, {
            "value": "<code>&lt;feature-tag-value&gt;</code>",
            "description": "When rendering text, the list of OpenType feature tag value is passed to the text layout engine to enable or disable font features. The tag is always a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/string\" title=\"The &lt;string&gt; CSS data type represents a string. It is formed by a Unicode characters delimited by either double (&quot;) or single (&apos;) 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.\"><code>&lt;string&gt;</code></a> of 4 ASCII characters. If it has more or less characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid.<br>\n The value is a positive integer. The two keywords <code>on</code> and <code>off</code> are synonyms for <code>1</code> and <code>0</code> respectively. If no value is set, the default is <code>1</code>. For non-Boolean OpenType features (e.g. <a href=\"http://www.microsoft.com/typography/otspec/features_pt.htm#salt\" class=\"external\" title=\"http://www.microsoft.com/typography/otspec/features_pt.htm#salt\">stylistic alternates</a>), the value implies a particular glyph to be selected; for Boolean values, it is a switch."
        }]
    },
    "font-kerning": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning",
        "SUMMARY": "The <strong><code>font-kerning</code></strong> CSS property controls the usage of the kerning information; that is, it controls how letters are spaced. The kerning information is stored in the font, and if the font is <em>well-kerned</em>, this feature allows spacing between characters to be very similar, whatever the characters are.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "This keyword defers to the browser regarding whether to use kerning. When the font size is small, font kerning may look strange and browsers will disable it. This is the default value."
        }, {
            "value": "<code>normal</code>",
            "description": "This keyword requires kerning to be applied."
        }, {
            "value": "<code>none</code>",
            "description": "This keyword prevents the browser from using the kerning information stored in the font."
        }]
    },
    "font-language-override": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override",
        "SUMMARY": "The <strong><code>font-language-override</code></strong> CSS property controls the usage of language-specific glyphs in a typeface.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "This keyword forces the browser to use glyphs defined for the given language in the font."
        }, {
            "value": "<code>&lt;string&gt;</code>",
            "description": "This keyword forces the browser to use the language defined by the string. The values are the <a href=\"http://www.microsoft.com/typography/otspec/languagetags.htm\" class=\"external\">OpenType language system</a> strings."
        }]
    },
    "font-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-size",
        "SUMMARY": "The <strong><code>font-size</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property specifies the size of the font . Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the <code>em</code> and <code>ex</code> <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> units.",
        "VALUES": [{
            "value": "<code>xx-small, x-small, small, medium, large, x-large, xx-large</code>",
            "description": "A set of absolute size keywords based on the user&apos;s default font size (which is <code>medium</code>). Similar to presentational HTML&apos;s <code>&lt;font size=&quot;1&quot;&gt;</code> through <code>&lt;font size=&quot;7&quot;&gt;</code> where the user&apos;s default font size is <code>&lt;font size=&quot;3&quot;&gt;</code>."
        }, {
            "value": "<code>larger, smaller</code>",
            "description": "Larger or smaller than the parent element&apos;s font size, by roughly the ratio used to separate the absolute size keywords above."
        }, {
            "value": "<code>&lt;length-percentage&gt;</code><em> </em>",
            "description": "\n <p>A positive <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> or <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> value. When the units of <code>&lt;length&gt;</code> values are specified in <code>em</code> or <code>ex</code>, the size is defined relative to the size of the font on the parent element of the element in question. For example, 0.5em is half the font size of the parent of the current element. When the units are specified in <code>rem</code>, the size is defined relative to the size of the font used by the <a title=\"The HTML &lt;html&gt; element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\"><code>&lt;html&gt;</code></a> (root) element.</p>\n\n <p>&lt;percentage&gt; values refer to the parent element&apos;s font size.</p>\n "
        }]
    },
    "font-size-adjust": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust",
        "SUMMARY": "The <strong><code>font-size-adjust</code></strong> CSS property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters. This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Choose the size of the font based only on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font (historically the width of the capital &quot;M&quot;). Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a> property."
        }, {
            "value": "<code>&lt;number&gt;</code>",
            "description": "\n <p>Choose the size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font (historically the width of the capital &quot;M&quot;). Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex &lt;length&gt; units.\"><code>font-size</code></a>.</p>\n\n <p>The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-family\" title=\"The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.\"><code>font-family</code></a>. This means that the first choice font, when available, will appear the same size in browsers, whether or not they support <code>font-size-adjust</code>.</p>\n\n <p><code>0</code> yields text of zero height (hidden text). Note that some old browsers, like Firefox prior version 40, treated <code>0</code> as <code>none</code>.</p>\n "
        }]
    },
    "font-smooth": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth",
        "SUMMARY": "The <code>font-smooth</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property controls the application of anti-aliasing when fonts are rendered.",
        "VALUES": []
    },
    "font-stretch": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch",
        "SUMMARY": "The <strong><code>font-stretch</code></strong> property selects a normal, condensed, or expanded face from a font.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Specifies a normal font face."
        }, {
            "value": "<code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code>",
            "description": "Specifies a font face more condensed than normal, with ultra-condensed as the most condensed."
        }, {
            "value": "<code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code>",
            "description": "Specifies a font face more expanded than normal, with ultra-expanded as the most expanded."
        }]
    },
    "font-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-style",
        "SUMMARY": "The<strong> <code>font-style</code></strong> CSS property lets you select <code>italic</code> or <code>oblique</code> faces within a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-family\" title=\"The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.\"><code>font-family</code></a>. <strong>Italic</strong> forms are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while <strong>oblique</strong> faces are usually just sloped versions of the regular face. Both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (see <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis\" title=\"The font-synthesis CSS property controls which missing typefaces, bold or italic, may be synthesized by the browser.\"><code>font-synthesis</code></a> for control over this).",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Selects a font that is classified as <code>normal</code> within a <a title=\"The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-family\"><code>font-family</code></a>."
        }, {
            "value": "<code>italic</code>",
            "description": "Selects a font that is labeled <code>italic</code>, or, if no italic version of the face is available, one labeled <code>oblique</code> is selected instead."
        }, {
            "value": "<code>oblique</code>",
            "description": "Selects a font that is labeled <code>oblique</code>, or, if no oblique version of the face is available, one labeled <code>italic</code> is selected instead."
        }]
    },
    "font-synthesis": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis",
        "SUMMARY": "The <strong><code>font-synthesis</code></strong> CSS property controls which missing typefaces, bold or italic, may be synthesized by the browser.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "This keyword indicates that neither bold nor italic typeface must be synthesized."
        }, {
            "value": "<code>weight</code>",
            "description": "This keyword indicates that a bold typeface may be synthesized if needed."
        }, {
            "value": "<code>style</code>",
            "description": "This keyword indicates that an italic typeface may be synthesized if needed."
        }]
    },
    "font-variant": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant",
        "SUMMARY": "The <strong>font-variant</strong> property acts as a shorthand for the longhand properties: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps\" title=\"The font-variant-caps CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use.\"><code>font-variant-caps</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric\" title=\"The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.\"><code>font-variant-numeric</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures\" title=\"The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.\"><code>font-variant-ligatures</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian\" title=\"The font-variant-east-asian CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.\"><code>font-variant-east-asian</code></a>. You can also set the CSS Level 2 (Revision 1) values of <code>font-variant</code>, (that is, <code>normal</code> or <code>small-caps</code>), by using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" title=\"The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family, or a way to set the element's font to a system font, using specific keywords.\"><code>font</code></a> shorthand.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Specifies a normal font face; each of the longhand properties has an initial value of normal. Longhand properties of <code>font-variant</code> are: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps\" title=\"The font-variant-caps CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use.\"><code>font-variant-caps</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric\" title=\"The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.\"><code>font-variant-numeric</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures\" title=\"The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.\"><code>font-variant-ligatures</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian\" title=\"The font-variant-east-asian CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.\"><code>font-variant-east-asian</code></a>."
        }, {
            "value": "<code>none</code>",
            "description": "Sets the value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures\" title=\"The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.\"><code>font-variant-ligatures</code></a> to <code>none</code> and the values of the other longhand property as <code>normal</code>, their initial value."
        }, {
            "value": "<code>&lt;common-lig-values&gt;</code>, <code>&lt;discretionary-lig-values&gt;</code>, <code>&lt;historical-lig-values&gt;</code>, <code>&lt;contextual-alt-values&gt;</code>",
            "description": "Specifies the keywords related to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures\" title=\"The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.\"><code>font-variant-ligatures</code></a> longhand property. The possible values are: <code>common-ligatures</code>, <code>no-common-ligatures</code>, <code>discretionary-ligatures</code>, <code>no-discretionary-ligatures</code>, <code>historical-ligatures</code>, <code>no-historical-ligatures</code>, <code>contextual</code>, and <code>no-contextual</code>."
        }, {
            "value": "<code>stylistic()</code>,&#xA0; <code>historical-forms</code>, <code>styleset()</code>, <code>character-variant()</code>, <code>swash()</code>, <code>ornaments()</code>, <code>annotation()</code>",
            "description": "Specifies the keywords and functions related to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a> longhand property."
        }, {
            "value": "<code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code>",
            "description": "Specifies the keywords and functions related to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps\" title=\"The font-variant-caps CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use.\"><code>font-variant-caps</code></a> longhand property."
        }, {
            "value": "<code>&lt;numeric-figure-values&gt;</code>, <code>&lt;numeric-spacing-values&gt;</code>, <code>&lt;numeric-fraction-values&gt;</code>, <code>ordinal</code>, <code>slashed-zero</code>",
            "description": "Specifies the keywords related to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric\" title=\"The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.\"><code>font-variant-numeric</code></a> longhand property. The possible values are:&#xA0; <code>lining-nums</code>, <code>oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code>, and <code>slashed-zero</code>."
        }, {
            "value": "<code>&lt;east-asian-variant-values&gt;</code>, <code>&lt;east-asian-width-values&gt;</code>, <code>ruby</code>",
            "description": "Specifies the keywords related to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian\" title=\"The font-variant-east-asian CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.\"><code>font-variant-east-asian</code></a> longhand property. The possible values are: <code>jis78</code>, <code>jis83</code>, <code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code>."
        }]
    },
    "font-variant-alternates": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates",
        "SUMMARY": "The <strong><code>font-variant-alternates</code></strong> CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values\" title=\"The @font-feature-values CSS at-rule allows authors to use a common name in font-variant-alternates for feature activated differently in OpenType. It allows to simplify the CSS when using several fonts.\"><code>@font-feature-values</code></a>.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "This keyword deactivates alternate glyphs."
        }, {
            "value": "<code>historical-forms</code>",
            "description": "This keyword enables historical forms &#x2014; glyphs that were common in the past but not today. It corresponds to the OpentType value <code>hist</code>."
        }, {
            "value": "<code><a name=\"stylistic()\"></a>stylistic()</code>",
            "description": "This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>salt</code>, like <code>salt 2</code>."
        }, {
            "value": "<code><a name=\"styleset()\"></a>styleset()</code>",
            "description": "This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>ssXY</code>, like <code>ss02</code>."
        }, {
            "value": "<code><a name=\"character-variant()\"></a>character-variant()</code>",
            "description": "This function enables set of stylistic alternatives for characters. It is similar to <code>styleset()</code>, but doesn&apos;t create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>cvXY</code>, like <code>cv02</code>."
        }, {
            "value": "<code><a name=\"swash()\"></a>swash()</code>",
            "description": "This function enables <a href=\"http://en.wikipedia.org/wiki/Swash_%28typography%29\" class=\"external\">swash</a> glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values <code>swsh</code> and <code>cswh</code>, like <code>swsh 2</code> and <code>cswh 2</code>."
        }, {
            "value": "<code><a name=\"ornaments()\"></a>ornaments()</code>",
            "description": "This function enables ornaments, like <a href=\"http://en.wikipedia.org/wiki/Fleuron_%28typography%29\" class=\"external\">fleurons</a> and other dingbat glyphs. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value <code>ornm</code> like <code>ornm 2</code>.\n <div class=\"note\"><strong>Note: </strong>in order to preserve text semantics, font designer should include ornaments that don&apos;t match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Well-formed fonts do that, but some existing fonts don&apos;t.</div>\n "
        }, {
            "value": "<code><a name=\"annotation()\"></a>annotation()</code>",
            "description": "This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>nalt</code>, like <code>nalt 2</code>."
        }]
    },
    "font-variant-caps": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps",
        "SUMMARY": "The <strong><code>font-variant-caps</code></strong> CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "This keyword leads to the deactivation of the use of such alternate glyphs."
        }, {
            "value": "<code>small-caps</code>",
            "description": "This keyword forces the use of small capitals letters for lower case characters. It corresponds to the OpenType value <code>smcp</code>; if the font doesn&apos;t support them, it synthesizes the glyphs."
        }, {
            "value": "<code>all-small-caps</code>",
            "description": "This keyword forces the use of small capital letters for lower case characters. It corresponds to the OpenType values <code>smcp</code> and <code>c2sc</code>; if the font doesn&apos;t support them, it synthesizes the glyphs."
        }, {
            "value": "<code>petite-caps</code>",
            "description": "This keyword forces the use of petite capital letters for lower case characters. It corresponds to the OpenType value <code>pcap</code>; if the font doesn&apos;t support them, small caps glyphs are used instead."
        }, {
            "value": "<code>all-petite-caps</code>",
            "description": "This keyword forces the use of petite capital letters for lower case characters. It corresponds to the OpenType values <code>pcap</code> and <code>c2pc</code>; if the font doesn&apos;t support them, small caps glyphs are used instead."
        }, {
            "value": "<code>unicase</code>",
            "description": "This keyword forces the use of small capital letters for upper case characters. It corresponds to the OpenType value <code>unic</code>; if the font doesn&apos;t support them, small caps glyphs are used for the upper case characters instead."
        }, {
            "value": "<code>titling-caps</code>",
            "description": "This keyword forces the use of special capitals for titling, for both lower and uppercase letters. Regular uppercase glyphs are usually designed to be rendered with lowercase glyphs: they tend to appear too bold when a long run of text use such glyphs. The special glyphs used here are designed not to produce this effect. This keyword corresponds to the OpenType value <code>titl</code>; if the font doesn&apos;t support it, the keyword has no visible action."
        }]
    },
    "font-variant-east-asian": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian",
        "SUMMARY": "The <strong><code>font-variant-east-asian</code></strong> CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "This keyword leads to the deactivation of the use of such alternate glyphs."
        }, {
            "value": "<code>ruby</code>",
            "description": "This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values <code>ruby</code>."
        }, {
            "value": "<em>&lt;east-asian-variant-values</em>&gt;",
            "description": "These values activates the figures defined in specific standard. Possible values are:\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <th>Keyword</th>\n    <th>Standard defining the glyphs</th>\n    <th>OpenType equivalent</th>\n   </tr>\n   <tr>\n    <td><code>jis78</code></td>\n    <td><a href=\"http://en.wikipedia.org/wiki/JIS_X_0208\" class=\"external\">JIS X 208 version 1978</a></td>\n    <td><code>jp78</code></td>\n   </tr>\n   <tr>\n    <td><code>jis83</code></td>\n    <td><a href=\"http://en.wikipedia.org/wiki/JIS_X_0208\" class=\"external\">JIS X 208 version 1983</a></td>\n    <td><code>jp83</code></td>\n   </tr>\n   <tr>\n    <td><code>jis90</code></td>\n    <td><a href=\"http://en.wikipedia.org/wiki/JIS_X_0208\" class=\"external\">JIS X 208 version 1990</a></td>\n    <td><code>jp90</code></td>\n   </tr>\n   <tr>\n    <td><code>jis04</code></td>\n    <td><a href=\"http://en.wikipedia.org/wiki/JIS_X_0208\" class=\"external\">JIS X 208 version 2004</a></td>\n    <td><code>jp04</code></td>\n   </tr>\n   <tr>\n    <td><code>simplified</code></td>\n    <td>None, use the simplified Chinese glyphs</td>\n    <td><code>smpl</code></td>\n   </tr>\n   <tr>\n    <td><code>traditional</code></td>\n    <td>None, use the traditional Chinese glyphs</td>\n    <td><code>trad</code></td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<em>&lt;<em>east-asian-width-values</em></em>&gt;",
            "description": "These values controls the sizing of figures used for East Asian characters. Two values are possible:\n <ul>\n  <li><code>proportional-width</code> activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values <code>pwid</code>.</li>\n  <li><code>full-width</code> activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values <code>fwid</code>.</li>\n </ul>\n "
        }]
    },
    "font-variant-ligatures": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures",
        "SUMMARY": "The <strong><code>font-variant-ligatures</code></strong> CSS property controls which <a title=\"ligatures: A ligature&#xA0;is a joining of two characters into one shape. For example, in French &quot;&#x153;&quot; is a ligature of &quot;oe&quot;.\" href=\"https://developer.mozilla.org/en-US/docs/Glossary/ligature\" class=\"glossaryLink\">ligatures</a> and <a title=\"The definition of that term (contextual forms) has not been written yet; please consider contributing it!\" href=\"https://developer.mozilla.org/en-US/docs/Glossary/contextual_forms\" class=\"glossaryLink\">contextual forms</a> are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "This keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. The ligatures and forms activated depend on the font, language and kind of script. This is the default value."
        }, {
            "value": "<code>none</code>",
            "description": "This keyword specifies that all ligatures and contextual forms are disabled, even common ones."
        }, {
            "value": "&lt;<em>common-lig-values&gt;</em>",
            "description": "These values control the most common ligatures, like for <code>fi</code>, <code>ffi</code>, <code>th</code> or similar. They correspond to the OpenType values <code>liga</code> and <code>clig</code>. Two values are possible:\n <ul>\n  <li><code>common-ligatures</code> activating these ligatures. Note that the keyword <code>normal</code> activates these ligatures.</li>\n  <li><code>no-common-ligatures</code> deactivating these ligatures.</li>\n </ul>\n "
        }, {
            "value": "&lt;<em>discretionary-lig-values</em>&gt;",
            "description": "These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values <code>dlig</code>. Two values are possible:\n <ul>\n  <li><code>discretionary-ligatures</code> activating these ligatures.</li>\n  <li><code>no-discretionary-ligatures</code> deactivating the ligatures. Note that the keyword <code>normal</code> usually deactivates these ligatures.</li>\n </ul>\n "
        }, {
            "value": "<em>&lt;historical-lig-values&gt;</em>",
            "description": "These values control the ligatures used historically, in old books, like the German tz digraph being displayed &#xDF;. They correspond to the OpenType values <code>hlig</code>. Two values are possible:\n <ul>\n  <li><code>historical-ligatures</code> activating these ligatures.</li>\n  <li><code>no-historical-ligatures</code> deactivating the ligatures. Note that the keyword <code>normal</code> usually deactivates these ligatures.</li>\n </ul>\n "
        }, {
            "value": "<em>&lt;contextual-alt-values&gt;</em>",
            "description": "These values control whether letters adapt to their context&#x2014;that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values <code>calt</code>. Two values are possible:\n <ul>\n  <li><code>contextual</code> specifies that the contextual alternates are to be used. Note that the keyword <code>normal</code> usually activates these ligatures too.</li>\n  <li><code>no-contextual</code> prevents their use.</li>\n </ul>\n "
        }]
    },
    "font-variant-numeric": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric",
        "SUMMARY": "The <strong><code>font-variant-numeric</code></strong> CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "This keyword leads to the deactivation of the use of such alternate glyphs."
        }, {
            "value": "<code>ordinal</code>",
            "description": "This keyword forces the use of special glyphs for the ordinal markers, like 1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup>, 4<sup>th</sup> in English or a 1<sup>a</sup> in Italian. It corresponds to the OpenType values <code>ordn</code>."
        }, {
            "value": "<code>slashed-zero</code>",
            "description": "This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values <code>zero</code>."
        }, {
            "value": "<em>&lt;numeric-figure-values</em>&gt;",
            "description": "These values control&#xA0;the figures used for numbers. Two values are possible:\n <ul>\n  <li><code>lining-nums</code> activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType values <code>lnum</code>.</li>\n  <li><code>oldstyle-nums</code> activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values <code>onum</code>.</li>\n </ul>\n "
        }, {
            "value": "<em>&lt;numeric-spacing-values</em>&gt;",
            "description": "These values controls the sizing of figures used for numbers. Two values are possible:\n <ul>\n  <li><code>proportional-nums</code> activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values <code>pnum</code>.</li>\n  <li><code>tabular-nums</code> activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values <code>tnum</code>.</li>\n </ul>\n "
        }, {
            "value": "<em>&lt;numeric-fraction-values</em>&gt;",
            "description": "These values controls the glyphs used to display fractions. Two values are possible:\n <ul>\n  <li><code>diagonal-fractions</code> activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType values <code>frac</code>.</li>\n  <li><code>stacked-fractions</code> activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType values <code>afrc</code>.</li>\n </ul>\n "
        }]
    },
    "font-variant-position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position",
        "SUMMARY": "The <strong><code>font-variant-position</code></strong> CSS property controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font, which is set unchanged. These glyphs are likely to be used in <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub\" title=\"The HTML Subscript Element (&lt;sub&gt;) defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.\"><code>&lt;sub&gt;</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup\" title=\"The HTML Superscript Element (&lt;sup&gt;) defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.\"><code>&lt;sup&gt;</code></a> elements.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "This keyword leads to the deactivation of the use of such alternate glyphs."
        }, {
            "value": "<code>sub</code>",
            "description": "This keyword forces the use of subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, the whole characters in the run is rendered using synthesized appropriate glyphs."
        }, {
            "value": "<code>super</code>",
            "description": "This keyword forces the use of superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, the whole characters in the run is rendered using synthesized appropriate glyphs."
        }]
    },
    "font-variation-settings": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings",
        "SUMMARY": "The <strong><code>font-variation-settings</code></strong> CSS property provides low-level control over OpenType or TrueType font typographic features, by specifying the four letter axis names of the features you want to vary, along with their variation values.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Text is laid out using default settings."
        }, {
            "value": "<code>&lt;string&gt; &lt;number&gt;</code>",
            "description": "When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/string\" title=\"The &lt;string&gt; CSS data type represents a string. It is formed by a Unicode characters delimited by either double (&quot;) or single (&apos;) 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.\"><code>&lt;string&gt;</code></a> of 4 ASCII characters, followed by a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> indicating the axis value."
        }]
    },
    "font-weight": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight",
        "SUMMARY": "The <strong><code>font-weight</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies the weight or boldness of the font. Some fonts are only available in <code>normal</code> and <code>bold</code>.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Normal font weight. Same as <code>400</code>."
        }, {
            "value": "<code>bold</code>",
            "description": "Bold font weight. Same as <code>700</code>."
        }, {
            "value": "<code>lighter</code>",
            "description": "One font weight lighter than the parent element (among the available weights of the font)."
        }, {
            "value": "<code>bolder</code>",
            "description": "One font weight darker than the parent element (among the available weights of the font)."
        }, {
            "value": "<code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code>",
            "description": "Numeric font weights for fonts that provide more than just normal and bold."
        }, {
            "value": "<code>100</code>",
            "description": "Thin (Hairline)"
        }, {
            "value": "<code>200</code>",
            "description": "Extra Light (Ultra Light)"
        }, {
            "value": "<code>300</code>",
            "description": "Light"
        }, {
            "value": "<code>400</code>",
            "description": "Normal"
        }, {
            "value": "<code>500</code>",
            "description": "Medium"
        }, {
            "value": "<code>600</code>",
            "description": "Semi Bold (Demi Bold)"
        }, {
            "value": "<code>700</code>",
            "description": "Bold"
        }, {
            "value": "<code>800</code>",
            "description": "Extra Bold (Ultra Bold)"
        }, {
            "value": "<code>900</code>",
            "description": "Black (Heavy)"
        }]
    },
    "grid": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid",
        "SUMMARY": "The <strong><code>grid</code></strong> CSS property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property that sets all of the explicit grid properties (<a title=\"The grid-template-rows CSS property defines the line names and track sizing functions of the grid's rows.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows\"><code>grid-template-rows</code></a>, <a title=\"The grid-template-columns CSS property defines the line names and track sizing functions of the grid's columns.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns\"><code>grid-template-columns</code></a>, and <a title=\"The grid-template-areas CSS property specifies named grid areas.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas\"><code>grid-template-areas</code></a>), all the implicit grid properties (<a title=\"The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows\"><code>grid-auto-rows</code></a>, <a title=\"The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns\"><code>grid-auto-columns</code></a>, and <a title=\"The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow\"><code>grid-auto-flow</code></a>), and the gutter properties (<a title=\"The grid-column-gap CSS property specifies the gutter between grid columns.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap\"><code>grid-column-gap</code></a> and <a title=\"The grid-row-gap CSS property specifies the gutter between grid rows.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap\"><code>grid-row-gap</code></a>) in a single declaration.",
        "VALUES": [{
            "value": "<code>&lt;&apos;grid-template&apos;&gt;</code>",
            "description": "Defines the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template\" title=\"The grid-template CSS property is a shorthand property for defining grid columns, rows and areas.\"><code>grid-template</code></a> including <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns\" title=\"The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.\"><code>grid-template-columns</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows\" title=\"The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.\"><code>grid-template-rows</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas\" title=\"The grid-template-areas CSS property specifies named grid areas.\"><code>grid-template-areas</code></a>."
        }, {
            "value": "<code>&lt;&apos;grid-template-rows&apos;&gt; / [ auto-flow &amp;&amp; dense? ] &lt;&apos;grid-auto-columns&apos;&gt;?</code>",
            "description": "Sets up an auto-flow by setting the row tracks explicitly via the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows\" title=\"The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.\"><code>grid-template-rows</code></a> property (and the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns\" title=\"The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.\"><code>grid-template-columns</code></a> property to <code>none</code>) and specifying how to auto-repeat the column tracks via <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns\" title=\"The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.\"><code>grid-auto-columns</code></a> (and setting <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows\" title=\"The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.\"><code>grid-auto-rows</code></a> to <code>auto</code>). <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow\" title=\"The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.\"><code>grid-auto-flow</code></a> is also set to <code>column</code> accordingly, with <code>dense</code> if it&#x2019;s specified.\n <p>All other <code>grid</code> sub-properties are reset to their initial values.</p>\n "
        }, {
            "value": "<code>[ auto-flow &amp;&amp; dense? ] &lt;&apos;grid-auto-rows&apos;&gt;? / &lt;&apos;grid-template-columns&apos;&gt;</code>",
            "description": "Sets up an auto-flow by setting the column tracks explicitly via the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns\" title=\"The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.\"><code>grid-template-columns</code></a> property (and the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows\" title=\"The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.\"><code>grid-template-rows</code></a> property to <code>none</code>) and specifying how to auto-repeat the row tracks via <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows\" title=\"The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.\"><code>grid-auto-rows</code></a> (and setting <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns\" title=\"The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.\"><code>grid-auto-columns</code></a> to <code>auto</code>). <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow\" title=\"The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.\"><code>grid-auto-flow</code></a> is also set to <code>row</code> accordingly, with <code>dense</code> if it&#x2019;s specified.\n <p>All other <code>grid</code> sub-properties are reset to their initial values.</p>\n "
        }]
    },
    "grid-area": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area",
        "SUMMARY": "The <strong><code>grid-area</code></strong> CSS property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start\" title=\"The grid-row-start CSS property specifies a grid item&#x2019;s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.\"><code>grid-row-start</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end\" title=\"The grid-row-end CSS property specifies a grid item&#x2019;s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.\"><code>grid-row-end</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start\" title=\"The grid-column-start CSS property specifies a grid item&#x2019;s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-start edge of its grid area.\"><code>grid-column-start</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end\" title=\"The grid-column-end CSS property specifies a grid item&#x2019;s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.\"><code>grid-column-end</code></a>, specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the property contributes nothing to the grid item&#x2019;s placement, indicating auto-placement or a default span of <code>1</code>."
        }, {
            "value": "<code>&lt;custom-ident&gt;</code>",
            "description": "If there is a named line with the name &apos;<code>&lt;custom-ident&gt;-start</code>&apos;/&apos;<code>&lt;custom-ident&gt;-end</code>&apos;, it contributes the first such line to the grid item&#x2019;s placement.\n <p class=\"note\"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-area: foo;</code> will choose the start/end edge of that named grid area (unless another line named <code>foo-start</code>/<code>foo-end</code> was explicitly specified before it).</p>\n\n <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>\n "
        }, {
            "value": "<code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code>",
            "description": "Contributes the <em>n</em>th grid line to the grid item&#x2019;s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n <p>If a name is given as a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident\" title=\"The &lt;custom-ident&gt; 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.\"><code>&lt;custom-ident&gt;</code></a>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>\n\n <p>An <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> value of <code>0</code> is invalid.</p>\n "
        }, {
            "value": "<code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code>",
            "description": "Contributes a grid span to the grid item&#x2019;s placement such that the corresponding edge of the grid item&#x2019;s grid area is <em>n</em> lines from the opposite edge.\n <p>If a name is given as a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident\" title=\"The &lt;custom-ident&gt; 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.\"><code>&lt;custom-ident&gt;</code></a>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>\n\n <p>If the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>\n "
        }]
    },
    "grid-auto-columns": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns",
        "SUMMARY": "The <strong><code>grid-auto-columns</code></strong> CSS property specifies the size of an implicitly-created grid column track.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a non-negative length."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a non-negative <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;percentage&gt;</code></a> value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like <code>auto</code>."
        }, {
            "value": "<code>&lt;flex&gt;</code>",
            "description": "Is a non-negative dimension with the unit <code>fr</code> specifying the track&#x2019;s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor.\n <p>When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</p>\n "
        }, {
            "value": "<code>max-content</code>",
            "description": "Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track."
        }, {
            "value": "<code>min-content</code>",
            "description": "Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track."
        }, {
            "value": "<code>minmax(min, max)</code>",
            "description": "Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track&#x2019;s flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint)."
        }, {
            "value": "<code>fit-content(min, max)</code>",
            "description": "Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword that is identical to maximal content if it&apos;s a maximum. As a minimum it represents the largest minimum size (as specified by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\" title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\" title=\"The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.\"><code>min-height</code></a>) of the grid items occupying the grid track."
        }]
    },
    "grid-auto-flow": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow",
        "SUMMARY": "The <code>grid-auto-flow</code> CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.",
        "VALUES": [{
            "value": "<code>row</code>",
            "description": "Is a keyword specifying that the auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither <code>row</code> nor <code>column</code> is provided, <code>row</code> is assumed."
        }, {
            "value": "<code>column</code>",
            "description": "Is a keyword specifying that the auto-placement algorithm places items by filling each column in turn, adding new columns as necessary."
        }, {
            "value": "<code>dense</code>",
            "description": "Is a keyword specifying that the auto-placement algorithm uses a &#x201C;dense&#x201D; packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.\n <p>If omitted, a &#x201C;sparse&#x201D; algorithm is used, where the placement algorithm only ever moves &#x201C;forward&#x201D; in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear &#x201C;in order&#x201D;, even if this leaves holes that could have been filled by later items.</p>\n "
        }]
    },
    "grid-auto-rows": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows",
        "SUMMARY": "The <code>grid-auto-rows</code> CSS property specifies the size of an implicitly-created grid row track.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a non-negative length."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a non-negative <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;percentage&gt;</code></a> value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like <code>auto</code>."
        }, {
            "value": "<code>&lt;flex&gt;</code>",
            "description": "Is a non-negative dimension with the unit <code>fr</code> specifying the track&#x2019;s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor.\n <p>When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</p>\n "
        }, {
            "value": "<code>max-content</code>",
            "description": "Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track."
        }, {
            "value": "<code>min-content</code>",
            "description": "Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track."
        }, {
            "value": "<code>minmax(min, max)</code>",
            "description": "Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track&#x2019;s flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint)."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword that is identical to maximal content if it&apos;s a maximum. As a minimum it represents the largest minimum size (as specified by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\" title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\" title=\"The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.\"><code>min-height</code></a>) of the grid items occupying the grid track."
        }]
    },
    "grid-column": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
        "SUMMARY": "The <code>grid-column</code> CSS property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start\" title=\"The grid-column-start CSS property specifies a grid item&#x2019;s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-start edge of its grid area.\"><code>grid-column-start</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end\" title=\"The grid-column-end CSS property specifies a grid item&#x2019;s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.\"><code>grid-column-end</code></a> specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the property contributes nothing to the grid item&#x2019;s placement, indicating auto-placement, an automatic span, or a default span of <code>1</code>."
        }, {
            "value": "<code>&lt;custom-ident&gt;</code>",
            "description": "If there is a named line with the name &apos;&lt;custom-ident&gt;-start&apos;/&apos;&lt;custom-ident&gt;-end&apos;, it contributes the first such line to the grid item&#x2019;s placement.\n <p class=\"note\"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-column: foo;</code> will choose the start/end edge of that named grid area (unless another line named <code>foo-start</code>/<code>foo-end</code> was explicitly specified before it).</p>\n\n <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>\n "
        }, {
            "value": "<code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code>",
            "description": "Contributes the nth grid line to the grid item&#x2019;s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>\n\n <p>An <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> value of <code>0</code> is invalid.</p>\n "
        }, {
            "value": "<code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code>",
            "description": "Contributes a grid span to the grid item&#x2019;s placement such that the corresponding edge of the grid item&#x2019;s grid area is n lines from the opposite edge.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>\n\n <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>\n "
        }]
    },
    "grid-column-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end",
        "SUMMARY": "The <code>grid-column-end</code> CSS property specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the property contributes nothing to the grid item&#x2019;s placement, indicating auto-placement, an automatic span, or a default span of <code>1</code>."
        }, {
            "value": "<code>&lt;custom-ident&gt;</code>",
            "description": "If there is a named line with the name &apos;&lt;custom-ident&gt;-end&apos;, it contributes the first such line to the grid item&#x2019;s placement.\n <p class=\"note\"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-column-end: foo;</code> will choose the end edge of that named grid area (unless another line named <code>foo-end</code> was explicitly specified before it).</p>\n\n <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>\n "
        }, {
            "value": "<code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code>",
            "description": "Contributes the nth grid line to the grid item&#x2019;s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>\n\n <p>An <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> value of <code>0</code> is invalid.</p>\n "
        }, {
            "value": "<code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code>",
            "description": "Contributes a grid span to the grid item&#x2019;s placement such that the column end edge of the grid item&#x2019;s grid area is n lines from the start edge.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>\n\n <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>\n\n <p>The <code>&lt;custom-ident&gt;</code> cannot take the <code>span</code> value.</p>\n "
        }]
    },
    "grid-column-gap": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap",
        "SUMMARY": "The <code>grid-column-gap</code> CSS property specifies the gutter between grid columns.",
        "VALUES": [{
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "Is the width of the gutter separating the grid columns. <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> values are relative to the dimension of the element."
        }]
    },
    "grid-column-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start",
        "SUMMARY": "The <code>grid-column-start</code> CSS property specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-start edge of its grid area.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the property contributes nothing to the grid item&#x2019;s placement, indicating auto-placement, an automatic span, or a default span of <code>1</code>."
        }, {
            "value": "<code>&lt;custom-ident&gt;</code>",
            "description": "If there is a named line with the name &apos;&lt;custom-ident&gt;-start&apos;, it contributes the first such line to the grid item&#x2019;s placement.\n <p class=\"note\"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-column-start: foo;</code> will choose the start edge of that named grid area (unless another line named <code>foo-start</code> was explicitly specified before it).</p>\n\n <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>\n "
        }, {
            "value": "<code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code>",
            "description": "Contributes the nth grid line to the grid item&#x2019;s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>\n\n <p>An <a title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\"><code>&lt;integer&gt;</code></a> value of <code>0</code> is invalid.</p>\n "
        }, {
            "value": "<code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code>",
            "description": "Contributes a grid span to the grid item&#x2019;s placement, such that the column start edge of the grid item&#x2019;s grid area is n lines from the end edge.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>\n\n <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>\n\n <p>The <code>&lt;custom-ident&gt;</code> cannot take the <code>span</code> value.</p>\n "
        }]
    },
    "grid-gap": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap",
        "SUMMARY": "The <code>grid-gap</code> CSS property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap\" title=\"The grid-row-gap CSS property specifies the gutter between grid rows.\"><code>grid-row-gap</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap\" title=\"The grid-column-gap CSS property specifies the gutter between grid columns.\"><code>grid-column-gap</code></a> specifying the gutters between grid rows and columns.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is the width of the gutter separating the grid lines."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is the width of the gutter separating the grid lines, relative to the dimension of the element."
        }]
    },
    "grid-row": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row",
        "SUMMARY": "The <code>grid-row</code> CSS property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property for <a title=\"The grid-row-start CSS property specifies a grid item&#x2019;s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start\"><code>grid-row-start</code></a> and <a title=\"The grid-row-end CSS property specifies a grid item&#x2019;s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end\"><code>grid-row-end</code></a> specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the property contributes nothing to the grid item&#x2019;s placement, indicating auto-placement, an automatic span, or a default span of <code>1</code>."
        }, {
            "value": "<code>&lt;custom-ident&gt;</code>",
            "description": "If there is a named line with the name &apos;&lt;custom-ident&gt;-start&apos;/&apos;&lt;custom-ident&gt;-end&apos;, it contributes the first such line to the grid item&#x2019;s placement.\n <p class=\"note\"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-row: foo;</code> will choose the start/end edge of that named grid area (unless another line named <code>foo-start</code>/<code>foo-end</code> was explicitly specified before it).</p>\n\n <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>\n "
        }, {
            "value": "<code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code>",
            "description": "Contributes the nth grid line to the grid item&#x2019;s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>\n\n <p>An <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> value of <code>0</code> is invalid.</p>\n "
        }, {
            "value": "<code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code>",
            "description": "Contributes a grid span to the grid item&#x2019;s placement such that the corresponding edge of the grid item&#x2019;s grid area is n lines from the opposite edge.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>\n\n <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>\n "
        }]
    },
    "grid-row-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end",
        "SUMMARY": "The <code>grid-row-end</code> CSS property specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the property contributes nothing to the grid item&#x2019;s placement, indicating auto-placement, an automatic span, or a default span of <code>1</code>."
        }, {
            "value": "<code>&lt;custom-ident&gt;</code>",
            "description": "If there is a named line with the name &apos;&lt;custom-ident&gt;-end&apos;, it contributes the first such line to the grid item&#x2019;s placement.\n <p class=\"note\"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-row-end: foo;</code> will choose the end edge of that named grid area (unless another line named <code>foo-end</code> was explicitly specified before it).</p>\n\n <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>\n\n <p>The <code>&lt;custom-ident&gt;</code> cannot take the <code>span</code> value.</p>\n "
        }, {
            "value": "<code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code>",
            "description": "Contributes the nth grid line to the grid item&#x2019;s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>\n\n <p>An <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> value of <code>0</code> is invalid.</p>\n "
        }, {
            "value": "<code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code>",
            "description": "Contributes a grid span to the grid item&#x2019;s placement such that the row end edge of the grid item&#x2019;s grid area is n lines from the start edge.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>\n\n <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>\n "
        }]
    },
    "grid-row-gap": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap",
        "SUMMARY": "The <code>grid-row-gap</code> CSS property specifies the gutter between grid rows.",
        "VALUES": [{
            "value": "<code>&lt;length-percentage&gt;</code>",
            "description": "Is the width of the gutter separating the grid rows. <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> values are relative to the dimension of the element."
        }]
    },
    "grid-row-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start",
        "SUMMARY": "The <code>grid-row-start</code> CSS property specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the property contributes nothing to the grid item&#x2019;s placement, indicating auto-placement, an automatic span, or a default span of <code>1</code>."
        }, {
            "value": "<code>&lt;custom-ident&gt;</code>",
            "description": "If there is a named line with the name &apos;&lt;custom-ident&gt;-start&apos;, it contributes the first such line to the grid item&#x2019;s placement.\n <p class=\"note\"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-row-start: foo;</code> will choose the start edge of that named grid area (unless another line named <code>foo-start</code> was explicitly specified before it).</p>\n\n <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>\n "
        }, {
            "value": "<code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code>",
            "description": "Contributes the nth grid line to the grid item&#x2019;s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>\n\n <p>An <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a> value of <code>0</code> is invalid.</p>\n "
        }, {
            "value": "<code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code>",
            "description": "Contributes a grid span to the grid item&#x2019;s placement such that the row start edge of the grid item&#x2019;s grid area is n lines from the end edge.\n <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>\n\n <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>\n\n <p>The <code>&lt;custom-ident&gt;</code> cannot take the <code>span</code> value.</p>\n "
        }]
    },
    "grid-template": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template",
        "SUMMARY": "The <code>grid-template</code> CSS property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property for defining grid columns, rows and areas.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Is a keyword that sets&#xA0;all three longhand properties to <code>none</code>, meaning there is no explicit grid. There are no named grid areas. Rows and columns will be implicitly generated; their size will be determined by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows\" title=\"The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.\"><code>grid-auto-rows</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns\" title=\"The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.\"><code>grid-auto-columns</code></a> properties."
        }, {
            "value": "<code>&lt;&apos;grid-template-rows&apos;&gt; / &lt;&apos;grid-template-columns&apos;&gt;</code>",
            "description": "Sets <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows\" title=\"The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.\"><code>grid-template-rows</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns\" title=\"The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.\"><code>grid-template-columns</code></a> to the specified values, and sets <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas\" title=\"The grid-template-areas CSS property specifies named grid areas.\"><code>grid-template-areas</code></a> to <code>none</code>."
        }, {
            "value": "<code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;explicit-track-list&gt; ]?</code>",
            "description": "Sets <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas\" title=\"The grid-template-areas CSS property specifies named grid areas.\"><code>grid-template-areas</code></a> to the strings listed, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows\" title=\"The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.\"><code>grid-template-rows</code></a> to the track sizes following each string (filling in <code>auto</code> for any missing sizes), and splicing in the named lines defined before/after each size, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns\" title=\"The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.\"><code>grid-template-columns</code></a> to the track listing specified after the slash (or <code>none</code>, if not specified).<br>\n &#xA0;\n <p class=\"note\">Note: The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/repeat()\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>repeat()</code></a> function isn&#x2019;t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the &#x201C;ASCII art&#x201D;.</p>\n "
        }]
    },
    "grid-template-areas": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas",
        "SUMMARY": "The <code>grid-template-areas</code> CSS property specifies named grid areas.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The grid container doesn&#x2019;t define any named grid areas."
        }, {
            "value": "<code>&lt;string&gt;+</code>",
            "description": "A row is created for every separate string listed, and a column is created for each cell in the string. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells&#xA0;form a rectangle, the declaration is invalid."
        }]
    },
    "grid-template-columns": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns",
        "SUMMARY": "The <code>grid-template-columns</code> CSS property defines the line names and track sizing functions of the grid's columns.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Is a keyword meaning that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the <a title=\"The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns\"><code>grid-auto-columns</code></a> property."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a non-negative length."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a non-negative <a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as <code>auto</code>.<br>\n The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage."
        }, {
            "value": "<code>&lt;flex&gt;</code>",
            "description": "Is a non-negative dimension with the unit <code>fr</code> specifying the track&#x2019;s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor.\n <p>When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</p>\n "
        }, {
            "value": "<code>max-content</code>",
            "description": "Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track."
        }, {
            "value": "<code>min-content</code>",
            "description": "Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track."
        }, {
            "value": "<code><a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/minmax\"><code>minmax(min, max)</code></a></code>",
            "description": "Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track&#x2019;s flex factor. It is invalid as a minimum."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword that is identical to maximal content if it&apos;s a maximum. As a minimum it represents the largest minimum size (as specified by <a title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\"><code>min-width</code></a>/<a title=\"The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\"><code>min-height</code></a>) of the grid items occupying the grid track."
        }, {
            "value": "\n <p class=\"note\">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the <a title=\"The CSS align-content property defines how the browser distributes space between and around content items along the main-axis of their container.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-content\"><code>align-content</code></a> and <a title=\"The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content\"><code>justify-content</code></a> properties.</p>\n ",
            "description": "<code><a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content\"><code>fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )</code></a></code>"
        }, {
            "value": "Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.",
            "description": "<a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/repeat\"><code>repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )</code></a>"
        }]
    },
    "grid-template-rows": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows",
        "SUMMARY": "The <code>grid-template-rows</code> CSS property defines the line names and track sizing functions of the grid's rows.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Is a keyword meaning that there is no explicit grid. Any rows will be implicitly generated and their size will be determined by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows\" title=\"The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.\"><code>grid-auto-rows</code></a> property."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a non-negative length."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a non-negative <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;percentage&gt;</code></a> value relative to the block size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as <code>auto</code>.<br>\n The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage."
        }, {
            "value": "<code>&lt;flex&gt;</code>",
            "description": "Is a non-negative dimension with the unit <code>fr</code> specifying the track&#x2019;s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor.\n <p>When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</p>\n "
        }, {
            "value": "<code>max-content</code>",
            "description": "Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track."
        }, {
            "value": "<code>min-content</code>",
            "description": "Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/minmax\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>minmax(min, max)</code></a>",
            "description": "Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track&#x2019;s flex factor. It is invalid as a minimum."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword that is identical to maximal content if it&apos;s a maximum. As a minimum it represents the largest minimum size (as specified by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\" title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\" title=\"The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.\"><code>min-height</code></a>) of the grid items occupying the grid track."
        }, {
            "value": "\n <p class=\"note\">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-content\" title=\"The CSS align-content property defines how the browser distributes space between and around content items along the main-axis of their container.\"><code>align-content</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content\" title=\"The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.\"><code>justify-content</code></a> properties.</p>\n ",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )</code></a>"
        }, {
            "value": "Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.",
            "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/repeat\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )</code></a>"
        }]
    },
    "height": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/height",
        "SUMMARY": "The <strong><code>height</code></strong> CSS property specifies the height of the content area of an element. The <a href=\"https://developer.mozilla.org/en-US/docs/CSS/box_model#content\">content area</a> is <em>inside</em> the padding, border, and margin of the element.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "See <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> for possible units."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Specified as a <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> of containing block&apos;s height."
        }, {
            "value": "<code>border-box&#xA0;</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "If present, the preceding <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> or <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> is applied to the element&apos;s border box."
        }, {
            "value": "<code>content-box</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "If present, the preceding <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> or <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> is applied to the element&apos;s content box."
        }, {
            "value": "<code>auto</code>",
            "description": "The browser will calculate and select a height for the specified element."
        }, {
            "value": "fill <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Use the&#xA0;<code>fill-available</code>&#xA0;inline size&#xA0;or&#xA0;<code>fill-available</code>&#xA0;block size, as appropriate to the writing mode."
        }, {
            "value": "<code>max-content</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic preferred height."
        }, {
            "value": "<code>min-content</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic minimum height."
        }, {
            "value": "<code>available</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The containing block height minus vertical margin, border and padding."
        }, {
            "value": "<code>fit-content</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The larger of:\n <ul>\n  <li>the intrinsic minimum&#xA0;height</li>\n  <li>the smaller of the intrinsic preferred height and the available height</li>\n </ul>\n "
        }]
    },
    "hyphens": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens",
        "SUMMARY": "The <strong><code>hyphens</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property tells the browser how to hyphenate words when line-wrapping. You can prevent hyphenation entirely, control when the browser should hyphenate, or let the browser control when to hyphenate.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace."
        }, {
            "value": "<code>manual</code>",
            "description": "Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See <a href=\"#Suggesting_line_break_opportunities\">Suggesting line break opportunities</a> for details."
        }, {
            "value": "<code>auto</code>",
            "description": "The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use. Suggested line break opportunities, as covered in <a href=\"#Suggesting_line_break_opportunities\">Suggesting line break opportunities</a>, should be preferred over automatically selecting break points whenever possible."
        }, {
            "value": "U+2010 (HYPHEN)",
            "description": "The &quot;hard&quot; hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered."
        }, {
            "value": "U+00AD (SHY)",
            "description": "An invisible, &quot;soft&quot; hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use <code>&amp;shy;</code> to insert a soft hyphen."
        }]
    },
    "image-orientation": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation",
        "SUMMARY": "The <strong><code>image-orientation</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property describes how to correct the default orientation of an image.",
        "VALUES": [{
            "value": "<code>from-image</code>",
            "description": "The EXIF information contained in the image will be used to rotate the image appropriately."
        }, {
            "value": "<code>&lt;angle&gt;</code>",
            "description": "The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/angle\" title=\"The &lt;angle&gt; CSS data type represents angle values. Positive angles represent right angles, negative angles represent left angles. Its syntax is a &lt;number&gt; data type immediately followed by the unit (deg, grad, rad or turn). Like for any CSS dimension, there is no space between the unit literal and the number.\"><code>&lt;angle&gt;</code></a> of rotation to apply to the image. It is rounded to the nearest <code>90deg</code> (<code>0.25turn</code>)."
        }, {
            "value": "<code>flip</code>",
            "description": "The image is flipped horizontally, that is reflected, after the rotation given by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/angle\" title=\"The &lt;angle&gt; CSS data type represents angle values. Positive angles represent right angles, negative angles represent left angles. Its syntax is a &lt;number&gt; data type immediately followed by the unit (deg, grad, rad or turn). Like for any CSS dimension, there is no space between the unit literal and the number.\"><code>&lt;angle&gt;</code></a> value. If no <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/angle\" title=\"The &lt;angle&gt; CSS data type represents angle values. Positive angles represent right angles, negative angles represent left angles. Its syntax is a &lt;number&gt; data type immediately followed by the unit (deg, grad, rad or turn). Like for any CSS dimension, there is no space between the unit literal and the number.\"><code>&lt;angle&gt;</code></a> is given, <code>0deg</code> is used."
        }]
    },
    "image-rendering": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
        "SUMMARY": "The <strong><code>image-rendering</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property provides a hint to the browser about the algorithm it should use to scale images. It applies to the element itself as well as any images supplied in other properties for the element. It has no effect on non-scaled images.",
        "VALUES": [{
            "value": "<code><strong>auto</strong></code>",
            "description": "Default value, the image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that &quot;smooth&quot; colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.&#xA0;Since version 1.9 (Firefox 3.0), Gecko uses<em> bilinear </em>resampling (high quality)."
        }, {
            "value": "<code><strong>crisp-edges</strong></code>",
            "description": "The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art."
        }, {
            "value": "<code><strong>pixelated</strong></code>",
            "description": "When scaling the image up, the &quot;nearest neighbor&quot; or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as &apos;auto&apos;."
        }]
    },
    "ime-mode": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode",
        "SUMMARY": "The <strong><code>ime-mode</code></strong> CSS property controls the state of the input method editor for text fields. According to the spec:",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "No change is made to the current input method editor state. This is the default."
        }, {
            "value": "<code>normal</code>",
            "description": "The IME state should be normal; this value can be used in a user style sheet to override the page&apos;s setting. <em>This value is not supported by Internet Explorer.</em>"
        }, {
            "value": "<code>active</code>",
            "description": "The input method editor is initially active; text entry is performed through it unless the user specifically dismisses it. <em>Not supported on Linux.</em>"
        }, {
            "value": "<code>inactive</code>",
            "description": "The input method editor is initially inactive, but the user may activate it if they wish. <em>Not supported on Linux.</em>"
        }, {
            "value": "<code>disabled</code>",
            "description": "The input method editor is disabled and may not be activated by the user."
        }]
    },
    "inherit": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/inherit",
        "SUMMARY": "The <code>inherit</code> CSS-value causes the element for which it is specified to take the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value\">computed value</a> of the property from its parent element. It is allowed on every CSS property.",
        "VALUES": []
    },
    "inheritance": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance",
        "SUMMARY": "The summary of every <a href=\"https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference\" title=\"en/CSS_Reference\">CSS property definition</a> says whether that property is inherited by default (\"Inherited: Yes\") or not inherited by default (\"Inherited: no\"). This controls what happens when no value is specified for a property on an element.",
        "VALUES": []
    },
    "initial": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/initial",
        "SUMMARY": "The <code>initial</code> CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value\">initial value</a> of the property.",
        "VALUES": []
    },
    "initial value": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value",
        "SUMMARY": "The <strong>initial value</strong> given in the summary of the definition of <a href=\"https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference\" title=\"en/CSS_Reference\">each CSS property</a> has different meaning for <a href=\"https://developer.mozilla.org/en-US/docs/CSS/inheritance\" title=\"en/CSS/inheritance\">inherited and non-inherited properties</a>.",
        "VALUES": []
    },
    "initial-letter": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter",
        "SUMMARY": "The <code>initial-letter</code> CSS property specifies styling for dropped, raised, and sunken initial letters.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "No special initial-letter effect. Text behaves as normal."
        }, {
            "value": "<code>&lt;number&gt;</code>",
            "description": "Defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed."
        }, {
            "value": "<code>&lt;integer&gt;</code>",
            "description": "Defines the number of lines the initial letter should sink when the size of it is given. Values must be greater than zero. If omitted, it duplicates the size value, floored to the nearest positive whole number."
        }]
    },
    "initial-letter-align": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter-align",
        "SUMMARY": "The <code>initial-letter-align</code> CSS property specifies the alignment of initial letters within a paragraph.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The user agent selects the value which corresponds to the language of the text. Western languages would default to alphabetic, CJK languages to ideographic, and some Indic languages to hanging."
        }, {
            "value": "<code>alphabetic</code>",
            "description": "As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline."
        }, {
            "value": "<code>hanging</code>",
            "description": "The hanging baseline of the initial letter aligns with the hanging baseline of the first line of text."
        }, {
            "value": "<code>ideographic</code>",
            "description": "The initial letter is centered in the N-line area."
        }]
    },
    "inline-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size",
        "SUMMARY": "The <strong><code>inline-size</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the horizontal or vertical size of an element's block depending on its writing mode. It corresponds to the <a title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\"><code>width</code></a> or the <a title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\"><code>height</code></a> property depending on the value defined for <a title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\"><code>writing-mode</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>inline-size</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> properties."
        }]
    },
    "isolation": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/isolation",
        "SUMMARY": "The <strong><code>isolation</code></strong> CSS property defines if the element must create a new <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/stacking_context\" class=\"glossaryLink\" title=\"stacking context: Stacking context&#xA0;refers to how&#xA0;elements on a webpage appear to sit&#xA0;on top of other elements, just as you can arrange index cards on your desk to lie side-by-side or overlap each other.\">stacking context</a>.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that a new stacking context has to be created only if one properties applied to the element requires it."
        }, {
            "value": "<code>isolate</code>",
            "description": "Is a keyword indicating that a new stacking context must be created."
        }]
    },
    "justify-content": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> <strong><code>justify-content</code></strong> property defines how the browser distributes space between and around content items along the main axis of their container.",
        "VALUES": [{
            "value": "<code>start</code>",
            "description": "The items are packed flush to each other toward the start edge of the alignment container in the main axis."
        }, {
            "value": "<code>end</code>",
            "description": "The items are packed flush to each other toward the end edge of the alignment container in the main axis."
        }, {
            "value": "<code>flex-start</code>",
            "description": "The items are packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-start side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>start</code>."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The items are packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-end side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>end</code>."
        }, {
            "value": "<code>center</code>",
            "description": "The items are packed flush to each other toward the center of the of the alignment container along the main axis."
        }, {
            "value": "<code>left</code>",
            "description": "The items are packed flush to each other toward the left edge of the alignment container. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>right</code>",
            "description": "The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>baseline<br>\n first baseline</code><br>\n <code>last baseline</code>",
            "description": "Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box&#x2019;s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>\n The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>."
        }, {
            "value": "<code>space-between</code>",
            "description": "The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge."
        }, {
            "value": "<code>space-around</code>",
            "description": "The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items."
        }, {
            "value": "<code>space-evenly</code>",
            "description": "The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same."
        }, {
            "value": "<code>stretch</code>",
            "description": "If the combined size of the items is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\" title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\"><code>max-height</code></a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\" title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\"><code>max-width</code></a> (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis."
        }, {
            "value": "<code>safe</code>",
            "description": "If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>."
        }, {
            "value": "<code>unsafe</code>",
            "description": "Regardless of the relative sizes of the item and alignment container, the given alignment value is honored."
        }]
    },
    "justify-items": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> <strong><code>justify-items</code></strong> property defines the default <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self\" title=\"The CSS justify-self property defines the way of justifying a box inside its containeralong the appropriate axis.\"><code>justify-self</code></a> for all items of the box, given them the default way of justifying each box along the appropriate axis.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The value used is the value of the <code>justiy-items</code> property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, <code>auto</code> represents <code>normal</code>."
        }, {
            "value": "<code>normal</code>",
            "description": "The effect of this keyword is dependent of the layout mode we are in:\n <ul>\n  <li>In block-level layouts, the keyword is a synonym of <code>start</code>.</li>\n  <li>In absolutely-positioned layouts, the keyword behaved like <code>start</code> on <em>replaced</em> absolutely-positioned boxes, and as <code>stretch</code> on <em>all other</em> absolutely-positioned boxes. <span style=\"display: none;\"> </span><span style=\"display: none;\">&#xA0;</span><span style=\"display: none;\"> </span></li>\n  <li>In table cell layouts, this keyword has no meaning as this property is <em>ignored</em>.</li>\n  <li>In flexbox layouts, this keyword has no meaning as this property is <em>ignored.</em></li>\n  <li>In grid layouts, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>\n </ul>\n "
        }, {
            "value": "<code>start</code>",
            "description": "The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>end</code>",
            "description": "The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>flex-start</code>",
            "description": "The item ispacked flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-start or cross-start side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>start</code>."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The item is packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-end or cross-end side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>end</code>."
        }, {
            "value": "<code>self-start</code>",
            "description": "The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis."
        }, {
            "value": "<code>self-end</code>",
            "description": "The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis."
        }, {
            "value": "<code>center</code>",
            "description": "The items are packed flush to each other toward the center of the of the alignment container."
        }, {
            "value": "<code>left</code>",
            "description": "The items are packed flush to each other toward the left edge of the alignment container. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>right</code>",
            "description": "The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>baseline<br>\n first baseline</code><br>\n <code>last baseline</code>",
            "description": "Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box&#x2019;s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>\n The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>."
        }, {
            "value": "<code>stretch</code>",
            "description": "If the combined size of the items is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\" title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\"><code>max-height</code></a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\" title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\"><code>max-width</code></a> (or equivalent functionality), so that the combined size exactly fills the alignment container."
        }, {
            "value": "<code>safe</code>",
            "description": "If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>."
        }, {
            "value": "<code>unsafe</code>",
            "description": "Regardless of the relative sizes of the item and alignment container, the given alignment value is honored."
        }, {
            "value": "<code>legacy</code>",
            "description": "Makes the value inherited by the box descendants. Note that if a descendant has a <code>justify-self: auto</code> value, the <code>legacy</code> keyword is not considered by the descend, only the <code>left</code>, <code>right</code>, or <code>center</code> value associated to it."
        }]
    },
    "justify-self": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self",
        "SUMMARY": "The <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> <strong><code>justify-self</code></strong> property defines the way of justifying a box inside its containeralong the appropriate axis.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The value used is the value of the <code>justify-items</code> property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, <code>auto</code> represents <code>normal</code>."
        }, {
            "value": "<code>normal</code>",
            "description": "The effect of this keyword is dependent of the layout mode we are in:\n <ul>\n  <li>In block-level layouts, the keyword is a synonym of <code>start</code>.</li>\n  <li>In absolutely-positioned layouts, the keyword behaves like <code>start</code> on <em>replaced</em> absolutely-positioned boxes, and as <code>stretch</code> on <em>all other</em> absolutely-positioned boxes. <span style=\"display: none;\"> </span><span style=\"display: none;\">&#xA0;</span><span style=\"display: none;\"> </span></li>\n  <li>In table cell layouts, this keyword has no meaning as this property is <em>ignored</em>.</li>\n  <li>In flexbox layouts, this keyword has no meaning as this property is <em>ignored.</em></li>\n  <li>In grid layouts, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>\n </ul>\n "
        }, {
            "value": "<code>start</code>",
            "description": "The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>end</code>",
            "description": "The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>flex-start</code>",
            "description": "The item is packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-start or cross-start side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>start</code>."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The item is packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-end or cross-end side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>end</code>."
        }, {
            "value": "<code>self-start</code>",
            "description": "The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis."
        }, {
            "value": "<code>self-end</code>",
            "description": "The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis."
        }, {
            "value": "<code>center</code>",
            "description": "The items are packed flush to each other toward the center of the of the alignment container."
        }, {
            "value": "<code>left</code>",
            "description": "The items are packed flush to each other toward the left edge of the alignment container. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>right</code>",
            "description": "The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>baseline<br>\n first baseline</code><br>\n <code>last baseline</code>",
            "description": "Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box&#x2019;s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>\n The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>."
        }, {
            "value": "<code>stretch</code>",
            "description": "If the combined size of the items is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by <a title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\"><code>max-height</code></a>/<a title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\"><code>max-width</code></a> (or equivalent functionality), so that the combined size exactly fills the alignment container."
        }, {
            "value": "<code>safe</code>",
            "description": "If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>."
        }, {
            "value": "<code>unsafe</code>",
            "description": "Regardless of the relative sizes of the item and alignment container, the given alignment value is honored."
        }]
    },
    "left": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/left",
        "SUMMARY": "The <strong><code>left</code></strong> CSS property specifies part of the position of positioned elements.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a negative, null, or positive <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> that represents:\n <ul>\n  <li>for <em>absolutely positioned elements</em>, the distance to the left edge of the containing block</li>\n  <li>for <em>relatively positioned elements</em>, the offset that the element is moved left from its position in the normal flow if it wasn&apos;t positioned.</li>\n </ul>\n "
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the containing block&apos;s width, used as described in the <a href=\"#Summary\">summary</a>."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword that represents:\n <ul>\n  <li>for absolutely positioned elements, the position of the element based on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\" title=\"The right CSS property specifies part of the position of positioned elements.\"><code>right</code></a> property and treat <code>width: auto</code> as a width based on the content.</li>\n  <li>for relatively positioned elements, the left offset of the element from its original position based on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\" title=\"The right CSS property specifies part of the position of positioned elements.\"><code>right</code></a> property, or if <code>right</code> is also <code>auto</code>, do not offset it at all.</li>\n </ul>\n "
        }]
    },
    "letter-spacing": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing",
        "SUMMARY": "The <strong><code>letter-spacing</code></strong> CSS property specifies spacing behavior between text characters.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "The spacing is the normal spacing for the current font. Unlike a value of 0, this value allows the user agent to alter the space between characters in order to justify text."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "Indicates inter-character space <strong><em>in addition to</em></strong> the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.<br>\n See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> values for possible units."
        }]
    },
    "line-break": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/line-break",
        "SUMMARY": "The <strong><code>line-break</code></strong> CSS property is used to specify how (or if) to break lines.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "break text using&#xA0; the default line break rule."
        }, {
            "value": "<code>loose</code>",
            "description": "break text using the line break rule that the line is shorter like a newspaper."
        }, {
            "value": "<code>normal</code>",
            "description": "break text using the common line break rule."
        }, {
            "value": "<code>strict</code>",
            "description": "break text using the stringent line break rule."
        }]
    },
    "line-height": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height",
        "SUMMARY": "On block level elements, the <code>line-height</code> property specifies the minimum height of line boxes within the element.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly<strong><code> 1.2</code></strong>, depending on the element&apos;s<code> font-family</code>."
        }, {
            "value": "<code>&lt;number&gt;</code>",
            "description": "The used value is this unitless <a title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\"><code>&lt;number&gt;</code></a> multiplied by the element&apos;s font size. The computed value is the same as the specified<code> &lt;number&gt;</code>. In most cases <strong>this is the preferred way</strong> to set <code>line-height</code> with no unexpected results in case of inheritance."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "The specified <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> is used in the calculation of the line box height. See <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> values for possible units."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Relative to the font size of the element itself. The computed value is this percentage multiplied by the element&apos;s computed font size.<br>\n <strong>Percentage</strong> and <strong>em</strong> values may have unexpected results, see &quot;Notes&quot; section."
        }]
    },
    "linear-gradient()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient",
        "SUMMARY": "The CSS <code>linear-gradient()</code> function creates an <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; 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.\"><code>&lt;image&gt;</code></a> which represents a linear gradient of colors. The result of this function is an object of the CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/gradient\" title=\"The &lt;gradient&gt; CSS data type denotes a CSS &lt;image&gt; made of a progressive transition between two or more colors. A CSS gradient is not a CSS &lt;color&gt; 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.\"><code>&lt;gradient&gt;</code></a> data type. Like any other gradient, a CSS linear gradient is not a CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> but an image with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image#no_intrinsic\">no intrinsic dimensions</a>; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size of the element it applies to.",
        "VALUES": [{
            "value": "<code>&lt;side-or-corner&gt;</code>",
            "description": "Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional. If omitted, it defaults to <code><span class=\"css\">to bottom</span></code>.<br>\n The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that starts from <code>to top</code> and rotate clockwisely. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box."
        }, {
            "value": "<code>&lt;angle&gt;</code>",
            "description": "An angle of direction for the gradient. The angle starts from <code>to&#xA0;top</code> and rotates clockwise. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/angle\" title=\"The &lt;angle&gt; CSS data type represents angle values. It is used, for example, in rotate and skew transforms.\"><code>&lt;angle&gt;</code></a>."
        }, {
            "value": "<code>&lt;color-stop&gt;</code>",
            "description": "This value is comprised of a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> value, followed by an optional stop position (either a percentage or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> along the gradient&apos;s axis).<br>\n Rendering of <a href=\"#Gradient_with_multiple_color_stops\">color stops in CSS gradients</a> follows the same rules as color stops in <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients\">SVG gradients</a>."
        }]
    },
    "list-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style",
        "SUMMARY": "The <strong><code>list-style</code></strong> property is a shorthand property for setting <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type\" title=\"The list-style-type property specifies the appearance of a list item element. Because it is the only property that&#xA0;defaults to display:list-item, this is usually a &lt;li&gt; element, but can be any element with this display value.\"><code>list-style-type</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image\" title=\"The list-style-image property specifies an image to be used as the list item marker.\"><code>list-style-image</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position\" title=\"The list-style-position property specifies the position of the marker box in the principal block box.\"><code>list-style-position</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;&apos;list-style-type&apos;&gt;</code>",
            "description": "See <a title=\"The list-style-type property specifies the appearance of a list item element. Because it is the only property that&#xA0;defaults to display:list-item, this is usually a &lt;li&gt; element, but can be any element with this display value.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type\"><code>list-style-type</code></a>"
        }, {
            "value": "<code>&lt;&apos;list-style-image&apos;&gt;</code>",
            "description": "See <a title=\"The list-style-image property specifies an image to be used as the list item marker.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image\"><code>list-style-image</code></a>"
        }, {
            "value": "<code>&lt;&apos;list-style-position&apos;&gt;</code>",
            "description": "See <a title=\"The list-style-position property specifies the position of the marker box in the principal block box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position\"><code>list-style-position</code></a>"
        }]
    },
    "list-style-image": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image",
        "SUMMARY": "The <strong><code>list-style-image</code></strong> property specifies an image to be used as the list item marker.",
        "VALUES": [{
            "value": "<code>&lt;uri&gt;</code>",
            "description": "Location of image to use as the marker."
        }, {
            "value": "<code>none</code>",
            "description": "Specifies that no image is used as the marker. If this value is set, the marker defined in <a title=\"The list-style-type property specifies the appearance of a list item element. Because it is the only property that&#xA0;defaults to display:list-item, this is usually a &lt;li&gt; element, but can be any element with this display value.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type\"><code>list-style-type</code></a> will be used instead."
        }]
    },
    "list-style-position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position",
        "SUMMARY": "The <strong><code>list-style-position</code></strong> property specifies the position of the marker box in the principal block box.",
        "VALUES": [{
            "value": "<code>outside</code>",
            "description": "The marker box is outside the principal block box."
        }, {
            "value": "<code>inside</code>",
            "description": "The marker box is the first inline box in the principal block box, after which the element&apos;s content flows."
        }]
    },
    "list-style-type": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type",
        "SUMMARY": "The<strong> <code>list-style-type</code></strong> property specifies the appearance of a list item element. Because it is the only property that defaults to <code>display:list-item</code>, this is usually a <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\" title=\"The HTML &lt;li&gt; element is used to represent an item in a list. It must be contained in a parent element: an ordered list (&lt;ol&gt;), an unordered list (&lt;ul&gt;), or a menu (&lt;menu&gt;). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.\"><code>&lt;li&gt;</code></a> element, but can be any element with this <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\" title=\"The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.\"><code>display</code></a> value.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/symbols()\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>symbols()</code></a>",
            "description": "Defines an anonymous style of the list."
        }, {
            "value": "<code>none</code>",
            "description": "No item marker is shown."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/string\" title=\"The &lt;string&gt; CSS data type represents a string. It is formed by a Unicode characters delimited by either double (&quot;) or single (&apos;) 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.\"><code>&lt;string&gt;</code></a>",
            "description": "The specified string will be used as the item&apos;s marker."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;custom-ident&gt;</code></a>",
            "description": "A identifier matching the value of a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule&#xA0;lets authors define&#xA0;specific counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a> or one of the predefined styles:"
        }, {
            "value": "<code>disc</code>",
            "description": "\n <ul style=\"list-style-type: disc;\">\n  <li>A filled circle (default value)</li>\n </ul>\n "
        }, {
            "value": "<code>circle</code>",
            "description": "\n <ul style=\"list-style-type: circle;\">\n  <li>A hollow circle</li>\n </ul>\n "
        }, {
            "value": "<code>square</code>",
            "description": "\n <ul style=\"list-style-type: square;\">\n  <li>A filled square</li>\n </ul>\n "
        }, {
            "value": "<code>decimal</code>",
            "description": "\n <ul style=\"list-style-type: decimal;\">\n  <li>Decimal numbers</li>\n  <li>Beginning with 1</li>\n </ul>\n "
        }, {
            "value": "<code>cjk-decimal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "\n <ul>\n  <li>Han decimal numbers</li>\n  <li>E.g. &#x4E00;, &#x4E8C;, &#x4E09;, ..., &#x4E5D;&#x516B;, &#x4E5D;&#x4E5D;, &#x4E00;&#x3007;&#x3007;</li>\n </ul>\n "
        }, {
            "value": "<code>decimal-leading-zero</code>",
            "description": "\n <ul style=\"list-style-type: decimal-leading-zero;\">\n  <li>Decimal numbers</li>\n  <li>Padded by initial zeros</li>\n  <li>E.g. 01, 02, 03, &#x2026; 98, 99</li>\n </ul>\n "
        }, {
            "value": "<code>lower-roman</code>",
            "description": "\n <ul style=\"list-style-type: lower-roman;\">\n  <li>Lowercase roman numerals</li>\n  <li>E.g. i, ii, iii, iv, v&#x2026;</li>\n </ul>\n "
        }, {
            "value": "<code>upper-roman</code>",
            "description": "\n <ul style=\"list-style-type: upper-roman;\">\n  <li>Uppercase roman numerals</li>\n  <li>E.g. I, II, III, IV, V&#x2026;</li>\n </ul>\n "
        }, {
            "value": "<code>lower-greek</code>",
            "description": "\n <ul style=\"list-style-type: lower-greek;\">\n  <li>Lowercase classical Greek</li>\n  <li>alpha, beta, gamma&#x2026;</li>\n  <li>E.g. &#x3B1;, &#x3B2;, &#x3B3;&#x2026;</li>\n </ul>\n "
        }, {
            "value": "<code>lower-alpha</code>",
            "description": "<code>lower-latin</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: lower-alpha;\">\n  <li>Lowercase ASCII letters</li>\n  <li>E.g. a, b, c, &#x2026; z</li>\n  <li><code>lower-latin</code> is unsupported in IE7 and earlier</li>\n  <li>See <a href=\"#Browser_compatibility\">Browser compatibility</a> section.</li>\n </ul>\n ",
            "description": "<code>upper-alpha</code>"
        }, {
            "value": "<code>upper-latin</code>",
            "description": "\n <ul style=\"list-style-type: upper-alpha;\">\n  <li>Uppercase ASCII letters</li>\n  <li>E.g. A, B, C, &#x2026; Z</li>\n  <li><code>upper-latin</code> is unsupported in IE7 and earlier</li>\n </ul>\n "
        }, {
            "value": "<code>arabic-indic</code>",
            "description": "<code>-moz-arabic-indic</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-arabic-indic; list-style-type: arabic-indic;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>armenian</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: armenian;\">\n  <li>Traditional Armenian numbering</li>\n  <li>(ayb/ayp, ben/pen, gim/keem&#x2026;</li>\n </ul>\n ",
            "description": "<code>bengali</code>"
        }, {
            "value": "<code>-moz-bengali</code>",
            "description": "\n <ul style=\"list-style-type: -moz-bengali; list-style-type: bengali;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>cambodian</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>*",
            "description": "\n <ul style=\"list-style-type: cambodian;\">\n  <li>Example</li>\n  <li>Is a synonym for <code>khmer</code></li>\n </ul>\n "
        }, {
            "value": "<code>cjk-earthly-branch</code>",
            "description": "<code>-moz-cjk-earthly-branch</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-cjk-earthly-branch; list-style-type: cjk-earthly-branch;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>cjk-heavenly-stem</code>"
        }, {
            "value": "<code>-moz-cjk-heavenly-stem</code>",
            "description": "\n <ul style=\"list-style-type: -moz-cjk-heavenly-stem; list-style-type: cjk-heavenly-stem;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>cjk-ideographic</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "\n <ul style=\"list-style-type: cjk-ideographic;\">\n  <li>Identical to <code>trad-chinese-informal</code></li>\n  <li>E.g. &#x4E00;&#x842C;&#x4E00;&#x5343;&#x4E00;&#x767E;&#x4E00;&#x5341;&#x4E00;</li>\n </ul>\n "
        }, {
            "value": "<code>devanagari</code>",
            "description": "<code>-moz-devanagari</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-devanagari; list-style-type: devanagari;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>ethiopic-numeric</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: ethiopic-numeric;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>georgian</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: georgian;\">\n  <li>Traditional Georgian numbering</li>\n  <li>E.g. an, ban, gan, &#x2026; he, tan, in&#x2026;</li>\n </ul>\n ",
            "description": "<code>gujarati</code>"
        }, {
            "value": "<code>-moz-gujarati</code>",
            "description": "\n <ul style=\"list-style-type: -moz-gujarati; list-style-type: gujarati;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>gurmukhi</code>",
            "description": "<code>-moz-gurmukhi</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-gurmukhi; list-style-type: gurmukhi;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>hebrew</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: hebrew;\">\n  <li>Traditional Hebrew numbering</li>\n </ul>\n ",
            "description": "<code>hiragana</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: hiragana;\">\n  <li>a, i, u, e, o, ka, ki, &#x2026;</li>\n  <li>(Japanese)</li>\n </ul>\n ",
            "description": "<code>hiragana-iroha</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: hiragana-iroha;\">\n  <li>i, ro, ha, ni, ho, he, to, &#x2026;</li>\n  <li><a href=\"https://en.wikipedia.org/wiki/Iroha\" class=\"external\" title=\"Iroha\">Iroha</a> is the old japanese ordering of syllabs.</li>\n </ul>\n ",
            "description": "<code>japanese-formal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: japanese-formal;\">\n  <li>Japanese formal numbering to be used in legal or financial document.</li>\n  <li>E.g., &#x58F1;&#x842C;&#x58F1;&#x9621;&#x58F1;&#x767E;&#x58F1;&#x62FE;&#x58F1;</li>\n  <li>The kanjis are designed so that they can&apos;t be modified to look like another correct one</li>\n </ul>\n ",
            "description": "<code>japanese-informal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: japanese-informal;\">\n  <li>Japanese informal numbering</li>\n </ul>\n ",
            "description": "<code>kannada</code>"
        }, {
            "value": "<code>-moz-kannada</code>",
            "description": "\n <ul style=\"list-style-type: -moz-kannada; list-style-type: kannada;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>katakana</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "\n <ul style=\"list-style-type: katakana;\">\n  <li>A, I, U, E, O, KA, KI, &#x2026;</li>\n  <li>(Japanese)</li>\n </ul>\n "
        }, {
            "value": "<code>katakana-iroha</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "\n <ul style=\"list-style-type: katakana-iroha;\">\n  <li>I, RO, HA, NI, HO, HE, TO, &#x2026;</li>\n  <li><a href=\"https://en.wikipedia.org/wiki/Iroha\" class=\"external\" title=\"Iroha\">Iroha</a> is the old japanese ordering of syllabs.</li>\n </ul>\n "
        }, {
            "value": "<code>khmer</code>",
            "description": "<code>-moz-khmer</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-khmer; list-style-type: khmer;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>korean-hangul-formal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: korean-hangul-formal;\">\n  <li>Korean hangul numbering.</li>\n  <li>E.g., &#xC77C;&#xB9CC; &#xC77C;&#xCC9C;&#xC77C;&#xBC31;&#xC77C;&#xC2ED;&#xC77C;</li>\n </ul>\n ",
            "description": "<code>korean-hanja-formal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: korean-hanja-formal;\">\n  <li>Formal Korean Han&#xA0;numbering.</li>\n  <li>E.g. &#x58F9;&#x842C; &#x58F9;&#x4EDF;&#x58F9;&#x767E;&#x58F9;&#x62FE;&#x58F9;</li>\n </ul>\n ",
            "description": "<code>korean-hanja-informal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: korean-hanja-informal;\">\n  <li>Korean hanja numbering.</li>\n  <li>E.g., &#x842C; &#x4E00;&#x5343;&#x767E;&#x5341;&#x4E00;</li>\n </ul>\n ",
            "description": "<code>lao</code>"
        }, {
            "value": "<code>-moz-lao</code>",
            "description": "\n <ul style=\"list-style-type: -moz-lao; list-style-type: lao;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>lower-armenian</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>*",
            "description": "\n <ul style=\"list-style-type: lower-armenian;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>malayalam</code>",
            "description": "<code>-moz-malayalam</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-malayalam; list-style-type: malayalam;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>mongolian</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: mongolian;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>myanmar</code>"
        }, {
            "value": "<code>-moz-myanmar</code>",
            "description": "\n <ul style=\"list-style-type: -moz-myanmar; list-style-type: myanmar;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>oriya</code>",
            "description": "<code>-moz-oriya</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-oriya; list-style-type: oriya;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>persian</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "<code>-moz-persian</code>",
            "description": "\n <ul style=\"list-style-type: -moz-persian; list-style-type: persian;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>simp-chinese-formal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "\n <ul style=\"list-style-type: simp-chinese-formal;\">\n  <li>Simplified Chinese formal&#xA0;numbering.</li>\n  <li>E.g. &#x58F9;&#x4E07;&#x58F9;&#x4EDF;&#x58F9;&#x4F70;&#x58F9;&#x62FE;&#x58F9;</li>\n </ul>\n "
        }, {
            "value": "<code>simp-chinese-informal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "\n <ul style=\"list-style-type: simp-chinese-informal;\">\n  <li>Simplified Chinese informal&#xA0;numbering.</li>\n  <li>E.g. &#x4E00;&#x4E07;&#x4E00;&#x5343;&#x4E00;&#x767E;&#x4E00;&#x5341;&#x4E00;</li>\n </ul>\n "
        }, {
            "value": "<code>tamil</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "<code>-moz-tamil</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-tamil; list-style-type: tamil;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>telugu</code>"
        }, {
            "value": "<code>-moz-telugu</code>",
            "description": "\n <ul style=\"list-style-type: -moz-telugu; list-style-type: telugu;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>thai</code>",
            "description": "<code>-moz-thai</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-thai; list-style-type: thai;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>tibetan</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>*"
        }, {
            "value": "\n <ul style=\"list-style-type: tibetan;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>trad-chinese-formal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: trad-chinese-formal;\">\n  <li>Traditional Chinese formal numbering.</li>\n  <li>E.g. &#x58F9;&#x842C;&#x58F9;&#x4EDF;&#x58F9;&#x4F70;&#x58F9;&#x62FE;&#x58F9;</li>\n </ul>\n ",
            "description": "<code>trad-chinese-informal</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: trad-chinese-informal;\">\n  <li>Traditional Chinese informal&#xA0;numbering.</li>\n  <li>E.g. &#x4E00;&#x842C;&#x4E00;&#x5343;&#x4E00;&#x767E;&#x4E00;&#x5341;&#x4E00;</li>\n </ul>\n ",
            "description": "<code>upper-armenian</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>*"
        }, {
            "value": "\n <ul style=\"list-style-type: upper-armenian;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>disclosure-open</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: disclosure-open;\">\n  <li>Symbol indicating that a disclosure widget such as&#xA0;<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details\" title=\"The HTML &lt;details&gt; element is used as a disclosure widget from which the user can retrieve additional information.\"><code>&lt;details&gt;</code></a> is opened.</li>\n </ul>\n ",
            "description": "<code>disclosure-closed</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>"
        }, {
            "value": "\n <ul style=\"list-style-type: disclosure-closed;\">\n  <li>Symbol indicating that a disclosure widget, like <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details\" title=\"The HTML &lt;details&gt; element is used as a disclosure widget from which the user can retrieve additional information.\"><code>&lt;details&gt;</code></a> is closed.</li>\n </ul>\n ",
            "description": "<code>-moz-ethiopic-halehame</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-ethiopic-halehame;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>-moz-ethiopic-halehame-am</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-ethiopic-halehame-am;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>ethiopic-halehame-ti-er</code>"
        }, {
            "value": "<code>-moz-ethiopic-halehame-ti-er</code>",
            "description": "\n <ul style=\"list-style-type: -moz-ethiopic-halehame-ti-er;\">\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>ethiopic-halehame-ti-et</code>",
            "description": "<code>-moz-ethiopic-halehame-ti-et</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-ethiopic-halehame-ti-et;\">\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>hangul</code>"
        }, {
            "value": "<code>-moz-hangul</code>",
            "description": "\n <ul style=\"list-style-type: -moz-hangul;\">\n  <li>Example</li>\n  <li>Example</li>\n  <li>Example</li>\n </ul>\n "
        }, {
            "value": "<code>hangul-consonant</code>",
            "description": "<code>-moz-hangul-consonant</code>"
        }, {
            "value": "\n <ul style=\"list-style-type: -moz-hangul-consonant;\">\n  <li>Example</li>\n  <li>Example</li>\n  <li>Example</li>\n </ul>\n ",
            "description": "<code>urdu</code>"
        }, {
            "value": "<code>-moz-urdu</code>",
            "description": "\n <ul style=\"list-style-type: -moz-urdu;\">\n  <li>Example</li>\n </ul>\n "
        }]
    },
    "margin": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin",
        "SUMMARY": "The <strong><code>margin</code></strong> CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a>.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Specifies a fixed width. Negative Values are allowed. See for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> possible units."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> relative to the <strong>width</strong> of the containing block. Negative values are allowed."
        }, {
            "value": "<code>auto</code>",
            "description": "<code>auto </code>is replaced by some suitable value, e.g. it can be used for centering of blocks.<br>\n <code>div { width:50%;&#xA0; margin:0 auto; }</code> centers the div container horizontally."
        }]
    },
    "margin-block-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end",
        "SUMMARY": "The <strong><code>margin-block-end</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\"><code>margin-top</code></a>, <a title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right\"><code>margin-right</code></a>, <a title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\"><code>margin-bottom</code></a>, or <a title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\"><code>margin-left</code></a> property depending on the values defined for <a title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\"><code>writing-mode</code></a>, <a title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\"><code>direction</code></a>, and <a title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>margin-block-end</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property."
        }]
    },
    "margin-block-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start",
        "SUMMARY": "The <strong><code>margin-block-start</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>margin-block-start</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property."
        }]
    },
    "margin-bottom": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom",
        "SUMMARY": "The <code>margin-bottom</code> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Specifies a fixed width. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible values."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> always relative to the <strong>width</strong> of the containing block."
        }, {
            "value": "<code>auto</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin\" title=\"The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.\"><code>margin</code></a>."
        }]
    },
    "margin-inline-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end",
        "SUMMARY": "The<strong> <code>margin-inline-end</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>margin-inline-end</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property."
        }]
    },
    "margin-inline-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start",
        "SUMMARY": "The <strong><code>margin-inline-start</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>margin-inline-start</code> property takes the same values as the <a title=\"The margin-left CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\"><code>margin-left</code></a> property."
        }]
    },
    "margin-left": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left",
        "SUMMARY": "The <strong><code>margin-left</code></strong> <a title=\"CSS\" href=\"/en/CSS\">CSS</a> property sets the margin space required on the left side of a <a title=\"https://developer.mozilla.org/en-US/docs/CSS/box_model\" href=\"https://developer.mozilla.org/en-US/docs/CSS/box_model\">box</a> associated with an element. A negative value is also allowed.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> specifying a fixed width: it can be absolute width, e.g. in <code>px</code>, or a width relative to the text size, e.g. in <code>em</code>, or relative to the viewport size, e.g. in <code>vh</code>."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> relative to the <em>width</em> of the nearest containing block."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the left margin receives a share of the remaining space, defined mainly by the current layout mode.. If there several <code>auto</code> values for <code>margin-left</code> or <code>margin-right</code>, the calculated space is evenly distributed between all the <code>auto</code> values. This table summarizes the different cases:\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <th scope=\"col\">Value of <a title=\"The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\"><code>display</code></a></th>\n    <th scope=\"col\">Value of <a title=\"The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/float\"><code>float</code></a></th>\n    <th scope=\"col\">Value of <a title=\"The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\"><code>position</code></a></th>\n    <th scope=\"col\">Computed value of <code>auto</code></th>\n    <th scope=\"col\">Comment</th>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>\n    <th><em>any</em></th>\n    <th><code>static</code> or <code>relative</code></th>\n    <td><code>0</code></td>\n    <td>Inline layout mode</td>\n   </tr>\n   <tr>\n    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>\n    <th><em>any</em></th>\n    <th><code>static</code> or <code>relative</code></th>\n    <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td>\n    <td>Block layout mode</td>\n   </tr>\n   <tr>\n    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>\n    <th><code>left</code> or <code>right</code></th>\n    <th><code>static</code> or <code>relative</code></th>\n    <td><code>0</code></td>\n    <td>Block layout mode (floating element)</td>\n   </tr>\n   <tr>\n    <th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th>\n    <th><em>any</em></th>\n    <th><em>any</em></th>\n    <td><code>0</code></td>\n    <td>Internal <code>table-*</code> elements don&apos;t have margins, use <a title=\"The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing\"><code>border-spacing</code></a> instead</td>\n   </tr>\n   <tr>\n    <th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th>\n    <th><em>any</em></th>\n    <th><em><code>fixed</code></em> or <code>absolute</code></th>\n    <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td>\n    <td>Absolutely positioned layout mode</td>\n   </tr>\n   <tr>\n    <th><code>flex</code>, <code>inline-flex</code></th>\n    <th><em>any</em></th>\n    <th><em>any</em></th>\n    <td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td>\n    <td>Flexbox layout mode</td>\n   </tr>\n  </tbody>\n </table>\n "
        }]
    },
    "margin-right": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right",
        "SUMMARY": "The <strong><code>margin-right</code></strong> <a href=\"mailto:setiawan345@rocketmail.com?subject=%5Berrkk%5D&amp;body=terrreeh\" title=\"CSS\">CSS</a> property of an element sets the margin space required on the right side of an element. A negative value is also allowed.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> specifying a fixed width: it can be absolute width, e.g. in <code>px</code>, or a width relative to the text size, e.g. in <code>em</code>, or relative to the viewport size, e.g. in <code>vh</code>."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> relative to the <em>width</em> of the nearest containing block."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword indicating that the right margin receives a share of the remaining space, defined mainly by the current layout mode.. If there several <code>auto</code> values for <code>margin-left</code> or <code>margin-right</code>, the calculated space is evenly distributed between all the <code>auto</code> values. This table summarizes the different cases:\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <th scope=\"col\">Value of <a title=\"The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\"><code>display</code></a></th>\n    <th scope=\"col\">Value of <a title=\"The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/float\"><code>float</code></a></th>\n    <th scope=\"col\">Value of <a title=\"The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\"><code>position</code></a></th>\n    <th scope=\"col\">Computed value of <code>auto</code></th>\n    <th scope=\"col\">Comment</th>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>\n    <th><em>any</em></th>\n    <th><code>static</code> or <code>relative</code></th>\n    <td><code>0</code></td>\n    <td>Inline layout mode</td>\n   </tr>\n   <tr>\n    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>\n    <th><em>any</em></th>\n    <th><code>static</code> or <code>relative</code></th>\n    <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td>\n    <td>Block layout mode</td>\n   </tr>\n   <tr>\n    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>\n    <th><code>left</code> or <code>right</code></th>\n    <th><code>static</code> or <code>relative</code></th>\n    <td><code>0</code></td>\n    <td>Block layout mode (floating element)</td>\n   </tr>\n   <tr>\n    <th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th>\n    <th><em>any</em></th>\n    <th><em>any</em></th>\n    <td><code>0</code></td>\n    <td>Internal <code>table-*</code> elements don&apos;t have margins, use <a title=\"The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing\"><code>border-spacing</code></a> instead</td>\n   </tr>\n   <tr>\n    <th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th>\n    <th><em>any</em></th>\n    <th><em><code>fixed</code></em> or <code>absolute</code></th>\n    <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td>\n    <td>Absolutely positioned layout mode</td>\n   </tr>\n   <tr>\n    <th><code>flex</code>, <code>inline-flex</code></th>\n    <th><em>any</em></th>\n    <th><em>any</em></th>\n    <td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td>\n    <td>Flexbox layout mode</td>\n   </tr>\n  </tbody>\n </table>\n "
        }]
    },
    "margin-top": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top",
        "SUMMARY": "The <strong><code>margin-top</code></strong> CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Specifies a fixed width. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible values."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> always relative to the <strong>width</strong> of the containing block."
        }, {
            "value": "<code>auto</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin\" title=\"The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.\"><code>margin</code></a>."
        }]
    },
    "marker-offset": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/marker-offset",
        "SUMMARY": "The <code>marker-offset</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property describes the distance between the nearest border edges of a marker-box and the target node.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible units."
        }, {
            "value": "<code>auto</code>",
            "description": "The browser will calculate and select an offset."
        }]
    },
    "mask": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask",
        "SUMMARY": "The <code>mask</code> property in CSS allows users to alter the visibility of an item by either partially or fully hiding it. This is accomplished by either masking or clipping the image at specific points.",
        "VALUES": [{
            "value": "<code>&lt;mask-reference&gt;</code>",
            "description": "Sets the mask image source. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image\" title=\"The mask-image CSS property sets the image that is used as mask layer for an element.\"><code>mask-image</code></a>."
        }, {
            "value": "<code>&lt;masking-mode&gt;</code>",
            "description": "Sets the masking mode of the mask image. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode\" title=\"The mask-mode CSS property indicates whether the mask reference defined by mask-image is treated as a luminance or alpha mask.\"><code>mask-mode</code></a>."
        }, {
            "value": "<code>&lt;position&gt;</code>",
            "description": "Sets the position of the mask image. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position\" title=\"The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.\"><code>mask-position</code></a>."
        }, {
            "value": "<code>&lt;bg-size&gt;</code>",
            "description": "Sets the size of the mask image. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size\" title=\"The mask-size CSS property specifies the sizes of the mask images. The size of the image can be fully or partially constrained&#xA0;in order to preserve its intrinsic ratio.\"><code>mask-size</code></a>."
        }, {
            "value": "<code>&lt;repeat-style&gt;</code>",
            "description": "Sets the repetition of the mask image. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat\" title=\"The mask-repeat CSS property defines how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.\"><code>mask-repeat</code></a>."
        }, {
            "value": "<code>&lt;geometry-box&gt;</code>",
            "description": "If only one &lt;geometry-box&gt; value is given, it sets both <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin\" title=\"The mask-origin CSS property determines the origin of a mask.\"><code>mask-origin</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip\" title=\"The mask-clip CSS property determines the area, which is affected by a mask. The painted content of an element must be restricted to this area.\"><code>mask-clip</code></a>. If two &lt;geometry-box&gt; values are present, then the first sets <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin\" title=\"The mask-origin CSS property determines the origin of a mask.\"><code>mask-origin</code></a> and the second <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip\" title=\"The mask-clip CSS property determines the area, which is affected by a mask. The painted content of an element must be restricted to this area.\"><code>mask-clip</code></a>."
        }, {
            "value": "<code>&lt;geometry-box&gt; | no-clip</code>",
            "description": "Sets the area, which is affected by the mask image. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip\" title=\"The mask-clip CSS property determines the area, which is affected by a mask. The painted content of an element must be restricted to this area.\"><code>mask-clip</code></a>."
        }, {
            "value": "<code>&lt;compositing-operator&gt;</code>",
            "description": "Sets the compositing operation used on the current mask layer. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite\" title=\"The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.\"><code>mask-composite</code></a>."
        }]
    },
    "mask-clip": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip",
        "SUMMARY": "The <strong><code>mask-clip</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property determines the area, which is affected by a mask. The painted content of an element must be restricted to this area.",
        "VALUES": [{
            "value": "<code>content-box</code>",
            "description": "The painted content is clipped to the content box."
        }, {
            "value": "<code>padding-box</code>",
            "description": "The painted content is clipped to the padding box."
        }, {
            "value": "<code>border-box</code>",
            "description": "The painted content is clipped to the border box."
        }, {
            "value": "<code>margin-box</code>",
            "description": "The painted content is clipped to the margin box."
        }, {
            "value": "<code>fill-box</code>",
            "description": "The painted content is clipped to the object bounding box."
        }, {
            "value": "<code>stroke-box</code>",
            "description": "The painted content is clipped to the stroke bounding box."
        }, {
            "value": "<code>view-box</code>",
            "description": "Uses the nearest SVG viewport as reference box. If a <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox\">viewBox</a></code> attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute."
        }, {
            "value": "<code>no-clip</code>",
            "description": "The painted content is not clipped."
        }, {
            "value": "<code>border</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "This keyword behaves the same as <code>border-box</code>."
        }, {
            "value": "<code>padding</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "This keyword behaves the same as <code>padding-box</code>."
        }, {
            "value": "<code>content</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "This keyword behaves the same as <code>content-box</code>."
        }, {
            "value": "<code>text</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "This keyword clips the mask image to the text of the element."
        }]
    },
    "mask-composite": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite",
        "SUMMARY": "The <strong><code>mask-composite</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property represents a compositing operation used on the current mask layer with the mask layers below it.",
        "VALUES": [{
            "value": "<code>add</code>",
            "description": "The source is placed over the destination."
        }, {
            "value": "<code>subtract</code>",
            "description": "The source is placed, where it falls outside of the destination."
        }, {
            "value": "<code>intersect</code>",
            "description": "The parts of source that overlap the destination, replace the destination."
        }, {
            "value": "<code>exclude</code>",
            "description": "The non-overlapping regions of source and destination are combined."
        }]
    },
    "mask-image": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image",
        "SUMMARY": "The <strong><code>mask-image</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property sets the image that is used as mask layer for an element.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "This keyword is interpreted as a transparent black image layer."
        }, {
            "value": "<code>&lt;mask-source&gt;</code>",
            "description": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/url\" title=\"The &lt;url&gt; CSS data type denotes a pointer to a resource. It has no proper syntax and can only be expressed through the url() functional notation.\"><code>&lt;url&gt;</code></a> reference to a <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask\" title=\"In SVG, you can specify that any other graphics object or &lt;g&gt; element can be used as an alpha mask for compositing the current object into the background. A mask is defined with the &lt;mask&gt; element. A mask is used/referenced using the mask property.\"><code>&lt;mask&gt;</code></a> or to a CSS image."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; 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.\"><code>&lt;image&gt;</code></a>",
            "description": "An image value used as mask image layer."
        }]
    },
    "mask-mode": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode",
        "SUMMARY": "The <strong><code>mask-mode</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property indicates whether the mask reference defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image\" title=\"The mask-image CSS property sets the image that is used as mask layer for an element.\"><code>mask-image</code></a> is treated as a luminance or alpha mask.",
        "VALUES": [{
            "value": "<code>alpha</code>",
            "description": "This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values."
        }, {
            "value": "<code>luminance</code>",
            "description": "This keyword indicates that the luminance values of the mask layer image should be used as the mask values."
        }, {
            "value": "<code>match-source</code>",
            "description": "\n <p>If the <a title=\"The mask-image CSS property sets the image that is used as mask layer for an element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image\"><code>mask-image</code></a> property is of type &lt;mask-source&gt;, the luminance values of the mask layer image should be used as the mask values.</p>\n\n <p>If it is of type <a title=\"The &lt;image&gt; 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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\"><code>&lt;image&gt;</code></a>, the alpha values of the mask layer image should be used as the mask values.</p>\n "
        }]
    },
    "mask-origin": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin",
        "SUMMARY": "The <strong><code>mask-origin</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property determines the origin of a mask.",
        "VALUES": [{
            "value": "<code>content-box</code>",
            "description": "The position is relative to the content box."
        }, {
            "value": "<code>padding-box</code>",
            "description": "The position is relative to the padding box. For single boxes <code>0 0</code> is the upper left corner of the padding edge, <code>100% 100%</code> is the lower right corner."
        }, {
            "value": "<code>border-box</code>",
            "description": "The position is relative to the border box."
        }, {
            "value": "<code>margin-box</code>",
            "description": "The position is relative to the margin box."
        }, {
            "value": "<code>fill-box</code>",
            "description": "The position is relative to the object bounding box."
        }, {
            "value": "<code>stroke-box</code>",
            "description": "The position is relative to the stroke bounding box."
        }, {
            "value": "<code>view-box</code>",
            "description": "Uses the nearest SVG viewport as reference box. If a <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox\">viewBox</a></code> attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute."
        }, {
            "value": "<code>content</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Same as <code>content-box</code>."
        }, {
            "value": "<code>padding</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Same as <code>padding-box</code>."
        }, {
            "value": "<code>border</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Same as <code>border-box</code>."
        }]
    },
    "mask-position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position",
        "SUMMARY": "The <strong><code>mask-position</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property sets the initial position, relative to the mask position layer defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin\" title=\"The mask-origin CSS property determines the origin of a mask.\"><code>mask-origin</code></a> for each defined mask image.",
        "VALUES": [{
            "value": "<code>&lt;position&gt;</code>",
            "description": "Is a <a title=\"The &lt;position&gt; CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position_value\"><code>&lt;position&gt;</code></a>, that is one to four values representing a 2D position regarding the edges of the element&apos;s box. Relative or absolute offsets can be given. Note that the position can be set outside of the element&apos;s box."
        }]
    },
    "mask-repeat": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat",
        "SUMMARY": "The <strong><code>mask-repeat</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.",
        "VALUES": [{
            "value": "<code>&lt;repeat-style&gt;</code>",
            "description": "The one-value syntax is a shorthand for the full two-value syntax:"
        }, {
            "value": "\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td><strong>Single value</strong></td>\n    <td><strong>Two-value equivalent</strong></td>\n   </tr>\n   <tr>\n    <td><code>repeat-x</code></td>\n    <td><code>repeat no-repeat</code></td>\n   </tr>\n   <tr>\n    <td><code>repeat-y</code></td>\n    <td><code>no-repeat repeat</code></td>\n   </tr>\n   <tr>\n    <td><code>repeat</code></td>\n    <td><code>repeat repeat</code></td>\n   </tr>\n   <tr>\n    <td><code>space</code></td>\n    <td><code>space space</code></td>\n   </tr>\n   <tr>\n    <td><code>round</code></td>\n    <td><code>round round</code></td>\n   </tr>\n   <tr>\n    <td><code>no-repeat</code></td>\n    <td><code>no-repeat no-repeat</code></td>\n   </tr>\n  </tbody>\n </table>\n In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior. Here is an explanation of how each option works for either direction:",
            "description": "\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <td><code>repeat</code></td>\n    <td>The image is repeated as much as needed to cover the whole mask painting area. The last image will be clipped if it doesn&apos;t fit.</td>\n   </tr>\n   <tr>\n    <td><code>space</code></td>\n    <td>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 <a title=\"The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position\"><code>mask-position</code></a> property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using <code>space</code> is when there isn&apos;t enough room to display one image.</td>\n   </tr>\n   <tr>\n    <td><code>round</code></td>\n    <td>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.</td>\n   </tr>\n   <tr>\n    <td><code>no-repeat</code></td>\n    <td>The image is not repeated (and hence the mask painting area will not necessarily be entirely covered). The position of the non-repeated mask image is defined by the <a title=\"The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position\"><code>mask-position</code></a> CSS property.</td>\n   </tr>\n  </tbody>\n </table>\n "
        }]
    },
    "mask-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size",
        "SUMMARY": "The <strong><code>mask-size</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "A <code><a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a></code> value&#xA0;scales the mask image to the specified length in the corresponding dimension. Negative lengths are not allowed."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of <a title=\"The mask-origin CSS property determines the origin of a mask.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin\"><code>mask-origin</code></a>. The mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding&#xA0;and content. Negative percentages are not allowed."
        }, {
            "value": "<code>auto</code>",
            "description": "A keyword that scales the mask image in the corresponding directions in order to maintain&#xA0;its intrinsic proportion."
        }, {
            "value": "<code>contain</code>",
            "description": "A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn&apos;t get squished). The image is <strong>letterboxed</strong> within the container. The image is automatically centered unless over-ridden by another property such as <a title=\"The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position\"><code>mask-position</code></a>."
        }, {
            "value": "<code>cover</code>",
            "description": "A keyword that is the inverse of <code>contain</code>. Scales the image as large as possible and maintains image aspect ratio (image doesn&apos;t get squished). The image &quot;covers&quot; the entire width or height of the container. When the image and container have different dimensions, <em>the image is clipped</em> either on left/right or &#xA0;at&#xA0;top/bottom."
        }, {
            "value": "If both components of <code>mask-size</code> are specified and are not <code>auto</code>:",
            "description": "The mask image renders at the specified size."
        }, {
            "value": "If the <code>mask-size</code> is <code>contain</code> or <code>cover</code>:",
            "description": "The image is rendered by&#xA0;preserving its intrinsic proportion&#xA0;at the largest size contained within&#xA0;or covering&#xA0;the mask positioning area. If the image has no intrinsic proportion, then it is rendered at the size of the mask positioning area."
        }, {
            "value": "If the <code>mask-size</code> is <code>auto</code> or <code>auto auto</code>:",
            "description": "If the image has both intrinsic dimensions, it is rendered at that size. If it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the mask positioning area. If it has no dimensions but has a proportion, it&apos;s rendered as if <code>contain</code> had been specified instead. If the image has one intrinsic dimension and a proportion, it&apos;s rendered at the size determined by that one dimension and the proportion. If the image has one intrinsic dimension but no proportion, it&apos;s rendered using the intrinsic dimension and the corresponding dimension of the mask positioning area."
        }, {
            "value": "If <code>mask-size</code> has one <code>auto</code> component and one non-<code>auto</code> component:",
            "description": "If the image has an intrinsic proportion, then render it using the specified dimension&#xA0;and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image&apos;s corresponding intrinsic dimension if there is one.&#xA0; If there is no such intrinsic dimension, use the corresponding dimension of the mask positioning area."
        }]
    },
    "mask-type": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type",
        "SUMMARY": "The CSS <strong><code>mask-type</code></strong> properties defines if a mask is used as a <em>luminance</em> or an <em>alpha</em> mask.",
        "VALUES": [{
            "value": "<code>luminance</code>",
            "description": "Is a keyword indicating that the associated mask image is a luminance mask, that is that its <a href=\"https://en.wikipedia.org/wiki/Luminance_%28relative%29\" class=\"external\">relative luminance</a> values must be used when applying it."
        }, {
            "value": "<code>alpha</code>",
            "description": "Is a keyword indicating that the associated mask image is an alpha mask, that is that its <a href=\"https://en.wikipedia.org/wiki/Alpha_compositing\" class=\"external\">alpha channel</a> values must be used when applying it."
        }]
    },
    "max-block-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size",
        "SUMMARY": "The<strong> <code>max-block-size</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical maximal size of an element's block depending on its writing mode. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\" title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\"><code>max-width</code></a> or the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\" title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\"><code>max-height</code></a> property, depending on the value defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>. If the writing mode is vertically oriented, the value of <code>max-block-size</code> relates to the maximal width of the element, otherwise it relates to the maximal height of the element. It relates to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size\" title=\"The max-inline-size CSS property defines the horizontal or vertical maximal size of an element's block depending on its writing mode. It corresponds to the max-width or the max-height property depending on the value defined for writing-mode. If the writing mode is vertically oriented, the value of max-inline-size relates to the maximal height of the element, otherwise it relates to the maximal width of the element. It relates to max-block-size, which defines the other dimension of the element.\"><code>max-inline-size</code></a>, which defines the other dimension of the element.",
        "VALUES": [{
            "value": "",
            "description": "The <code>max-block-size</code> property takes the same values as the <a title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\"><code>max-width</code></a> and <a title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\"><code>max-height</code></a> properties."
        }]
    },
    "max-height": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/max-height",
        "SUMMARY": "The <strong><code>max-height</code></strong> property is used to set the maximum height of an element. It prevents the used value of the <a title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\"><code>height</code></a> property from becoming larger than the value specified for <code>max-height</code>.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "A fixed maximum height. See <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> for possible units."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "The <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as <code>zero</code>."
        }, {
            "value": "<code>none</code>",
            "description": "No limit on the height of the box."
        }, {
            "value": "<code>max-content</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic preferred height."
        }, {
            "value": "<code>min-content</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic minimum height."
        }, {
            "value": "<code>fill-available</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The containing block height minus vertical margin, border and padding. Some browsers implement an ancient name for this keyword, <code>available</code>."
        }, {
            "value": "<code>fit-content</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The same as <code>max-content.</code>"
        }]
    },
    "max-inline-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size",
        "SUMMARY": "The <strong><code>max-inline-size</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the horizontal or vertical maximal size of an element's block depending on its writing mode. It corresponds to the <a title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\"><code>max-width</code></a> or the <a title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\"><code>max-height</code></a> property depending on the value defined for <a title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\"><code>writing-mode</code></a>. If the writing mode is vertically oriented, the value of <code>max-inline-size</code> relates to the maximal height of the element, otherwise it relates to the maximal width of the element. It relates to <a title=\"The max-block-size CSS property defines the horizontal or vertical maximal size of an element's block depending on its writing mode. It corresponds to the max-width or the max-height property, depending on the value defined for writing-mode. If the writing mode is vertically oriented, the value of max-block-size relates to the maximal width of the element, otherwise it relates to the maximal height of the element. It relates to max-inline-size, which defines the other dimension of the element.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size\"><code>max-block-size</code></a>, which defines the other dimension of the element.",
        "VALUES": [{
            "value": "",
            "description": "The <code>max-inline-size</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\" title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\"><code>max-width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\" title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\"><code>max-height</code></a> properties."
        }]
    },
    "max-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/max-width",
        "SUMMARY": "The <strong><code>max-width</code></strong> property is used to set the maximum width of a given element. It prevents the used value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> property from becoming larger than the value specified for <code>max-width</code>.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The width has no maximum value."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible units."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Specified as a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of containing block&apos;s width."
        }, {
            "value": "<code>max-content</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic preferred width."
        }, {
            "value": "<code>min-content</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic minimum width."
        }, {
            "value": "<code>fill-available</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The containing block width minus horizontal margin, border, and padding. Some browsers implement an ancient name for this keyword, <code>available</code>."
        }, {
            "value": "<code>fit-content</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The same as <code>max-content.</code>"
        }]
    },
    "min-block-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size",
        "SUMMARY": "The<strong> <code>min-block-size</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical minimal size of an element's block depending on its writing mode. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\" title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a> or the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\" title=\"Technical review completed.\"><code>min-height</code></a> property, depending on the value defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>. If the writing mode is vertically oriented, the value of <code>min-block-size</code> relates to the minimal width of the element, otherwise it relates to the minimal height of the element. It relates to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size\" title=\"The min-inline-size CSS property defines the horizontal or vertical minimal size of an element's block depending on its writing mode. It corresponds to the min-width or the min-height property, depending on the value defined for writing-mode. If the writing mode is vertically oriented, the value of min-inline-size relates to the minimal height of the element, otherwise it relates to the minimal width of the element. It relates to min-block-size, which defines the other dimension of the element.\"><code>min-inline-size</code></a>, which defines the other dimension of the element.",
        "VALUES": [{
            "value": "",
            "description": "The <code>min-block-size</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\" title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\" title=\"Technical review completed.\"><code>min-height</code></a> properties."
        }]
    },
    "min-height": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/min-height",
        "SUMMARY": "The<strong> <code>min-height</code></strong> property is used to set the minimum height of a given element. It prevents the used value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> property from becoming smaller than the value specified for <code>min-height</code>.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "The fixed minimum height. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible units. Negative values make the declaration invalid."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "The fixed minimum height expressed as a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of containing block&apos;s height. Negative values make the declaration invalid."
        }, {
            "value": "<code>auto</code>",
            "description": "The default minimum size for flex items, providing a more reasonable default than 0 for other layouts."
        }, {
            "value": "<code>max-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic preferred height."
        }, {
            "value": "<code>min-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic minimum height."
        }, {
            "value": "<code>fill-available</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The containing block height minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, <code>available</code>."
        }, {
            "value": "<code>fit-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "According CSS3 Box, this is a synonym of <code>min-content.</code> CSS3 Sizing defines a more complex algorithm, but no browser implements it, even in an experimental way."
        }]
    },
    "min-inline-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size",
        "SUMMARY": "The <strong><code>min-inline-size</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical minimal size of an element's block depending on its writing mode. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\" title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a> or the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\" title=\"Technical review completed.\"><code>min-height</code></a> property, depending on the value defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>. If the writing mode is vertically oriented, the value of <code>min-inline-size</code> relates to the minimal height of the element, otherwise it relates to the minimal width of the element. It relates to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size\" title=\"The min-block-size CSS property defines the horizontal or vertical minimal size of an element's block depending on its writing mode. It corresponds to the min-width or the min-height property, depending on the value defined for writing-mode. If the writing mode is vertically oriented, the value of min-block-size relates to the minimal width of the element, otherwise it relates to the minimal height of the element. It relates to min-inline-size, which defines the other dimension of the element.\"><code>min-block-size</code></a>, which defines the other dimension of the element.",
        "VALUES": [{
            "value": "",
            "description": "The <code>min-inline-size</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\" title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\" title=\"Technical review completed.\"><code>min-height</code></a> properties."
        }]
    },
    "min-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/min-width",
        "SUMMARY": "The <strong><code>min-width</code></strong> property is used to set the minimum width of a given element. It prevents the used value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> property from becoming smaller than the value specified for <code>min-width</code>.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "The fixed minimum width. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible units. Negative values make the declaration invalid."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "The fixed minimum width expressed as a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of containing block&apos;s width. Negative values make the declaration invalid."
        }, {
            "value": "<code>auto</code>",
            "description": "The default minimum size for flex items, providing a more reasonable default than 0 for other layouts."
        }, {
            "value": "<code>max-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic preferred width."
        }, {
            "value": "<code>min-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic minimum width."
        }, {
            "value": "<code>fill-available</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The containing block width minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, <code>available</code>."
        }, {
            "value": "<code>fit-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Defined as <code>min(max-content, max(min-content, fill-available)</code>."
        }]
    },
    "minmax()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/minmax",
        "SUMMARY": "The <code><strong>minmax</strong></code><strong><code>()</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> function defines a size range greater than or equal to <var>min</var> and less than or equal to <var>max</var>. If <var>max</var> &lt; <var>min</var>, then <var>max</var> is ignored and <code>minmax(min,max)</code> is treated as <var>min</var>. As a maximum, a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex\" title=\"The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.\"><code>&lt;flex&gt;</code></a> value sets the flex factor of a grid track; it is invalid as a minimum.",
        "VALUES": [{
            "value": "&lt;length&gt;",
            "description": "A non-negative length."
        }, {
            "value": "&lt;percentage&gt;",
            "description": "A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <code>&lt;percentage&gt;</code> must be treated as <code>auto</code>. The UA may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage."
        }, {
            "value": "&lt;flex&gt;",
            "description": "A non-negative dimension with the unit <code>fr</code> specifying the track&#x2019;s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor."
        }, {
            "value": "max-content",
            "description": "Represents the largest max-content contribution of the grid items occupying the grid track."
        }, {
            "value": "min-content",
            "description": "Represents the largest min-content contribution of the grid items occupying the grid track."
        }, {
            "value": "auto",
            "description": "As a maximum, identical to <code>max-content</code>. As a minimum it represents the largest minimum size (as specified by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\" title=\"The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\" title=\"The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.\"><code>min-height</code></a>) of the grid items occupying the grid track."
        }]
    },
    "mix-blend-mode": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode",
        "SUMMARY": "The <strong><code>mix-blend-mode</code></strong> CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.",
        "VALUES": [{
            "value": "<code>&lt;blend-mode&gt;</code>",
            "description": "Is a <a title=\"The &lt;blend-mode&gt;&#xA0;type is a collection of keywords describing blend modes.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode\"><code>&lt;blend-mode&gt;</code></a> denoting the blending mode that should be applied. There can be several values, separated by commas."
        }]
    },
    "object-fit": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",
        "SUMMARY": "The <strong><code>object-fit</code></strong> CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.",
        "VALUES": [{
            "value": "<code>fill</code>",
            "description": "The replaced content is sized to fill the element&#x2019;s content box: the object&#x2019;s concrete object size is the element&#x2019;s used width and height."
        }, {
            "value": "<code>contain</code>",
            "description": "The replaced content is sized to maintain its aspect ratio while fitting within the element&#x2019;s content box: its concrete object size is resolved as a contain constraint against the element&#x2019;s used width and height."
        }, {
            "value": "<code>cover</code>",
            "description": "The replaced content is sized to maintain its aspect ratio while filling the element&#x2019;s entire content box: its concrete object size is resolved as a cover constraint against the element&#x2019;s used width and height."
        }, {
            "value": "<code>none</code>",
            "description": "The replaced content is not resized to fit inside the element&#x2019;s content box: the object&#x2019;s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element&#x2019;s used width and height."
        }, {
            "value": "<code>scale-down</code>",
            "description": "The content is sized as if <code>none</code> or <code>contain</code> were specified, whichever would result in a smaller concrete object size."
        }]
    },
    "object-position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/object-position",
        "SUMMARY": "The <strong><code>object-position</code></strong> property determines the alignment of the replaced element inside its box.",
        "VALUES": [{
            "value": "<code>&lt;position&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position_value\" title=\"The &lt;position&gt; CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.\"><code>&lt;position&gt;</code></a>, that is one to four values representing a 2D position regarding the edges of the element&apos;s box. Relative or absolute offsets can be given. Note that the position can be set outside of the element&apos;s box."
        }]
    },
    "offset": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/offset",
        "SUMMARY": "The <strong><code>offset</code></strong> CSS property is a shorthand property for animating an element along a defined path.",
        "VALUES": []
    },
    "offset-block-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-block-end",
        "SUMMARY": "The<strong> <code>offset-block-end</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the logical block end offset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\"><code>top</code></a>, <a title=\"Technical review completed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\"><code>right</code></a>, <a title=\"The bottom CSS property participates in specifying the position of positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\"><code>bottom</code></a>, or <a title=\"The left CSS property specifies part of the position of positioned elements.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\"><code>left</code></a> property depending on the values defined for <a title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\"><code>writing-mode</code></a>, <a title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\"><code>direction</code></a>, and <a title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>offset-block-end</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property."
        }]
    },
    "offset-block-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-block-start",
        "SUMMARY": "The <strong><code>offset-block-start</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical block start offset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\" title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\"><code>top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\" title=\"Technical review completed.\"><code>right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>offset-block-start</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property."
        }]
    },
    "offset-distance": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance",
        "SUMMARY": "The <strong><code>offset-distance</code></strong> CSS property specifies a position along an <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path\" title=\"The offset-path CSS property specifies the&#xA0;offset path where the element gets positioned. The exact element&#x2019;s position on the offset path is determined by the offset-distance property. An offset&#xA0;path&#xA0;is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. Each shape or path must define an&#xA0;initial position&#xA0;for the computed value of &quot;0&quot; for offset-distance and an&#xA0;initial direction&#xA0;which specifies the rotation of the object to the initial position.\"><code>offset-path</code></a>.",
        "VALUES": []
    },
    "offset-inline-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-inline-end",
        "SUMMARY": "The <strong><code>offset-inline-end</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline end offset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\" title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\"><code>top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\" title=\"Technical review completed.\"><code>right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>offset-inline-end</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property."
        }]
    },
    "offset-inline-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-inline-start",
        "SUMMARY": "The <strong><code>offset-inline-start</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline start offset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\" title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\"><code>top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\" title=\"Technical review completed.\"><code>right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>offset-inline-start</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property."
        }]
    },
    "offset-path": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path",
        "SUMMARY": "The <strong><code>offset-path</code></strong> CSS property specifies the offset path where the element gets positioned. The exact element’s position on the offset path is determined by the <a title=\"The&#xA0;offset-distance CSS property specifies a position along an offset-path.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance\"><code>offset-distance</code></a> property. An offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. Each shape or path must define an initial position for the computed value of \"0\" for <a title=\"The&#xA0;offset-distance CSS property specifies a position along an offset-path.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance\"><code>offset-distance</code></a> and an initial direction which specifies the rotation of the object to the initial position.",
        "VALUES": []
    },
    "offset-rotate": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/offset-rotate",
        "SUMMARY": "The <strong><code>offset-rotate</code></strong> CSS property defines the direction of the element while positioning along the offset path.",
        "VALUES": []
    },
    "opacity": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/opacity",
        "SUMMARY": "The <strong><code>opacity</code></strong> CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.",
        "VALUES": [{
            "value": "<code>&lt;number&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> in the range <code>0.0</code> to <code>1.0</code>, both included, representing the opacity of the channel, that is the value of its alpha channel. Any value outside the interval, though valid, is clamped to the nearest limit in the range.\n <table class=\"standard-table\">\n  <tbody>\n   <tr>\n    <th>Value</th>\n    <th>Meaning</th>\n   </tr>\n   <tr>\n    <td><code>0</code></td>\n    <td>The element is fully transparent (that is, invisible).</td>\n   </tr>\n   <tr>\n    <td>Any <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\" title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\"><code>&lt;number&gt;</code></a> strictly between <code>0</code> and <code>1</code></td>\n    <td>The element is translucent (that is, background can be seen).</td>\n   </tr>\n   <tr>\n    <td><code>1</code></td>\n    <td>The element is fully opaque (solid).</td>\n   </tr>\n  </tbody>\n </table>\n "
        }]
    },
    "order": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/order",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <strong><code>order</code></strong> property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the <code>order</code> value. Elements with the same <code>order</code> value are laid out in the order in which they appear in the source code.",
        "VALUES": [{
            "value": "<code>&lt;integer&gt;</code>",
            "description": "Represents the ordinal group the flex item has been assigned."
        }]
    },
    "orphans": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/orphans",
        "SUMMARY": "The <strong><code>orphans</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property refers to the <em>minimum</em> number of lines in a block container that must be left at the bottom of the page. This property is normally used to control how page breaks occur.",
        "VALUES": [{
            "value": "<code>&lt;integer&gt;</code>",
            "description": "Only positive values are allowed."
        }, {
            "value": "<code>inherit</code>",
            "description": "Takes the same specified value as the property for the element&apos;s parent."
        }]
    },
    "outline": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> <strong><code>outline</code></strong> property is a shorthand property for setting one or more of the individual outline properties <a title=\"The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style\"><code>outline-style</code></a>, <a title=\"The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width\"><code>outline-width</code></a> and <a title=\"The outline-color CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color\"><code>outline-color</code></a> in a single declaration. In most cases the use of this shortcut is preferable and more convenient.",
        "VALUES": [{
            "value": "<code>&lt;&apos;outline-width&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width\" title=\"The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:\"><code>outline-width</code></a>."
        }, {
            "value": "<code>&lt;&apos;outline-style&apos;&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style\" title=\"The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\"><code>outline-style</code></a>."
        }, {
            "value": "<code>&lt;&apos;outline-color&apos;&gt;</code>",
            "description": "Since Gecko 1.9 (Firefox 3), the value of the element&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" title=\"The color property sets the foreground color of an element&apos;s text content, and its decorations. It doesn&apos;t affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.\"><code>color</code></a> property (foreground color) is used. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color\" title=\"The outline-color CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\"><code>outline-color</code></a>."
        }]
    },
    "outline-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color",
        "SUMMARY": "The <strong><code>outline-color</code></strong> CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> for the various color keywords and notations."
        }, {
            "value": "<code>invert</code>",
            "description": "To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Note that browsers are not required to support it. If not, they just consider the statement as invalid"
        }]
    },
    "outline-offset": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset",
        "SUMMARY": "The <strong><code>outline-offset</code></strong> CSS property is used to set space between an <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline\" title=\"The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration. In most cases the use of this shortcut is preferable and more convenient.\"><code>outline</code></a> and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "The width of the space. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for possible units. Negative values place the outline inside the element."
        }]
    },
    "outline-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style",
        "SUMMARY": "The <strong><code>outline-style</code></strong> CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.",
        "VALUES": [{
            "value": "none",
            "description": ""
        }, {
            "value": "No outline (<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width\" title=\"The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:\"><code>outline-width</code></a> is<code> 0</code>).",
            "description": "dotted"
        }, {
            "value": "",
            "description": "The outline is a series of dots."
        }, {
            "value": "dashed",
            "description": ""
        }, {
            "value": "The outline is a series of short line segments.",
            "description": "solid"
        }, {
            "value": "",
            "description": "The outline is a single line."
        }, {
            "value": "double",
            "description": ""
        }, {
            "value": "The outline is two single lines. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width\" title=\"The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:\"><code>outline-width</code></a> is the sum of the two lines and the space between them.",
            "description": "groove"
        }, {
            "value": "",
            "description": "The outline looks as though it were carved into the canvas."
        }, {
            "value": "ridge",
            "description": ""
        }, {
            "value": "The opposite of<code> groove</code>: the outline looks as though it were coming out of the canvas.",
            "description": "inset"
        }, {
            "value": "",
            "description": "The outline makes the box look as though it were embeded in the canvas."
        }, {
            "value": "outset",
            "description": ""
        }]
    },
    "outline-width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width",
        "SUMMARY": "The <strong><code>outline-width</code></strong> CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:",
        "VALUES": [{
            "value": "<code>thin</code>",
            "description": "Depends on the UA. Typically <strong>1px</strong> in desktop browsers like Firefox."
        }, {
            "value": "<code>medium</code>",
            "description": "Depends on the UA. Typically <strong>3px</strong> in desktop browsers like Firefox."
        }, {
            "value": "<code>thick</code>",
            "description": "Depends on the UA. Typically <strong>5px</strong> in desktop browsers like Firefox."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> values."
        }]
    },
    "overflow": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow",
        "SUMMARY": "The <strong><code>overflow</code></strong> property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.",
        "VALUES": [{
            "value": "<code>visible</code>",
            "description": "Default value. Content is not clipped, it may be rendered outside the content box."
        }, {
            "value": "<code>hidden</code>",
            "description": "The content is clipped and no scrollbars are provided."
        }, {
            "value": "<code>scroll</code>",
            "description": "The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content."
        }, {
            "value": "<code>auto</code>",
            "description": "Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows."
        }, {
            "value": "<code>-moz-scrollbars-none </code><span title=\"This is an obsolete API and is no longer guaranteed to work.\"><i class=\"icon-trash\"> </i></span>",
            "description": "Use <code>overflow:hidden</code> instead."
        }, {
            "value": "<code>-moz-scrollbars-horizontal </code><span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span>",
            "description": "Use of <a title=\"The overflow-x property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x\"><code>overflow-x</code></a> and <a title=\"The overflow-y property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y\"><code>overflow-y</code></a> is preferred."
        }, {
            "value": "<code>-moz-scrollbars-vertical </code><span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span>",
            "description": "Use of <a title=\"The overflow-x property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x\"><code>overflow-x</code></a> and <a title=\"The overflow-y property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y\"><code>overflow-y</code></a> is preferred."
        }, {
            "value": "-moz-hidden-unscrollable <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Is intended mainly for internal use and by themes. Disables scrolling of XML root elements and <code>&lt;html&gt;</code>, <code> &lt;body&gt;</code> by arrow keys and mouse wheel."
        }]
    },
    "overflow-clip-box": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-box",
        "SUMMARY": "The <code>overflow-clip-box</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies relative to which box the clipping happens when there is an overflow.",
        "VALUES": [{
            "value": "<code>padding-box</code>",
            "description": "This keyword makes the clipping be related to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area\">padding box</a>."
        }, {
            "value": "<code>content-box</code>",
            "description": "This keyword makes the clipping be related to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area\">content box</a>."
        }]
    },
    "overflow-wrap": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap",
        "SUMMARY": "The <code><strong>overflow</strong></code><strong><code>-wrap</code></strong> property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Indicates that lines may only break at normal word break points."
        }, {
            "value": "<code>break-word</code>",
            "description": "Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line."
        }]
    },
    "overflow-x": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x",
        "SUMMARY": "The<strong> <code>overflow-x</code></strong> property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.",
        "VALUES": [{
            "value": "<code>visible</code>",
            "description": "Content is not clipped, it may be rendered outside the content box."
        }, {
            "value": "<code>hidden</code>",
            "description": "The content is clipped and no scrollbars are provided."
        }, {
            "value": "<code>scroll</code>",
            "description": "The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content."
        }, {
            "value": "<code>auto</code>",
            "description": "Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows."
        }]
    },
    "overflow-y": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y",
        "SUMMARY": "The <strong><code>overflow-y</code></strong> property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.",
        "VALUES": [{
            "value": "<code>visible</code>",
            "description": "Content is not clipped, it may be rendered outside the content box."
        }, {
            "value": "<code>hidden</code>",
            "description": "The content is clipped and no scrollbars are provided."
        }, {
            "value": "<code>scroll</code>",
            "description": "The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content."
        }, {
            "value": "<code>auto</code>",
            "description": "Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows."
        }]
    },
    "padding": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding",
        "SUMMARY": "The <strong><code>padding</code></strong> property sets the padding space on all sides of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and its border. Negative values are not allowed.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Specifies a non-negative fixed width. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for details."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "With respect to the<strong> width </strong>of the containing block."
        }]
    },
    "padding-block-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end",
        "SUMMARY": "The <strong><code>padding-block-end</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top\" title=\"The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.\"><code>padding-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right\" title=\"The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom\" title=\"The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and its border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.\"><code>padding-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.\"><code>padding-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>padding-block-end</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it&apos;s border. A negative value is not allowed.\"><code>padding-left</code></a> property."
        }]
    },
    "padding-block-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start",
        "SUMMARY": "The <strong><code>padding-block-start</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top\" title=\"The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.\"><code>padding-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right\" title=\"The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom\" title=\"The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and its border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.\"><code>padding-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.\"><code>padding-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>padding-block-start</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it&apos;s border. A negative value is not allowed.\"><code>padding-left</code></a> property."
        }]
    },
    "padding-bottom": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom",
        "SUMMARY": "The <strong><code>padding-bottom</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the height of the padding area at the bottom of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and its border. Contrary to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a> values, negative values of <code>padding-bottom</code> are invalid.",
        "VALUES": [{
            "value": "&lt;length&gt;",
            "description": "Specifies a positive fixed width. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for details."
        }, {
            "value": "&lt;percentage&gt;",
            "description": "A percentage with respect to the width of the containing block."
        }]
    },
    "padding-inline-end": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end",
        "SUMMARY": "The <strong><code>padding-inline-end</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a title=\"The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top\"><code>padding-top</code></a>, <a title=\"The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right\"><code>padding-right</code></a>, <a title=\"The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and its border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom\"><code>padding-bottom</code></a>, or <a title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\"><code>padding-left</code></a> property depending on the values defined for <a title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\"><code>writing-mode</code></a>, <a title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\"><code>direction</code></a>, and <a title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>padding-inline-end</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it&apos;s border. A negative value is not allowed.\"><code>padding-left</code></a> property."
        }]
    },
    "padding-inline-start": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start",
        "SUMMARY": "The<strong> <code>padding-inline-start</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top\" title=\"The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.\"><code>padding-top</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right\" title=\"The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding-right</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom\" title=\"The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and its border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.\"><code>padding-bottom</code></a>, or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.\"><code>padding-left</code></a> property depending on the values defined for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>.",
        "VALUES": [{
            "value": "",
            "description": "The <code>padding-inline-start</code> property takes the same values as the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it&apos;s border. A negative value is not allowed.\"><code>padding-left</code></a> property."
        }]
    },
    "padding-left": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left",
        "SUMMARY": "The <strong><code>padding-left</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the padding space required on the left side of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and it's border. A negative value is not allowed.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Specifies a positive fixed width. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for details."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A percentage with respect to the width of the containing block."
        }]
    },
    "padding-right": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right",
        "SUMMARY": "The<strong> <code>padding-right</code> </strong><a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the padding space required on the right side of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and its border. Negative values are not allowed.",
        "VALUES": [{
            "value": "&lt;length&gt;",
            "description": "Specifies a positive fixed width. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> for details."
        }, {
            "value": "&lt;percentage&gt;",
            "description": "A percentage with respect to the width of the containing block."
        }]
    },
    "padding-top": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top",
        "SUMMARY": "The <strong><code>padding-top</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the padding space required on the top of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and its border. Contrary to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a> values, negative values of <code>padding-top</code> are invalid.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Specifies a positive fixed width. See <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> for details."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "A percentage with respect to the width of the containing block."
        }]
    },
    "page-break-after": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after",
        "SUMMARY": "The <strong><code>page-break-after</code></strong> CSS property adjusts page breaks <em>after</em> the current element.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Initial value. Automatic page breaks (neither forced nor forbidden)."
        }, {
            "value": "<code>always</code>",
            "description": "Always force page breaks after the element."
        }, {
            "value": "<code>avoid</code>",
            "description": "Avoid page breaks after the element."
        }, {
            "value": "<code>left</code>",
            "description": "Force page breaks after the element so that the next page is formatted as a left page."
        }, {
            "value": "<code>right</code>",
            "description": "Force page breaks after the element so that the next page is formatted as a right page."
        }, {
            "value": "<code>recto</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "If pages progress left-to-right, then this acts like <code>right</code>. If pages progress right-to-left, then this acts like <code>left</code>."
        }, {
            "value": "<code>verso</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "If pages progress left-to-right, then this acts like <code>left</code>. If pages progress right-to-left, then this acts like <code>right</code>."
        }]
    },
    "page-break-before": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before",
        "SUMMARY": "The <strong><code>page-break-before</code></strong> CSS property adjusts page breaks <em>before</em> the current element.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Initial value. Automatic page breaks (neither forced nor forbidden)."
        }, {
            "value": "<code>always</code>",
            "description": "Always force page breaks before the element."
        }, {
            "value": "<code>avoid</code>",
            "description": "Avoid page breaks before the element."
        }, {
            "value": "<code>left</code>",
            "description": "Force page breaks before the element so that the next page is formatted as a left page."
        }, {
            "value": "<code>right</code>",
            "description": "Force page breaks before the element so that the next page is formatted as a right page."
        }, {
            "value": "<code>recto</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "If pages progress left-to-right, then this acts like <code>right</code>. If pages progress right-to-left, then this acts like <code>left</code>."
        }, {
            "value": "<code>verso</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "If pages progress left-to-right, then this acts like <code>left</code>. If pages progress right-to-left, then this acts like <code>right</code>."
        }]
    },
    "page-break-inside": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside",
        "SUMMARY": "The<strong> <code>page-break-inside</code></strong> CSS property adjusts page breaks <em>inside</em> the current element.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Initial value. Automatic page breaks (neither forced nor forbidden)."
        }, {
            "value": "<code>avoid</code>",
            "description": "Avoid page breaks inside the element."
        }]
    },
    "perspective": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/perspective",
        "SUMMARY": "The <strong><code>perspective</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z&gt;0 becomes larger; each 3D-element with z&lt;0 becomes smaller. The strength of the effect is determined by the value of this property.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Is a keyword indicating that no perspective transform has to be applied."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element and its content. If it <code>0</code> or a negative value, no perspective transform is applied."
        }]
    },
    "perspective-origin": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin",
        "SUMMARY": "The <strong><code>perspective-origin</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property determines the position the viewer is looking at. It is used as the <em>vanishing point</em> by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/perspective\" title=\"The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z&gt;0 becomes larger; each 3D-element with z&lt;0 becomes smaller. The strength of the effect is determined by the value of this property.\"><code>perspective</code></a> property.",
        "VALUES": [{
            "value": "<em>x-position</em>",
            "description": "Indicates the position of the abscissa of the <em>vanishing point</em>. It can have one of the following values:\n <ul>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;length-percentage&gt;</code></a> indicating the position as an absolute length value or relative to the width of the element. The value may be negative.</li>\n  <li><code>left</code>, a keyword being a shortcut for the <code>0</code> length value.</li>\n  <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li>\n  <li><code>right</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li>\n </ul>\n "
        }, {
            "value": "<em>y-position</em>",
            "description": "Indicates the position of the ordinate of the <em>vanishing point</em>. It can have one of the following values:\n <ul>\n  <li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage\" class=\"new\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;length-percentage&gt;</code></a> indicating the position as an absolute length value or relative to the height of the element. The value may be negative.</li>\n  <li><code>top</code>, a keyword being a shortcut for the <code>0</code> length value.</li>\n  <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li>\n  <li><code>bottom</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li>\n </ul>\n "
        }]
    },
    "place-content": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/place-content",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <code><strong>place</strong></code><strong><code>-content</code></strong> shorthand property sets both the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-content\" title=\"The CSS align-content property defines how the browser distributes space between and around content items along the main-axis of their container.\"><code>align-content</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content\" title=\"The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.\"><code>justify-content</code></a> properties. The first value is the <code>align-content</code> property value, the second the <code>justify-content</code> one. If the second value is not present, the first value is also used for it.",
        "VALUES": [{
            "value": "<code>start</code>",
            "description": "The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>end</code>",
            "description": "The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>flex-start</code>",
            "description": "The items are packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-start or cross-start side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>start</code>."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The items are packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-end or cross-end side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>end</code>."
        }, {
            "value": "<code>center</code>",
            "description": "The items are packed flush to each other toward the center of the of the alignment container."
        }, {
            "value": "<code>left</code>",
            "description": "The items are packed flush to each other toward the left edge of the alignment container. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>right</code>",
            "description": "The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>space-between</code>",
            "description": "The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge."
        }, {
            "value": "<code>baseline<br>\n first baseline</code><br>\n <code>last baseline</code>",
            "description": "Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box&#x2019;s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>\n The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>."
        }, {
            "value": "<code>space-around</code>",
            "description": "The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items."
        }, {
            "value": "<code>space-evenly</code>",
            "description": "The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same."
        }, {
            "value": "<code>stretch</code>",
            "description": "If the combined size of the items is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by <a title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\"><code>max-height</code></a>/<a title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\"><code>max-width</code></a> (or equivalent functionality), so that the combined size exactly fills the alignment container"
        }]
    },
    "place-items": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/place-items",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> <code><strong>place</strong></code><strong><code>-items</code></strong> shorthand property sets both the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-items\" title=\"The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.\"><code>align-items</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items\" title=\"The CSS justify-items property defines the default justify-self for all items of the box, given them the default way of justifying each box along the appropriate axis.\"><code>justify-items</code></a> properties. The first value is the <code>align-items</code> property value, the second the <code>justify-items</code> one. If the second value is not present, the first value is also used for it.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The value used is the value of the <code>justiy-items</code> property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, <code>auto</code> represents <code>normal</code>."
        }, {
            "value": "<code>normal</code>",
            "description": "The effect of this keyword is dependent of the layout mode we are in:\n <ul>\n  <li>In block-level layouts, the keyword is a synonym of <code>start</code>.</li>\n  <li>In absolutely-positioned layouts, the keyword behaved like <code>start</code> on <em>replaced</em> absolutely-positioned boxes, and as <code>stretch</code> on <em>all other</em> absolutely-positioned boxes. <span style=\"display: none;\"> </span><span style=\"display: none;\">&#xA0;</span><span style=\"display: none;\"> </span></li>\n  <li>In table cell layouts, this keyword has no meaning as this property is <em>ignored</em>.</li>\n  <li>In flexbox layouts, this keyword has no meaning as this property is <em>ignored.</em></li>\n  <li>In grid layouts, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>\n </ul>\n "
        }, {
            "value": "<code>start</code>",
            "description": "The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>end</code>",
            "description": "The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis."
        }, {
            "value": "<code>flex-start</code>",
            "description": "The item ispacked flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-start or cross-start side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>start</code>."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The item is packed flush to each other toward the edge of the alignment container depending on the flex container&apos;s main-end or cross-end side.<br>\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>end</code>."
        }, {
            "value": "<code>self-start</code>",
            "description": "The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis."
        }, {
            "value": "<code>self-end</code>",
            "description": "The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis."
        }, {
            "value": "<code>center</code>",
            "description": "The items are packed flush to each other toward the center of the of the alignment container."
        }, {
            "value": "<code>left</code>",
            "description": "The items are packed flush to each other toward the left edge of the alignment container. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>right</code>",
            "description": "The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property&#x2019;s axis is not parallel with the inline axis, this value behaves like <code>start</code>."
        }, {
            "value": "<code>baseline<br>\n first baseline</code><br>\n <code>last baseline</code>",
            "description": "Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box&#x2019;s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>\n The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>."
        }, {
            "value": "<code>stretch</code>",
            "description": "If the combined size of the items is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by <a title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\"><code>max-height</code></a>/<a title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\"><code>max-width</code></a> (or equivalent functionality), so that the combined size exactly fills the alignment container."
        }]
    },
    "place-self": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/place-self",
        "SUMMARY": "The <code><strong>place</strong></code><strong><code>-self</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property shorthand property sets both the <a title=\"The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the item's cross-axis margin is set to auto, then align-self is ignored.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-self\"><code>align-self</code></a> and <a title=\"The CSS justify-self property defines the way of justifying a box inside its containeralong the appropriate axis.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self\"><code>justify-self</code></a> properties. The first value is the <code>align-self</code> property value, the second the <code>justify-self</code> one. If the second value is not present, the first value is also used for it.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Computes to the parent&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-items\" title=\"The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.\"><code>align-items</code></a> value."
        }, {
            "value": "<code>normal</code>",
            "description": "The effect of this keyword is dependent of the layout mode we are in:\n <ul>\n  <li>In absolutely-positioned layouts, the keyword behaves like <code>start</code> on <em>replaced</em> absolutely-positioned boxes, and as <code>stretch</code> on <em>all other</em> absolutely-positioned boxes. <span style=\"display: none;\"> </span><span style=\"display: none;\">&#xA0;</span><span style=\"display: none;\"> </span></li>\n  <li>In static position of absolutely-positioned layouts, the keyword behaves as <code>stretch</code>.</li>\n  <li>For flex items, the keyword behaves as <code>stretch</code>.</li>\n  <li>For grid items, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>\n  <li>The property doesn&apos;t apply to block-level boxes, and to table cells.</li>\n </ul>\n "
        }, {
            "value": "<code>self-start</code>",
            "description": "Aligns the items to be flush with the edge of the alignment container corresponding to the item&apos;s start side in the cross axis."
        }, {
            "value": "<code>self-end</code>",
            "description": "Aligns the items to be flush with the edge of the alignment container corresponding to the item&apos;s end side in the cross axis."
        }, {
            "value": "<code>flex-start</code>",
            "description": "The cross-start margin edge of the flex item is flushed with the cross-start edge of the line."
        }, {
            "value": "<code>flex-end</code>",
            "description": "The cross-end margin edge of the flex item is flushed with the cross-end edge of the line."
        }, {
            "value": "<code>center</code>",
            "description": "The flex item&apos;s margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions."
        }, {
            "value": "<code>baseline<br>\n first baseline</code><br>\n <code>last baseline</code>",
            "description": "Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box&#x2019;s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>\n The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>."
        }, {
            "value": "<code>stretch</code>",
            "description": "If the combined size of the items along the cross axis is less than the size of the alignment container and the item is <code>auto</code>-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\" title=\"The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\"><code>max-height</code></a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\" title=\"The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\"><code>max-width</code></a> (or equivalent functionality), so that the combined size of all <code>auto</code>-sized items exactly fills the alignment container along the cross axis."
        }]
    },
    "pointer-events": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events",
        "SUMMARY": "The CSS property<strong> <code>pointer-events</code></strong> allows authors to control under what circumstances (if any) a particular graphic element can become the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/event.target\">target</a> of mouse events. When this property is unspecified, the same characteristics of the <code>visiblePainted</code> value apply to SVG content.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The element behaves as it would if the <code>pointer-events</code> property were not specified. In SVG content, this value and the value <code>visiblePainted</code> have the same effect."
        }, {
            "value": "<code>none</code>",
            "description": "The element is never the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/event.target\">target</a> of mouse events; however, mouse events may target its descendant elements if those descendants have <code>pointer-events</code> set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/event.bubbles\">bubble</a> phases."
        }, {
            "value": "<code>visiblePainted</code>",
            "description": "SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., &apos;fill&apos;) of the element and the <code>fill</code> property is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., &apos;stroke&apos;) of the element and the <code>stroke</code> property is set to a value other than <code>none</code>."
        }, {
            "value": "<code>visibleFill</code>",
            "description": "SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the <code>fill</code> property does not affect event processing."
        }, {
            "value": "<code>visibleStroke</code>",
            "description": "SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the <code>stroke</code> property does not affect event processing."
        }, {
            "value": "<code>visible</code>",
            "description": "SVG only. The element can be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the <code>fill</code> and <code>stroke</code> do not affect event processing."
        }, {
            "value": "<code>painted</code>",
            "description": "SVG only. The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., &apos;fill&apos;) of the element and the <code>fill</code> property is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., &apos;stroke&apos;) of the element and the <code>stroke</code> property is set to a value other than <code>none</code>. The value of the <code>visibility</code> property does not affect event processing."
        }, {
            "value": "<code>fill</code>",
            "description": "SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the <code>fill</code> and <code>visibility</code> properties do not affect event processing."
        }, {
            "value": "<code>stroke</code>",
            "description": "SVG only. The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the <code>stroke</code> and <code>visibility</code> properties do not affect event processing."
        }, {
            "value": "<code>all</code>",
            "description": "SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the <code>fill</code>, <code>stroke</code> and <code>visibility</code> properties do not affect event processing."
        }]
    },
    "position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/position",
        "SUMMARY": "The <strong><code>position</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.",
        "VALUES": [{
            "value": "<code>static</code>",
            "description": "This keyword lets the element use the normal behavior.&#xA0;That is, it is laid out in its current position in the flow.&#xA0; The<code> top</code>,<code> right</code>,<code> bottom</code>, <code>left</code> and <code>z-index</code> properties do not apply."
        }, {
            "value": "<code>relative</code>",
            "description": "This keyword lays out all elements as though the element were not positioned, and then adjusts the element&apos;s position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of <code>position:relative</code> on <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, and <code>table-caption</code> elements is undefined."
        }, {
            "value": "<code>absolute</code>",
            "description": "Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise&#xA0;relative&#xA0;to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins."
        }, {
            "value": "<span style=\"font-family: courier new,andale mono,monospace; font-weight: inherit; line-height: normal;\">fixed</span>",
            "description": "Do not leave space for the element. Instead, position it at a specified position relative to the screen&apos;s&#xA0;viewport and don&apos;t move it when scrolled. When printing, position it at that fixed position on <em>every page</em>. This value always creates a new stacking context. When an ancestor has the <code>transform</code> property set to something different from&#xA0;<code>none</code> then this ancestor is used as container instead of the viewport (see <a href=\"https://www.w3.org/TR/css-transforms-1/#propdef-transform\" class=\"external\">CSS Transforms Spec</a>)."
        }, {
            "value": "<code style=\"font-size: 14px;\">sticky</code>&#xA0;<span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including&#xA0;<code style=\"font-size: 14px;\">table</code>&#xA0;elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of &#x2018;<code style=\"font-size: 14px;\">position: sticky</code>&#x2019; on&#xA0;table related elements is the same as for &#x2018;<code style=\"font-size: 14px;\">position: relative</code>&#x2019;."
        }]
    },
    "quotes": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/quotes",
        "SUMMARY": "The <code>quotes</code> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> property indicates how user agents should render quotation marks.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The <code>open-quote</code> and <code>close-quote</code> values of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/content\" title=\"The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.\"><code>content</code></a> property produce no quotation marks."
        }, {
            "value": "<code>[&lt;string&gt; &lt;string&gt;]+</code>",
            "description": "One or more pairs of&#xA0;<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/string\" title=\"The &lt;string&gt; CSS data type represents a string. It is formed by a Unicode characters delimited by either double (&quot;) or single (&apos;) 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.\"><code>&lt;string&gt;</code></a> values for <code>open-quote</code> and <code>close-quote</code>. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on."
        }]
    },
    "radial-gradient()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient",
        "SUMMARY": "The CSS <code>radial-gradient()</code> function creates an <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; 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.\"><code>&lt;image&gt;</code></a> which represents a gradient of colors radiating from an origin, the <em>center</em> of the gradient. The result of this function is an object of the CSS <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/gradient\" title=\"The &lt;gradient&gt; CSS data type denotes a CSS &lt;image&gt; made of a progressive transition between two or more colors. A CSS gradient is not a CSS &lt;color&gt; 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.\"><code>&lt;gradient&gt;</code></a> data type.",
        "VALUES": [{
            "value": "<code>&lt;position&gt;</code>",
            "description": "A <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position_value\" title=\"The &lt;position&gt; CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.\"><code>&lt;position&gt;</code></a>, interpreted in the same way as <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-position\" title=\"Technical review completed.\"><code>background-position</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\"><code>transform-origin</code></a>. If omitted, the default is <code>center</code>."
        }, {
            "value": "<code>&lt;shape&gt;</code>",
            "description": "The gradient&apos;s shape. This is one of <code>circle</code> (meaning that the gradient&apos;s shape is a circle with constant radius) or <code>ellipse</code> (meaning that the shape is an axis-aligned ellipse). The default value is <code>ellipse</code>."
        }, {
            "value": "<code>&lt;color-stop&gt;</code>",
            "description": "Representing a fixed color at a precise position, this value is composed by a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> value, followed by an optional stop position (either a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> along the virtual gradient ray). A percentage of <code>0%</code>, or a length of <code>0</code>, represents the center of the gradient, the value <code>100%</code> of the intersection of the ending shape with the virtual gradient ray. Percentage values in-between are linearly positioned on the gradient ray."
        }, {
            "value": "<code>&lt;extent-keyword&gt;</code>",
            "description": "Keywords describing how big the ending shape must be. The possible keywords are:"
        }]
    },
    "repeating-linear-gradient()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient",
        "SUMMARY": "The CSS <code>repeating-linear-gradient</code> function creates an <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; 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.\"><code>&lt;image&gt;</code></a> consisting of repeating gradients. It works similarly to the basic linear gradients as described by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient\" title=\"The CSS linear-gradient() function creates an &lt;image&gt; which represents a linear gradient of colors. The result of this function is an object of the CSS &lt;gradient&gt; data type. Like any other gradient, a CSS linear gradient is not a CSS &lt;color&gt; but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size&#xA0;of the element it applies to.\"><code>linear-gradient()</code></a>, and takes the same arguments. However, it automatically repeats the color stops infinitely in both directions. The color stops' positions shift by multiples of the length of a basic linear gradient (the difference between the last color stops' position and the first).",
        "VALUES": [{
            "value": "<code>&lt;side-or-corner&gt;</code>",
            "description": "Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br>\n The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that causes the starting-point to be in the same quadrant as the described corner so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code>&lt;color-stop&gt;</code> will exactly apply to the corner point. This is sometimes called the &quot;<em>magic corner</em>&quot; property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box."
        }, {
            "value": "<code>&lt;angle&gt;</code>",
            "description": "An angle of direction for the gradient. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/angle\" title=\"The &lt;angle&gt; CSS data type represents angle values. Positive angles represent clockwise angles, negative angles represent counterclockwise angles. Its syntax is a &lt;number&gt; data type immediately followed by the unit (deg, grad, rad or turn). Like for any CSS dimension, there is no space between the unit literal and the number.\"><code>&lt;angle&gt;</code></a>."
        }, {
            "value": "<code>&lt;color-stop&gt;</code>",
            "description": "This value is comprised of a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\" title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\"><code>&lt;color&gt;</code></a> value, followed by an optional stop position (either a percentage between 0% and 100% or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> along the gradient axis).<br>\n Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients."
        }]
    },
    "repeating-radial-gradient()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient",
        "SUMMARY": "This works similarly to the standard radial gradients as described by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient\" title=\"The CSS radial-gradient() function creates an &lt;image&gt; which represents a gradient of colors radiating from an origin, the center of the gradient. The result of this function is an object of the CSS &lt;gradient&gt; data type.\"><code>radial-gradient()</code></a>, but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop's position and the first one's position.",
        "VALUES": [{
            "value": "<code>&lt;position&gt;</code>",
            "description": "A <a title=\"The &lt;position&gt; CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position_value\"><code>&lt;position&gt;</code></a>, interpreted in the same way as <a title=\"The background-position CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-position\"><code>background-position</code></a> or <a title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element&apos;s transform, then translating by the property value.)\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\"><code>transform-origin</code></a>. If omitted, the default is <code>center</code>."
        }, {
            "value": "&lt;<code>angle</code>&gt;",
            "description": "An angle establishing the gradient line, which extends from the starting point at this angle; this is <code>0deg</code> by default."
        }, {
            "value": "<code>&lt;shape&gt;</code>",
            "description": "The gradient&apos;s shape. This is one of <code>circle</code> (meaning that the gradient&apos;s shape is a circle with constant radius) or <code>ellipse</code> (meaning that the shape is an axis-aligned ellipse). The default value is <code>ellipse</code>."
        }, {
            "value": "<code>&lt;size&gt;</code>",
            "description": "The size of the gradient. This is one of the <a href=\"#Size_constants\">Size constants</a> listed below."
        }, {
            "value": "<code>&lt;color-stop&gt;</code>",
            "description": "Representing a fixed color at a precise position, this value is composed by a <a title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\"><code>&lt;color&gt;</code></a> value, followed by an optional stop position (either a <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> or a <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> along the virtual gradient ray). A percentage of <code>0%</code>, or a length of <code>0</code>, represents the center of the gradient, the value <code>100%</code> the intersection of the ending shape with the virtual gradient ray. Percentage values in-between. are linearily positioned on the gradient ray."
        }, {
            "value": "<code>&lt;extent-keyword&gt;</code>",
            "description": "Are keywords describing how big the ending shape must be. The possible keywords are:"
        }]
    },
    "resize": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/resize",
        "SUMMARY": "The <strong><code>resize</code></strong> CSS property lets you control the resizability of an element.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The element offers no user-controllable method for resizing the element."
        }, {
            "value": "<code>both</code>",
            "description": "The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically."
        }, {
            "value": "<code>horizontal</code>",
            "description": "The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally."
        }, {
            "value": "<code>vertical</code>",
            "description": "The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically."
        }, {
            "value": "<code>block</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Depending on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction."
        }, {
            "value": "<code>inline</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Depending on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction."
        }]
    },
    "revert": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/revert",
        "SUMMARY": "The <strong><code>revert</code></strong> CSS keyword rolls back the cascade so that the property takes on the value it would have had if there were no styles in the current style origin (author, user, or user-agent). In author stylesheets (the normal case), for the purposes of the given declaration, it's as if there were no author-level styles, thus resetting the property to the default value established by the user-agent stylesheet (or by user styles, if any exist).",
        "VALUES": []
    },
    "right": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/right",
        "SUMMARY": "The <code>right</code> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies part of the position of positioned elements.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a negative, null or positive <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> that represents:\n <ul>\n  <li>for <em>absolutely positioned elements</em>, the distance to the right edge of the containing block;</li>\n  <li>for <em>relatively positioned elements</em>, the offset that the element is moved right from its position in the normal flow if it wasn&apos;t positioned.</li>\n </ul>\n "
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the containing block&apos;s width, used as described in the <a href=\"#Summary\">summary</a>."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword that represents:\n <ul>\n  <li>for absolutely positioned elements, the position the element based on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property and treat <code>width: auto</code> as a width based on the content.</li>\n  <li>for relatively positioned elements, the right offset the element from its original position based on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property, or if <code>left</code> is also <code>auto</code>, do not offset it at all.</li>\n </ul>\n "
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> or the <code>auto</code> keyword."
        }]
    },
    "ruby-align": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align",
        "SUMMARY": "The <code><strong>ruby-align</strong></code> CSS property defines the distribution of the different ruby elements over the base.",
        "VALUES": [{
            "value": "<code>start</code>",
            "description": "Is a keyword indicating that the ruby will be aligned with the start of the base text."
        }, {
            "value": "<code>center</code>",
            "description": "Is a keyword indicating that the ruby will be aligned at the middle of the base text"
        }, {
            "value": "<code>space-between</code>",
            "description": "Is a keyword indicating that the extra space will be distributed between the elements of the ruby."
        }, {
            "value": "<code>space-around</code>",
            "description": "Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it."
        }]
    },
    "ruby-position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position",
        "SUMMARY": "The <code><strong>ruby-position</strong></code> CSS property defines the position of a ruby element relatives to its base element. It can be position over the element (<code>over</code>), under it (<code>under</code>), or between the characters, on their right side (<code>inter-character</code>).",
        "VALUES": [{
            "value": "<code>over</code>",
            "description": "<img src=\"https://mdn.mozillademos.org/files/10251/Screen%20Shot%202015-03-04%20at%2013.02.20.png\" style=\"height: 31px; width: 77px;\" alt=\"Over example\">Is a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts."
        }, {
            "value": "<code>under</code>",
            "description": "<img src=\"https://mdn.mozillademos.org/files/10249/Screen%20Shot%202015-03-04%20at%2013.02.07.png\" style=\"height: 34px; width: 78px;\" alt=\"Under example\">Is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts."
        }, {
            "value": "<code>inter-character</code>",
            "description": "Is a keyword indicating that the ruby has to be placed between the different characters."
        }]
    },
    "scroll-behavior": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior",
        "SUMMARY": "The<strong> <code>scroll-behavior</code></strong> CSS property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The scrolling box is scrolled in an instant fashion."
        }, {
            "value": "<code>smooth</code>",
            "description": "The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any."
        }]
    },
    "scroll-snap-coordinate": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-coordinate",
        "SUMMARY": "The<strong> <code>scroll-snap-coordinate</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the positions in x and y coordinates within the element which will align with the nearest ancestor scroll container's <a title=\"The scroll-snap-destination CSS property defines the position in x and y coordinates within the scroll container's visual viewport which element snap points align with.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination\"><code>scroll-snap-destination</code></a> for the respective axis.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Specifies that the element does not contribute to a snap point."
        }, {
            "value": "<code>&lt;position&gt;</code>",
            "description": "Specifies the offset of the snap coordinates from the start edge of the element&#x2019;s border box. For each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate."
        }]
    },
    "scroll-snap-destination": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination",
        "SUMMARY": "The <strong><code>scroll-snap-destination</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the position in x and y coordinates within the scroll container's visual <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/viewport\" class=\"glossaryLink\" title=\"viewport: A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the browser that is taken up by visible website content.\">viewport</a> which element snap points align with.",
        "VALUES": [{
            "value": "<code>&lt;position&gt;</code>",
            "description": "Specifies the offset of the snap destination from the start edge of the scroll container&#x2019;s visual viewport. The first value gives the x coordinate of the snap destination, the second value its y coordinate."
        }]
    },
    "scroll-snap-points-x": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-x",
        "SUMMARY": "The <strong><code>scroll-snap-points-x</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the horizontal positioning of snap points within the content of the scroll container they are applied to.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The scroll container does not define any snap points. Elements within the scroll container may still define snap points on behalf of the scroll container."
        }, {
            "value": "<code>repeat(&lt;length-percentage&gt;)</code>",
            "description": "Defines an interval at which snap points are defined, starting from the container&apos;s relevant start edge. Only positive lengths are allowed. Percentages refer to the width of the container."
        }]
    },
    "scroll-snap-points-y": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-y",
        "SUMMARY": "The <strong><code>scroll-snap-points-y</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the vertical positioning of snap points within the content of the scroll container they are applied to.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The scroll container does not define any snap points. Elements within the scroll container may still define snap points on behalf of the scroll container."
        }, {
            "value": "<code>repeat(&lt;length-percentage&gt;)</code>",
            "description": "Defines an interval at which snap points are defined, starting from the container&apos;s relevant start edge. Only positive lengths are allowed. Percentages refer to the width of the container."
        }]
    },
    "scroll-snap-type": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type",
        "SUMMARY": "The <strong><code>scroll-snap-type</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines how strictly snap points are enforced on the scroll container in case there is one.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "When the visual <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/viewport\" class=\"glossaryLink\" title=\"viewport: A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the browser that is taken up by visible website content.\">viewport</a> of this scroll container is scrolled, it must ignore snap points."
        }, {
            "value": "<code>mandatory</code>",
            "description": "The visual viewport of this scroll container will rest on a snap point if it isn&apos;t currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point."
        }, {
            "value": "<code>proximity</code>",
            "description": "The visual viewport of this scroll container may come to rest on a snap point if it isn&apos;t currently scrolled considering the user agent&apos;s scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point."
        }]
    },
    "scroll-snap-type-x": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type-x",
        "SUMMARY": "The <strong><code>scroll-snap-type-x</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines how strictly snap points are enforced on the horizontal axis of the scroll container in case there is one.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "When the visual <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/viewport\" class=\"glossaryLink\" title=\"viewport: A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the browser that is taken up by visible website content.\">viewport</a> of this scroll container is scrolled horizontally, it must ignore snap points."
        }, {
            "value": "<code>mandatory</code>",
            "description": "The visual viewport of this scroll container will rest on a snap point if it isn&apos;t currently scrolled horizontally. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point."
        }, {
            "value": "<code>proximity</code>",
            "description": "The visual viewport of this scroll container may come to rest on a snap point if it isn&apos;t currently scrolled horizontally considering the user agent&apos;s scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point."
        }]
    },
    "scroll-snap-type-y": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type-y",
        "SUMMARY": "The <strong><code>scroll-snap-type-y</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines how strictly snap points are enforced on the vertical axis of the scroll container in case there is one.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "When the visual <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/viewport\" class=\"glossaryLink\" title=\"viewport: A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the browser that is taken up by visible website content.\">viewport</a> of this scroll container is scrolled vertically, it must ignore snap points."
        }, {
            "value": "<code>mandatory</code>",
            "description": "The visual viewport of this scroll container will rest on a snap point if it isn&apos;t currently scrolled vertically. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point."
        }, {
            "value": "<code>proximity</code>",
            "description": "The visual viewport of this scroll container may come to rest on a snap point if it isn&apos;t currently scrolled vertically considering the user agent&apos;s scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point."
        }]
    },
    "shape-image-threshold": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold",
        "SUMMARY": "The <strong><code>shape-image-threshold</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property defines the alpha channel threshold used to extract the shape using an image as the value for <a href=\"https://developer.mozilla.org/en-US/docs/\"><code>shape-outside</code></a>. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.",
        "VALUES": [{
            "value": "<span style=\"font-family: courier new,andale mono,monospace; font-style: inherit; font-weight: inherit; line-height: 1.5;\">&lt;number&gt;</span>",
            "description": "Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. A threshold value outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range."
        }]
    },
    "shape-margin": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin",
        "SUMMARY": "The<strong> <code>shape-margin</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property adds a margin to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside\" title=\"The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float's bounding box.\"><code>shape-outside</code></a>.",
        "VALUES": [{
            "value": "&lt;length-percentage&gt;",
            "description": "Sets the margin of the shape to a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value or to a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the width of the element&apos;s containing block."
        }]
    },
    "shape-outside": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside",
        "SUMMARY": "The <strong><code>shape-outside</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float's bounding box.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The float area is unaffected."
        }, {
            "value": "<code>&lt;shape-box&gt;</code>",
            "description": "If one of the values <code>margin-box</code>, <code>border-box</code>, <code>padding-box</code> or <code>content-box</code> is specified, the shape is computed based on it. The shape uses their respective box including curvature from <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\" title=\"The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.\"><code>border-radius</code></a>, similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip\" title=\"The background-clip CSS property specifies whether an element&apos;s background, either the color or image, extends underneath its border.\"><code>background-clip</code></a>."
        }, {
            "value": "<code>&lt;basic-shape&gt;</code>",
            "description": "The shape is computed based on the values of one of <code>inset()</code>, <code>circle()</code>, <code>ellipse()</code> or <code>polygon()</code>. If also a <code>&lt;shape-box&gt;</code> is supplied, this defines the reference box for the <code>&lt;basic-shape&gt;</code> function. If <code>&lt;shape-box&gt;</code> is not supplied, then the reference box defaults to <code>margin-box</code>."
        }, {
            "value": "<code>&lt;image&gt;</code>",
            "description": "The shape is extracted and computed based on the alpha channel of the specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; 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.\"><code>&lt;image&gt;</code></a> as defined by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold\" title=\"The shape-image-threshold&#xA0;CSS property defines the alpha channel threshold used to extract the shape using an image as the value for shape-outside. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.\"><code>shape-image-threshold</code></a>."
        }]
    },
    "specified value": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/specified_value",
        "SUMMARY": "The <strong>specified value</strong> of a CSS property is set in one out of three ways.",
        "VALUES": []
    },
    "symbols()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/symbols",
        "SUMMARY": "The <code>symbols()</code> function allows counter styles to be defined inline, directly as the value of the CSS property. Unlike styles defines with <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule defines a specific counter style that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a>, these styles are anonymous. The <code>symbols()</code> function doesn't have all the capabilities and options of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule defines a specific counter style that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a> at-rule, but is useful in cases such as when the style is used only once and you don't need all the the options provided by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule defines a specific counter style that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a>.",
        "VALUES": []
    },
    "tab-size": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size",
        "SUMMARY": "The<strong> <code>tab-size</code></strong> CSS property is used to customize the width of a tab (<code>U+0009</code>) character.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/integer\" title=\"The &lt;integer&gt; CSS data type denotes an integer number, positive or negative. There isn&apos;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.\"><code>&lt;integer&gt;</code></a>",
            "description": "The number of spaces in a tab. Must be nonnegative."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>",
            "description": "The width of a tab. Must be nonnegative."
        }]
    },
    "table-layout": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout",
        "SUMMARY": "The <strong><code>table-layout</code></strong> CSS property defines the algorithm to be used to lay out table cells, rows, and columns.",
        "VALUES": [{
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/auto\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>auto</code></a>",
            "description": "An automatic table layout algorithm is commonly used by most browsers for table layout. The widths of the table and its cells depend&#xA0;on the content thereof."
        }, {
            "value": "<code>fixed</code>",
            "description": "Table and column widths are set by the widths of <code>table</code> and <code>col</code> elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.<br>\n <br>\n Under the &quot;fixed&quot; layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the &quot;automatic&quot; layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/overflow\" title=\"The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.\"><code>overflow</code></a> property to determine whether to clip the overflow content, but only if the table has a known width, otherwise it won&apos;t overflow the cells."
        }]
    },
    "text-align": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-align",
        "SUMMARY": "Summary",
        "VALUES": [{
            "value": "<code>start</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The same as <code>left</code> if direction is left-to-right and <code>right</code> if direction is right-to-left."
        }, {
            "value": "<code>end</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The same as <code>right</code> if direction is left-to-right and <code>left</code> if direction is right-to-left."
        }, {
            "value": "<code>left</code>",
            "description": "The inline contents are aligned to the left edge of the line box."
        }, {
            "value": "<code>right</code>",
            "description": "The inline contents are aligned to the right edge of the line box."
        }, {
            "value": "<code>center</code>",
            "description": "The inline contents are centered within the line box."
        }, {
            "value": "<code>justify</code>",
            "description": "The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line."
        }, {
            "value": "<code>justify-all</code>",
            "description": "Same as <code>justify</code>, but also forces the last line to be justified."
        }, {
            "value": "<code>match-parent</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Similar to <code>inherit</code>, but the values <code>start</code> and <code>end</code> are calculated according the parent&apos;s <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> and are replaced by the adequate <code>left</code> or <code>right</code> value."
        }]
    },
    "text-align-last": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last",
        "SUMMARY": "The<strong> <code>text-align-last</code></strong> CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The affected line is aligned per the value of <a title=\"Summary\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-align\"><code>text-align</code></a>, unless <a title=\"Summary\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-align\"><code>text-align</code></a> is <code>justify</code>, in which case the effect is the same as setting <code>text-align-last</code> to <code>start</code>."
        }, {
            "value": "<code>start</code>",
            "description": "The same as <code>left</code> if direction is left-to-right and <code>right</code> if direction is right-to-left."
        }, {
            "value": "<code>end</code>",
            "description": "The same as <code>right</code> if direction is left-to-right and <code>left</code> if direction is right-to-left."
        }, {
            "value": "<code>left</code>",
            "description": "The inline contents are aligned to the left edge of the line box."
        }, {
            "value": "<code>right</code>",
            "description": "The inline contents are aligned to the right edge of the line box."
        }, {
            "value": "<code>center</code>",
            "description": "The inline contents are centered within the line box."
        }, {
            "value": "<code>justify</code>",
            "description": "The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph."
        }]
    },
    "text-combine-upright": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright",
        "SUMMARY": "The <strong><code>text-combine-upright</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the combination of multiple characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "There is no special processing."
        }, {
            "value": "<code>all</code>",
            "description": "Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the&#xA0;box."
        }, {
            "value": "<code>digits &lt;integer&gt;?</code>",
            "description": "Attempts to display a sequence of consecutive ASCII digits (U+0030&#x2013;U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid."
        }]
    },
    "text-decoration": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration",
        "SUMMARY": "The <strong><code>text-decoration</code></strong> CSS property is used to set the text formatting to <code>underline</code>, <code>overline</code>, <code>line-through</code> or <code>blink</code>. Underline and overline decorations are positioned under the text, line-through over it.",
        "VALUES": [{
            "value": "",
            "description": "The <code>text-decoration</code> property is a shorthand and can use the values of each of the three longhand properties: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line\" title=\"The text-decoration-line CSS property sets what kind of line decorations are added to an element.\"><code>text-decoration-line</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color\" title=\"The CSS text-decoration-color property sets the line color used when drawing underlines, overlines, and strikethrough lines specified by the corresponding text-decoration-line property. The color specified will be the same for all three line&#xA0;types.\"><code>text-decoration-color</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style\" title=\"The text-decoration-style CSS property defines the style of the lines specified by text-decoration-line. The style applies to all lines: there is no way to define different styles for each of the lines defined by text-decoration-line.\"><code>text-decoration-style</code></a>"
        }]
    },
    "text-decoration-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color",
        "SUMMARY": "The CSS <strong><code>text-decoration-color</code></strong> property sets the line color used when drawing underlines, overlines, and strikethrough lines specified by the corresponding <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line\" title=\"The text-decoration-line CSS property sets what kind of line decorations are added to an element.\"><code>text-decoration-line</code></a> property. The color specified will be the same for all three line types.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "description": "The <code>color</code> property accepts various keywords and numeric notations. See <a title=\"The &lt;color&gt; CSS data type denotes a color in the sRGB color space. A color can be described in any of these ways:\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\"><code>&lt;color&gt;</code></a> values for more details."
        }]
    },
    "text-decoration-line": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line",
        "SUMMARY": "The <strong><code>text-decoration-line</code></strong> CSS property sets what kind of line decorations are added to an element.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Produces no text decoration."
        }, {
            "value": "<code>underline</code>",
            "description": "Each line of text is underlined."
        }, {
            "value": "<code>overline</code>",
            "description": "Each line of text has a line above it."
        }, {
            "value": "<code>line-through</code>",
            "description": "Each line of text has a line through the middle."
        }, {
            "value": "<code>blink <span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span></code>",
            "description": "The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. This value is <strong>deprecated</strong> in favor of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation\">Animations</a>."
        }, {
            "value": "<code>-moz-anchor-decoration </code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "The text is decorated as an anchor; not suitable for web content."
        }]
    },
    "text-decoration-skip": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip",
        "SUMMARY": "The <strong><code>text-decoration-skip</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies what parts of the element’s content any text decoration affecting the element must skip over.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes."
        }, {
            "value": "<code>objects</code>",
            "description": "The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block."
        }, {
            "value": "<code>spaces</code>",
            "description": "All spacing is skipped, i.e. all <a class=\"external\" href=\"http://www.unicode.org/reports/tr44/#White_Space\">Unicode white space characters</a> and all word separators, plus any adjacent <a title=\"The letter-spacing CSS property specifies spacing behavior between text characters.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing\"><code>letter-spacing</code></a> or <a title=\"The word-spacing CSS property specifies the spacing behavior between tags and words.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing\"><code>word-spacing</code></a>."
        }, {
            "value": "<code>ink</code>",
            "description": "The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph."
        }, {
            "value": "<img src=\"https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png\" alt=\"An example of &quot;text-decoration-skip: ink;&quot;.\">",
            "description": "<code>edges</code>"
        }, {
            "value": "The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)",
            "description": "<img src=\"https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png\" alt=\"An example of &quot;text-decoration-skip: edges;&quot;.\">"
        }, {
            "value": "<code>box-decoration</code>",
            "description": "The text decoration is skipped over the box&apos;s margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a <em>decorating box</em> never draws over its own box decoration."
        }]
    },
    "text-decoration-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style",
        "SUMMARY": "The <strong><code>text-decoration-style</code></strong> CSS property defines the style of the lines specified by <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line\" title=\"The text-decoration-line CSS property sets what kind of line decorations are added to an element.\"><code>text-decoration-line</code></a>. The style applies to all lines: there is no way to define different styles for each of the lines defined by <code>text-decoration-line</code>.",
        "VALUES": [{
            "value": "<code>solid double dotted dashed wavy</code>",
            "description": "Is one of the following keywords :\n <table class=\"standard-table\">\n  <thead>\n   <tr>\n    <th scope=\"col\">Keyword</th>\n    <th scope=\"col\">Description</th>\n    <th scope=\"col\">Comment</th>\n   </tr>\n  </thead>\n  <tbody>\n   <tr>\n    <td><code>solid</code></td>\n    <td>Draws a single line</td>\n    <td>&#xA0;</td>\n   </tr>\n   <tr>\n    <td><code>double</code></td>\n    <td>Draws a double line</td>\n    <td>&#xA0;</td>\n   </tr>\n   <tr>\n    <td><code>dotted</code></td>\n    <td>Draws a dotted line</td>\n    <td>&#xA0;</td>\n   </tr>\n   <tr>\n    <td><code>dashed</code></td>\n    <td>Draws a dashed line</td>\n    <td>&#xA0;</td>\n   </tr>\n   <tr>\n    <td><code>wavy</code></td>\n    <td>Draws a wavy line</td>\n    <td>&#xA0;</td>\n   </tr>\n   <tr>\n    <td><code>-moz-none</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span><code> </code></td>\n    <td>Do not draw a line</td>\n    <td><strong>Do not use</strong><strong> :</strong> use <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line\" title=\"The text-decoration-line CSS property sets what kind of line decorations are added to an element.\"><code>text-decoration-line</code></a><code>: none</code> instead</td>\n   </tr>\n  </tbody>\n </table>\n "
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating to reuse the value calculated on the parent element."
        }]
    },
    "text-emphasis": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis",
        "SUMMARY": "The <strong><code>text-emphasis</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property for setting <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style\" title=\"The text-emphasis-style CSS property defines the type of emphasis used. It can also be set, and reset, using the text-emphasis shorthand.\"><code>text-emphasis-style</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color\" title=\"The text-emphasis-color CSS property defines the color used to draw an emphasis mark. It can also be set, and reset, using the text-emphasis shorthand.\"><code>text-emphasis-color</code></a> in one declaration. This property will apply the specified emphasis mark to each character of the element's text, except separator characters, like spaces,  and control characters.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "No emphasis marks."
        }, {
            "value": "<code>filled</code>",
            "description": "The shape is filled with solid color. If neither <code>filled</code> nor <code>open</code> is present, this is the default."
        }, {
            "value": "<code>open</code>",
            "description": "The shape is hollow."
        }, {
            "value": "<code>dot</code>",
            "description": "Display small circles as marks. The filled dot is <code>&apos;&#x2022;&apos;</code> (<code>U+2022</code>), and the open dot is <code>&apos;&#x25E6;&apos;</code> (<code>U+25E6</code>)."
        }, {
            "value": "<code>circle</code>",
            "description": "Display large circles as marks. The filled circle is <code>&apos;&#x25CF;&apos;</code> (<code>U+25CF</code>), and the open circle is <code>&apos;&#x25CB;&apos;</code> (<code>U+25CB</code>). This is the default shape in horizontal writing modes when no other shape is given."
        }, {
            "value": "<code>double-circle</code>",
            "description": "Display double circles as marks. The filled double-circle is <code>&apos;&#x25C9;&apos;</code> (<code>U+25C9</code>), and the open double-circle is <code>&apos;&#x25CE;&apos;</code> (<code>U+25CE</code>)."
        }, {
            "value": "<code>triangle</code>",
            "description": "Display triangles as marks. The filled triangle is <code>&apos;&#x25B2;&apos;</code> (<code>U+25B2</code>), and the open triangle is <code>&apos;&#x25B3;&apos;</code> (<code>U+25B3</code>)."
        }, {
            "value": "<code>sesame</code>",
            "description": "Display sesames as marks. The filled sesame is <code>&apos;&#xFE45;&apos;</code> (<code>U+FE45</code>), and the open sesame is <code>&apos;&#xFE46;&apos;</code> (<code>U+FE46</code>). This is the default shape in vertical writing modes when no other shape is given."
        }, {
            "value": "<code>&lt;string&gt;</code>",
            "description": "Display the given string as marks. Authors should not specify more than one<em> character</em> in <code>&lt;string&gt;</code>. The UA may truncate or ignore strings consisting of more than one grapheme cluster."
        }, {
            "value": "<code>&lt;color&gt;</code>",
            "description": "Defines the color of the mark. If no color is present, it defaults to <code>currentColor</code>."
        }]
    },
    "text-emphasis-color": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color",
        "SUMMARY": "The <strong><code>text-emphasis-color</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the color used to draw an emphasis mark. It can also be set, and reset, using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis\" title=\"The text-emphasis CSS property is a shorthand&#xA0;property for setting text-emphasis-style and text-emphasis-color in one declaration. This property will apply the specified emphasis mark to each character of the element's text, except separator characters, like spaces,&#xA0; and control characters.\"><code>text-emphasis</code></a> shorthand.",
        "VALUES": [{
            "value": "<code>&lt;color&gt;</code>",
            "description": "Defines the color of the mark. If no color is present, it defaults to <code>currentColor</code>."
        }]
    },
    "text-emphasis-position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position",
        "SUMMARY": "The <strong><code>text-emphasis-position</code></strong> <a title=\"CSS\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property describes where emphasis marks are drawn at. The effect of emphasis marks on the line height is the same as for ruby text: if there isn't enough place, the line height is increased.",
        "VALUES": [{
            "value": "<code><dfn>over</dfn></code>",
            "description": "Draw marks over the text in horizontal writing mode."
        }, {
            "value": "<code><dfn>under</dfn></code>",
            "description": "Draw marks under the text in horizontal writing mode."
        }, {
            "value": "<code><dfn>right</dfn></code>",
            "description": "Draws marks to the right of the text in vertical writing mode."
        }, {
            "value": "<code><dfn>left</dfn></code>",
            "description": "Draw marks to the left of the text in vertical writing mode."
        }]
    },
    "text-emphasis-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style",
        "SUMMARY": "The <strong><code>text-emphasis-style</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the type of emphasis used. It can also be set, and reset, using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis\" title=\"The text-emphasis CSS property is a shorthand&#xA0;property for setting text-emphasis-style and text-emphasis-color in one declaration. This property will apply the specified emphasis mark to each character of the element's text, except separator characters, like spaces,&#xA0; and control characters.\"><code>text-emphasis</code></a> shorthand.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "No emphasis marks."
        }, {
            "value": "<code>filled</code>",
            "description": "The shape is filled with solid color. If neither <code>filled</code> nor <code>open</code> is present, this is the default."
        }, {
            "value": "<code>open</code>",
            "description": "The shape is hollow."
        }, {
            "value": "<code>dot</code>",
            "description": "Display small circles as marks. The filled dot is <code>&apos;&#x2022;&apos;</code> (<code>U+2022</code>), and the open dot is <code>&apos;&#x25E6;&apos;</code> (<code>U+25E6</code>)."
        }, {
            "value": "<code>circle</code>",
            "description": "Display large circles as marks. The filled circle is <code>&apos;&#x25CF;&apos;</code> (<code>U+25CF</code>), and the open circle is <code>&apos;&#x25CB;&apos;</code> (<code>U+25CB</code>)."
        }, {
            "value": "<code>double-circle</code>",
            "description": "Display double circles as marks. The filled double-circle is <code>&apos;&#x25C9;&apos;</code> (<code>U+25C9</code>), and the open double-circle is <code>&apos;&#x25CE;&apos;</code> (<code>U+25CE</code>)."
        }, {
            "value": "<code>triangle</code>",
            "description": "Display triangles as marks. The filled triangle is <code>&apos;&#x25B2;&apos;</code> (<code>U+25B2</code>), and the open triangle is <code>&apos;&#x25B3;&apos;</code> (<code>U+25B3</code>)."
        }, {
            "value": "<code>sesame</code>",
            "description": "Display sesames as marks. The filled sesame is <code>&apos;&#xFE45;&apos;</code> (<code>U+FE45</code>), and the open sesame is <code>&apos;&#xFE46;&apos;</code> (<code>U+FE46</code>)."
        }, {
            "value": "<code>&lt;string&gt;</code>",
            "description": "Display the given string as marks. Authors should not specify more than one<em> character</em> in <code>&lt;string&gt;</code>. The UA may truncate or ignore strings consisting of more than one grapheme cluster."
        }]
    },
    "text-indent": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent",
        "SUMMARY": "The <strong><code>text-indent</code></strong> property specifies the amount of indentation (empty space) should be left before lines of text in a block. By default, this controls the indentation of only the first formatted line of the block, but the <code>hanging</code> and <code>each-line</code> keywords can be used to change this behavior.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Indentation is specified as an absolute <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>. Negative values are allowed. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> values for possible units."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Indentation is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the containing block width."
        }, {
            "value": "<code>each-line</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Indentation affects the first line of the block container as well as each line after a <em>forced line break</em> , but does not affect lines after a <em>soft wrap break</em> ."
        }, {
            "value": "<code>hanging</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Inverts which lines are indented. All lines <em>except</em> the first line will be indented."
        }]
    },
    "text-orientation": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation",
        "SUMMARY": "The <strong><code>text-orientation</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a> is not <code>horizontal-tb</code>. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.",
        "VALUES": [{
            "value": "<code>mixed</code>",
            "description": "This keyword leads to have characters for horizontal-only scripts being turned 90&#xB0;, while the glyphs for vertical scripts are laid out naturally."
        }, {
            "value": "<code>upright</code>",
            "description": "This keyword leads to have characters for horizontal-only scripts to be laid out naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword lead all characters to be considered as ltr: the used value of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> is <code>ltr</code>, whatever the user could try to set it to."
        }, {
            "value": "<code>sideways</code>",
            "description": "This keyword leads to have characters laid out like if they were laid out horizontally, but with the whole line rotated 90&#xB0; to the right if <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a> is <code>vertical-rl</code> or to the left, if it is <code>vertical-lr</code>."
        }, {
            "value": "<code>sideways-right</code>",
            "description": "An alias to <code>sideways</code> that is kept for compatibility purpose."
        }, {
            "value": "<code>use-glyph-orientation</code>",
            "description": "On SVG elements, this keyword leads to use the value of the deprecated SVG properties <code>glyph-orientation-vertical</code> and <code>glyph-orientation-horizontal</code>."
        }]
    },
    "text-overflow": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow",
        "SUMMARY": "The <strong><code>text-overflow</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis ('<code>…</code>', <code style=\"text-transform: uppercase;\">U+2026 Horizontal Ellipsis</code>), or display a custom string.",
        "VALUES": [{
            "value": "<code>clip</code>",
            "description": "This keyword value indicates to truncate the text at the limit of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model\">content area</a>, therefore the truncation can happen in the middle of a character. To truncate at the transition between two characters, the empty string value (<code>&apos;&apos;</code>) must be used. The value <code>clip</code> is the default for this property."
        }, {
            "value": "<code>ellipsis</code>",
            "description": "This keyword value indicates to display an ellipsis (<code>&apos;&#x2026;&apos;</code>, <code style=\"text-transform: uppercase;\">U+2026 Horizontal Ellipsis</code>) to represent clipped text. The ellipsis is displayed inside the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model\">content area</a>, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped."
        }, {
            "value": "<code>&lt;string&gt;</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The <a title=\"The &lt;string&gt; CSS data type represents a string. It is formed by a Unicode characters delimited by either double (&quot;) or single (&apos;) 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.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/string\"><code>&lt;string&gt;</code></a> to be used to represent clipped text. The string is displayed inside the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model\">content area</a>, shortening more the size of the displayed text. If there is not enough place to display the string itself, it is clipped."
        }, {
            "value": "<code>fade</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge."
        }, {
            "value": "<code>fade(&#xA0;&lt;length&gt; | &lt;percentage&gt; )</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge."
        }]
    },
    "text-rendering": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering",
        "SUMMARY": "The <strong><code>text-rendering</code></strong> CSS property provides information to the rendering engine about what to optimize for when rendering text.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table."
        }, {
            "value": "<code>optimizeSpeed</code>",
            "description": "The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures."
        }, {
            "value": "<code>optimizeLegibility</code>",
            "description": "The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures."
        }, {
            "value": "<code>geometricPrecision</code>",
            "description": "\n <p>The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts &#x2014; such as kerning &#x2014; don&apos;t scale linearly. So this value can make text using those fonts look good.</p>\n\n <p>In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform&apos;s font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn&apos;t explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.</p>\n\n <p>But the <code>geometricPrecision</code> property &#x2014; when fully supported by the rendering engine &#x2014; lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect&#x2014;neither rounded up nor down to the nearest font size supported by Windows or Linux.</p>\n\n <p class=\"note\"><strong>Hinweis</strong>: WebKit precisely applies the specified value, but Gecko treats the value the same as <code>optimizeLegibility</code>.</p>\n "
        }]
    },
    "text-shadow": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow",
        "SUMMARY": "The <strong><code>text-shadow</code></strong> property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>text-decorations</code></a> of the element.",
        "VALUES": [{
            "value": "&lt;color&gt;",
            "description": "Optional. Can be specified either before or after the offset values. If the color is not specified, a UA-chosen color will be used. <div class=\"note\"><strong>Note:</strong>&#xA0;If you want to ensure consistency across browsers, explicitly specify a color.</div>"
        }, {
            "value": "&lt;offset-x&gt; &lt;offset-y&gt;",
            "description": "Required. These <code>length</code>&#xA0;values specify the shadow&apos;s offset from the text. <code>&lt;offset-x&gt;</code> specifies the horizontal distance; a negative value places the shadow to the left of the text. <code>&lt;offset-y&gt;</code> specifies the vertical distance; a negative value places the shadow above the text. If both values are <code>0</code>, then the shadow is placed behind the text (and may generate a blur effect when <code>&lt;blur-radius&gt;</code> is set).<br>\n To find out what units you can use, see <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>."
        }, {
            "value": "&lt;blur-radius&gt;",
            "description": "Optional. This is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value. If not specified, it defaults to <code>0</code>. The higher this value, the bigger the blur; the shadow becomes wider and lighter."
        }]
    },
    "text-size-adjust": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust",
        "SUMMARY": "The <strong><code>text-size-adjust</code></strong> property allows control over the text inflation algorithm used on some mobile devices. As this property is non-standard, it must be prefixed: <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, and <code>-ms-text-size-adjust</code>.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "Disables the browser&apos;s inflation algorithm. On old WebKit-based desktop browsers (Chrome&#x2264;26, Safari&#x2264;5), this will instead prevent the user from zooming the webpage in or out."
        }, {
            "value": "<code>auto</code>",
            "description": "Enables the browser&apos;s inflation algorithm. This value is used to cancel a <code>none</code> value previously set with CSS."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Enables the browser&apos;s inflation algorithm, specifying a percentage value with which to increase the font size."
        }]
    },
    "text-transform": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform",
        "SUMMARY": "The <strong><code>text-transform</code></strong> CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.",
        "VALUES": [{
            "value": "<code>capitalize</code>",
            "description": "\n <p>Is a keyword forcing the first <em>letter</em> of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element&apos;s text. A letter is any Unicode character part of the Letter or Number general categories <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span> : it excludes any punctuation marks or symbols at the beginning of the word.</p>\n\n <div class=\"note\">Authors should not expect <code class=\"css\">capitalize</code> to follow language-specific titlecasing conventions (such as skipping articles in English).</div>\n "
        }, {
            "value": "<code>uppercase</code>",
            "description": "Is a keyword forcing all characters to be converted to uppercase."
        }, {
            "value": "<code>lowercase</code>",
            "description": "Is a keyword forcing all characters to be converted to lowercase."
        }, {
            "value": "<code>none</code>",
            "description": "Is a keyword preventing the case of all characters to be changed."
        }, {
            "value": "<code>full-width</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Is a keyword forcing the writing of a character, mainly ideograms and latin scripts inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese)."
        }]
    },
    "text-underline-position": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position",
        "SUMMARY": "The <a href=\"https://developer.mozilla.org/en-US/docs/CSS\">CSS</a> <strong><code>text-underline-position</code></strong> property specifies the position of the underline which is set using the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration\" title=\"The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink. Underline and overline decorations are positioned under the text, line-through over it.\"><code>text-decoration</code></a> property <code>underline</code> value.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "This keyword allows the browser to use an algorithm to choose between <code>under</code> and <code>alphabetic</code>."
        }, {
            "value": "<code>under</code>",
            "description": "This keyword forces the line to be set below the <em>alphabetic baseline</em>, at a position where it won&apos;t cross any descender. This is useful to prevent chemical or mathematical formulas, which make a large use of subscripts, to be illegible."
        }, {
            "value": "<code>left</code>",
            "description": "In vertical writing-modes, this keyword forces the line to be placed on the <em>left</em> of the characters. In horizontal writing-modes, it is a synonym of <code>under.</code>"
        }, {
            "value": "<code>right</code>",
            "description": "In vertical writing-modes, this keyword forces the line to be placed on the <em>right</em> of the characters. In horizontal writing-modes, it is a synonym of <code>under.</code>"
        }, {
            "value": "<code>auto-pos</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "This keyword is a synonym of <code>auto</code> which must be used instead"
        }, {
            "value": "<code>above</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "This keyword forces the line to be above the text. When used with East-Asian text, using the <code>auto</code> keyword will lead to a similar effect."
        }, {
            "value": "<code>below</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "This keyword forces the line to be under the text. When used with alphabetic text, using the <code>auto</code> keyword will lead to a similar effect."
        }]
    },
    "top": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/top",
        "SUMMARY": "The <strong><code>top</code></strong> CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "Is a negative, null or positive <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> that represents:\n <ul>\n  <li>for <em>absolutely positioned elements</em>, the distance to the top edge of the containing block;</li>\n  <li>for <em>relatively positioned elements</em>, the offset that the element is moved below its position in the normal flow if it wasn&apos;t positioned.</li>\n </ul>\n "
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> of the containing block&apos;s height, used as described in the <a href=\"#Summary\">summary</a>."
        }, {
            "value": "<code>auto</code>",
            "description": "Is a keyword that represents:\n <ul>\n  <li>for absolutely positioned elements, the position the element based on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a> property and treat <code>height: auto</code> as a height based on the content.</li>\n  <li>for relatively positioned elements, the offset the element from its original position based on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a> property, or if <code>bottom</code> is also <code>auto</code>, do not offset it at all.</li>\n </ul>\n "
        }, {
            "value": "<code>inherit</code>",
            "description": "Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> or the <code>auto</code> keyword."
        }]
    },
    "touch-action": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action",
        "SUMMARY": "The <strong><code>touch-action</code></strong> CSS property specifies whether, and in what ways, a given region can be manipulated by the user via a touchscreen (for instance, by panning or zooming features built into the browser).",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "Enable browser handling of all panning and zooming gestures."
        }, {
            "value": "<code>none</code>",
            "description": "Disable browser handling of all panning and zooming gestures."
        }, {
            "value": "<code>pan-x</code>",
            "description": "Enable single-finger horizontal panning gestures. May be combined with&#xA0;<strong>pan-y, pan-up,</strong>&#xA0;<strong>pan-down&#xA0;</strong>and/or&#xA0;<strong>pinch-zoom</strong>."
        }, {
            "value": "<code>pan-y</code>",
            "description": "Enable single-finger vertical panning gestures. May be combined with&#xA0;<strong>pan-x, pan-left, </strong><strong>pan-right</strong>&#xA0;and/or&#xA0;<strong>pinch-zoom</strong>."
        }, {
            "value": "<code>manipulation</code>",
            "description": "Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom.&#xA0;Disabling double-tap to zoom removes the need for browsers to delay&#xA0;the generation of <strong>click</strong>&#xA0;events when the user taps the screen. This is an alias for &quot;<strong>pan-x pan-y pinch-zoom</strong>&quot; (which, for compatibility, is itself still valid)."
        }, {
            "value": "<code>pan-left</code>, <code>pan-right,pan-up,pan-down</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling &quot;up&quot; (<strong>pan-up</strong>)&#xA0;means that the user is dragging their finger downward on the screen surface, and likewise&#xA0;<strong>pan-left</strong>&#xA0;means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example,&#xA0;<strong>&quot;</strong><strong>pan-left pan-right</strong>&quot; is invalid since&#xA0;&quot;<strong>pan-x</strong>&quot; is simpler, but&#xA0;&quot;<strong>pan-left pan-down</strong>&quot; is valid)."
        }, {
            "value": "<code>pinch-zoom</code>",
            "description": "Enable multi-finger panning and zooming of the page. This may be combined with any of the&#xA0;<strong>pan-</strong>&#xA0;values."
        }]
    },
    "transform": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
        "SUMMARY": "The CSS <strong><code>transform</code></strong> property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.",
        "VALUES": [{
            "value": "<a name=\"&lt;transform-function&gt;\" id=\"&lt;transform-function&gt;\"><code>&lt;transform-function&gt;</code></a>",
            "description": "One or more of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function\">CSS transform functions</a> to be applied, see below. Composite transforms are effectively applied in order from right to left."
        }, {
            "value": "<a name=\"none\" id=\"none\"><code>none</code></a>",
            "description": "Specifies that no transform should be applied."
        }]
    },
    "transform-box": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box",
        "SUMMARY": "The <strong><code>transform-box</code></strong> property defines the layout box, to which the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform\" title=\"The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.\"><code>transform</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\" title=\"The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)\"><code>transform-origin</code></a> properties relate to.",
        "VALUES": [{
            "value": "<code>border-box</code>",
            "description": "Uses the border box as reference box. The reference box of a table is the border box of its table wrapper box, not its table box."
        }, {
            "value": "<code>fill-box</code>",
            "description": "Uses the object bounding box as reference box."
        }, {
            "value": "<code>view-box</code>",
            "description": "Uses the nearest <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/SVG\" class=\"glossaryLink\" title=\"SVG: Scalable Vector Graphics (SVG) is a 2D vector image format based on an XML syntax.\">SVG</a> viewport as reference box. If a <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox\">viewBox</a></code> attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute."
        }]
    },
    "transform-origin": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin",
        "SUMMARY": "The <code>transform-origin</code> property lets you modify the origin for transformations of an element. For example, the transform-origin of the <code>rotate()</code> function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)",
        "VALUES": [{
            "value": "<em>x-offset</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> describing how far from the left edge of the box the origin of the transform is set."
        }, {
            "value": "<em>offset-keyword</em>",
            "description": "Is one of the <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> or <code>center</code> keyword describing the corresponding offset."
        }, {
            "value": "<em>y-offset</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> or a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> describing how far from the top edge of the box the origin of the transform is set."
        }, {
            "value": "<em>x-offset-keyword</em>",
            "description": "Is one of the <code>left</code>, <code>right</code> or <code>center</code> keyword describing how far from the left edge of the box the origin of the transform is set."
        }, {
            "value": "<em>y-offset-keyword</em>",
            "description": "Is one of the <code>top</code>, <code>bottom</code> or <code>center</code> keyword describing how far from the top edge of the box the origin of the transform is set."
        }, {
            "value": "<em>z-offset</em>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> (and never a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a> which would make the statement invalid) describing how far from the user eye the z=0 origin is set."
        }]
    },
    "transform-style": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style",
        "SUMMARY": "The<strong> <code>transform-style</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.",
        "VALUES": [{
            "value": "<code>preserve-3d</code>",
            "description": "Indicates that the children of the element should be positioned in the 3D-space."
        }, {
            "value": "<code>flat</code>",
            "description": "Indicates that the children of the element are lying in the plane of the element itself."
        }]
    },
    "transition": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transition",
        "SUMMARY": "The <strong><code>transition</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS </a>property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties\">shorthand property</a> for <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property\" title=\"The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.\"><code>transition-property</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration\" title=\"The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.\"><code>transition-duration</code></a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function\" title=\"The transition-timing-function CSS property is used to describe how the intermediate values of the CSS&#xA0;properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.\"><code>transition-timing-function</code></a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay\" title=\"The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.\"><code>transition-delay</code></a>. It enables you to define the transition between two states of an element. Different states may be defined using <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\" title=\"https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes\">pseudo-classes</a> like <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:hover\" title=\"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 &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:hover</code></a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:active\" title=\"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&#xA0;the mouse button and releasing&#xA0;it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on &lt;a&gt; and &lt;button&gt; HTML&#xA0;elements, but may not be limited to just those.\"><code>:active</code></a> or dynamically set using JavaScript.",
        "VALUES": []
    },
    "transition-delay": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay",
        "SUMMARY": "The <strong><code>transition-delay</code></strong> CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions\">transition effect</a>.",
        "VALUES": [{
            "value": "<code>&lt;time&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/time\" title=\"The &lt;time&gt; CSS data type denotes time dimensions expressed in seconds or milliseconds. They consists of a&#x200B; &#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&lt;number&gt; immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number.\"><code>&lt;time&gt;</code></a> denoting the amount of time to wait between a property&apos;s value changing and the start of the animation effect."
        }]
    },
    "transition-duration": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration",
        "SUMMARY": "The <strong><code>transition-duration</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is <code>0s</code>, meaning that no animation will occur.",
        "VALUES": [{
            "value": "<code>&lt;time&gt;</code>",
            "description": "Is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/time\" title=\"The &lt;time&gt; CSS data type denotes time dimensions expressed in seconds or milliseconds. They consists of a&#x200B; &#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&lt;number&gt; immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number.\"><code>&lt;time&gt;</code></a> denoting the amount of time the transition from the old value of a property to the new value should take. A time of <code>0s</code> indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid."
        }]
    },
    "transition-property": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property",
        "SUMMARY": "The <strong><code>transition-property</code> </strong>CSS property is used to specify the names of CSS properties to which a <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions\">transition effect</a> should be applied.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "No properties will transition."
        }, {
            "value": "<code>all</code>",
            "description": "All properties that can have an animated transition will do so."
        }, {
            "value": "<code>IDENT</code>",
            "description": "A string identifying the property to which a transition effect should be applied when its value changes. This identifier is composed by case-insensitive letters&#xA0;<code>a</code> to <code>z</code>, numbers <code>0</code> to <code>9</code>, an underscore (<code>_</code>) or a dash(<code>-</code>). The first non-dash character must be a letter (that is:&#xA0;no number at the beginning of it, even preceded by a dash). Also, two dashes are forbidden at the beginning of the identifier."
        }]
    },
    "transition-timing-function": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function",
        "SUMMARY": "The <strong><code>transition-timing-function</code></strong> CSS property is used to describe how the intermediate values of the CSS properties being affected by a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions\" title=\"en/CSS/CSS transitions\">transition effect</a> are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.",
        "VALUES": [{
            "value": "<code>&lt;timing-function&gt;</code>",
            "description": "Each <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function\" title=\"The &lt;single-transition-timing-function&gt; 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.\"><code>&lt;timing-function&gt;</code></a> represents the timing function to link to the corresponding property to transition, as defined in <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property\" title=\"The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.\"><code>transition-property</code></a>."
        }]
    },
    "translation-value": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/translation-value",
        "SUMMARY": "Technical review completed.",
        "VALUES": []
    },
    "unicode-bidi": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi",
        "SUMMARY": "The <strong><code>unicode-bidi</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property together with the <a title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\"><code>direction</code></a> property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "The element does not offer a additional level of embedding with respect to the bidirectional algorithm. For inline elements implicit reordering works across element boundaries."
        }, {
            "value": "<code>embed</code>",
            "description": "If the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> property."
        }, {
            "value": "<code>bidi-override</code>",
            "description": "For inline elements this creates an override. For block container elements this creates an override for inline-level descendants not within another block container element. This means that inside the element, reordering is strictly in sequence according to the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> property; the implicit part of the bidirectional algorithm is ignored."
        }, {
            "value": "<code>isolate</code>",
            "description": "This keyword indicates that the element&apos;s container directionality should be calculated without considering the content of this element. The element is therefore <em>isolated</em> from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several <code>U+FFFC Object Replacement Character</code>, i.e. like an image."
        }, {
            "value": "<code>isolate-override</code>",
            "description": "This keyword applies the isolation behavior of the <code>isolate</code> keyword to the surrounding content and the override behavior of the <code>bidi-override</code> keyword to the inner content."
        }, {
            "value": "<code>plaintext</code>",
            "description": "This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.<br>\n This value allows to display data which has already formatted using a tool following the Unicode Bidirectional Algorithm."
        }]
    },
    "unset": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/unset",
        "SUMMARY": "The <code>unset</code> CSS keyword is the combination of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/initial\" title=\"The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.\"><code>initial</code></a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/inherit\" title=\"The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.\"><code>inherit</code></a> keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/all\" title=\"The CSS all shorthand property resets all properties, apart from&#xA0;unicode-bidi and direction, to their initial or inherited value.\"><code>all</code></a>. This keyword <em>resets</em> the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the <code>inherit</code> keyword in the first case and like the <code>initial</code> keyword in the second case.",
        "VALUES": []
    },
    "user-select": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/user-select",
        "SUMMARY": "Controls the actual <a href=\"https://developer.mozilla.org/en-US/docs/DOM/Selection\">Selection</a> operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property <code>user-focus</code> was proposed in <a href=\"http://www.w3.org/TR/2000/WD-css3-userint-20000216\">early drafts of a predecessor of css3-ui</a> but was rejected by the working group.",
        "VALUES": [{
            "value": "<code>none</code>",
            "description": "The text of the element and sub-elements will not be able to be selected. <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Selection\">Selection</a> can contain these elements. Starting with Firefox 21 <code>none</code> behaves like <code>-moz-none</code>, so selection can be re-enabled on sub-elements using <code>-moz-user-select:text</code>."
        }, {
            "value": "<code>auto</code>",
            "description": "The text will be selected according to the browser&apos;s default properties."
        }, {
            "value": "<code>text</code>",
            "description": "The text can be selected by the user."
        }, {
            "value": "<code>-moz-none</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "The text of the element and sub-elements will appear as if they cannot be selected. <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Selection\">Selection</a> can contain these elements. Selection can be re-enabled on sub-elements using <code>-moz-user-select:text</code>. Starting with Firefox 21 <code>none</code> behaves like <code>-moz-none</code>."
        }, {
            "value": "<code>all</code>",
            "description": "In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected."
        }, {
            "value": "<code>contain</code><br>\n <code>element</code><span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span> (IE-specific alias)",
            "description": "Enables selection to start within the element; however, the selection will be contained by the bounds of that element. Supported only in Internet Explorer."
        }]
    },
    "var()": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/var",
        "SUMMARY": "The <strong><code>var()</code></strong> function can be used instead of any part of a value in any property on an element. The var() function can not be used as property names, selectors or anything else besides property values. (Doing so usually produces invalid syntax or else a value whose meaning has no connection to the variable.)",
        "VALUES": [{
            "value": "&lt;custom-property-name&gt;",
            "description": "The production corresponds to this: It&#x2019;s defined as any valid identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here."
        }, {
            "value": "&lt;declaration-value&gt;",
            "description": "The &lt;declaration-value&gt; production matches any sequence of one or more tokens.&#xA0; So, as long as the sequence does not contain &lt;bad-string-token&gt;, &lt;bad-url-token&gt;, unmatched &lt;)-token&gt;, &lt;]-token&gt;, or &lt;}-token&gt;, or top-level &lt;semicolon-token&gt; tokens or &lt;delim-token&gt; tokens with a value of &quot;!&quot; ,it represents the entirety of what a valid declaration can have as its value."
        }]
    },
    "vertical-align": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align",
        "SUMMARY": "The <strong><code>vertical-align</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies the vertical alignment of an inline or table-cell box.",
        "VALUES": [{
            "value": "<code>baseline</code>",
            "description": "Aligns the baseline of the element with the baseline of its parent. The baseline of some <a href=\"https://developer.mozilla.org/en-US/docs/CSS/Replaced_element\" title=\"CSS/Replaced_element\">replaced elements</a>, like <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\" title=\"The HTML &lt;textarea&gt; element represents a multi-line plain-text editing control.\"><code>&lt;textarea&gt;</code></a>, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other."
        }, {
            "value": "<code>sub</code>",
            "description": "Aligns the baseline of the element with the subscript-baseline of its parent."
        }, {
            "value": "<code>super</code>",
            "description": "Aligns the baseline of the element with the superscript-baseline of its parent."
        }, {
            "value": "<code>text-top</code>",
            "description": "Aligns the top of the element with the top of the parent element&apos;s font."
        }, {
            "value": "<code>text-bottom</code>",
            "description": "Aligns the bottom of the element with the bottom of the parent element&apos;s font."
        }, {
            "value": "<code>middle</code>",
            "description": "Aligns the middle of the element with the baseline plus half the x-height of the parent."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a>",
            "description": "Aligns the baseline of the element at the given length above the baseline of its parent."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\" title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\"><code>&lt;percentage&gt;</code></a>",
            "description": "Like &lt;length&gt; values, with the percentage being a percent of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/line-height\" title=\"On block level elements, the line-height property specifies the minimum height of line boxes within the element.\"><code>line-height</code></a> property."
        }, {
            "value": "<code>top</code>",
            "description": "Align the top of the element and its descendants with the top of the entire line."
        }, {
            "value": "<code>bottom</code>",
            "description": "Align the bottom of the element and its descendants with the bottom of the entire line."
        }, {
            "value": "<code>baseline</code> (and <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, and <code>&lt;percentage&gt;</code>)",
            "description": "Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned."
        }, {
            "value": "<code>top</code>",
            "description": "Align the top padding edge of the cell with the top of the row."
        }, {
            "value": "<code>middle</code>",
            "description": "Center the padding box of the cell within the row."
        }, {
            "value": "<code>bottom</code>",
            "description": "Align the bottom padding edge of the cell with the bottom of the row."
        }]
    },
    "visibility": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/visibility",
        "SUMMARY": "The <strong><code>visibility</code></strong> property can be used to hide an element while leaving the space where it would have been. It can also hide rows or columns of a table.",
        "VALUES": [{
            "value": "<code>visible</code>",
            "description": "Default value, the box is visible."
        }, {
            "value": "<code>hidden</code>",
            "description": "The box is invisible (fully transparent, nothing is drawn), but still affects layout.&#xA0; Descendants of the element will be visible if they have <code>visibility:visible</code> (this doesn&apos;t work in IE up to version 7)."
        }, {
            "value": "<code>collapse</code>",
            "description": "For table rows, columns, column groups, and row groups the row(s) or column(s) are hidden and the space they would have occupied is removed (as if <code><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\" title=\"The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.\"><code>display</code></a>: none</code> were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This was designed for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table. For XUL&#xA0;elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect. For other elements, <code>collapse</code> is treated the same as <code>hidden</code>."
        }]
    },
    "white-space": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/white-space",
        "SUMMARY": "The <strong><code>white-space</code></strong> property is used to describe how whitespace inside the element is handled.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes."
        }, {
            "value": "<code>nowrap</code>",
            "description": "Collapses whitespace as for <code>normal</code>, but suppresses line breaks (text wrapping) within text."
        }, {
            "value": "<code>pre</code>",
            "description": "Sequences of whitespace are preserved.&#xA0;Lines are only broken at newline characters in the source and at <a title=\"The HTML &lt;br&gt; element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"><code>&lt;br&gt;</code></a> elements."
        }, {
            "value": "<code>pre-wrap</code>",
            "description": "Sequences of whitespace are preserved. Lines are broken at newline characters, at <a title=\"The HTML &lt;br&gt; element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"><code>&lt;br&gt;</code></a>, and as necessary to fill line boxes."
        }, {
            "value": "<code>pre-line</code>",
            "description": "Sequences of whitespace are collapsed. Lines are broken at newline characters, at <a title=\"The HTML &lt;br&gt; element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"><code>&lt;br&gt;</code></a>, and as necessary to fill line boxes."
        }]
    },
    "widows": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/widows",
        "SUMMARY": "When a paragraph is split over two pages in <code>paged</code> media, the <strong><code>widows</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/CSS\" title=\"CSS\">CSS</a> property defines the minimum number of lines that must be left at the top of the second page. In typography, a <em>widow</em> is the last line of a paragraph appearing alone at the top of a new page. Setting the <code>widows</code> property allows the prevention of single-line widows.",
        "VALUES": [{
            "value": "<code>&lt;integer&gt;</code>",
            "description": "Denotes the minimum number of lines that can stay alone on the top of a new page when a paragraph is split. If the value is not <strong>positive</strong>, the declaration is invalid."
        }]
    },
    "width": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/width",
        "SUMMARY": "The <strong><code>width</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the width of the content area of an element. The <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area\">content area</a> is <em>inside</em> the padding, border, and margin of the element.",
        "VALUES": [{
            "value": "<code>&lt;length&gt;</code>",
            "description": "See <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> for possible units."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Specified as a <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> of containing block&apos;s width. If the width of the containing block depends on the width of the element, the resulting layout is undefined."
        }, {
            "value": "<code>border-box </code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "If present, the preceding <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> or <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> is applied to the element&apos;s border box."
        }, {
            "value": "<code>content-box</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "If present, the preceding <a title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\"><code>&lt;length&gt;</code></a> or <a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a> is applied to the element&apos;s content box."
        }, {
            "value": "<code>auto</code>",
            "description": "The browser will calculate and select a width for the specified element."
        }, {
            "value": "fill <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Use the&#xA0;<code>fill-available</code> inline size&#xA0;or&#xA0;<code>fill-available</code> block size, as appropriate to the writing mode."
        }, {
            "value": "<code>max-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic preferred width."
        }, {
            "value": "<code>min-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The intrinsic minimum width."
        }, {
            "value": "<code>available</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The containing block width minus horizontal margin, border and padding."
        }, {
            "value": "<code>fit-content</code> <span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "The larger of:\n <ul>\n  <li>the intrinsic minimum width</li>\n  <li>the smaller of the intrinsic preferred width and the available width</li>\n </ul>\n "
        }]
    },
    "will-change": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/will-change",
        "SUMMARY": "The <strong><code>will-change</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can set up appropriate optimizations ahead of time before the element is actually changed.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "This keyword expresses no particular intent; the user agent should apply whatever heuristics and optimizations it normally does."
        }, {
            "value": "<code>scroll-position</code>",
            "description": "Indicates that the author expects to animate or change the scroll position of the element in the near future."
        }, {
            "value": "<code>contents</code>",
            "description": "Indicates that the author expects to animate or change something about the element&#x2019;s contents in the near future."
        }, {
            "value": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;custom-ident&gt;</code></a>",
            "description": "Indicates that the author expects to animate or change the property with the given name on the element in the near future. If the property given is a shorthand, it indicates the expectation for all the longhands the shorthand expands to. It cannot be one of the following values: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, or <code>contents</code>. The spec doesn&apos;t define the behavior of particular value, but it is common for <code>transform</code> to be a compositing layer hint. <a href=\"https://github.com/operasoftware/devopera/pull/330\" class=\"external\">Chrome currently takes two actions</a>, given particular CSS property idents: establish a new compositing layer or a new <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/stacking_context\" class=\"glossaryLink\" title=\"stacking context: Stacking context&#xA0;refers to how&#xA0;elements on a webpage appear to sit&#xA0;on top of other elements, just as you can arrange index cards on your desk to lie side-by-side or overlap each other.\">stacking context</a>."
        }]
    },
    "word-break": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/word-break",
        "SUMMARY": "The<strong> <code>word-break</code></strong> CSS property is used to specify whether to break lines within words.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Use the default line break rule."
        }, {
            "value": "<code>break-all</code>",
            "description": "Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text."
        }, {
            "value": "<code>keep-all</code>",
            "description": "Don&apos;t allow word breaks for CJK text.&#xA0; Non-CJK text behavior is the same as for <code>normal</code>."
        }]
    },
    "word-spacing": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing",
        "SUMMARY": "The <strong><code>word-spacing</code></strong> <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a> property specifies the spacing behavior between tags and words.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "The normal inter-word space, as defined by the current font and/or the browser."
        }, {
            "value": "<code>&lt;length&gt;</code>",
            "description": "Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/length\" title=\"The &lt;length&gt; CSS data type denotes distance measurements. It is a &lt;number&gt; immediately followed by a length unit (px, em, pc, in, mm, &#x2026;). Like for any CSS dimension, there is no space between the unit literal and the number.&#xA0;The length unit is optional after the &lt;number&gt; 0.\"><code>&lt;length&gt;</code></a> value for possible units."
        }, {
            "value": "<code>&lt;percentage&gt;</code>",
            "description": "Specifies the additional spacing as a percentage of the affected character&#x2019;s advance width."
        }]
    },
    "writing-mode": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode",
        "SUMMARY": "The <strong><code>writing-mode</code></strong> property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.",
        "VALUES": [{
            "value": "<code>horizontal-tb</code>",
            "description": "Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line."
        }, {
            "value": "<code>vertical-rl</code>",
            "description": "Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line."
        }, {
            "value": "<code>vertical-lr</code>",
            "description": "Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line."
        }, {
            "value": "<code>sideways-rl</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Content flows vertically from top to bottom and all the glyphs, even those in vertical scripts, are set sideways toward the right."
        }, {
            "value": "<code>sideways-lr</code><span title=\"This is an experimental API that should not be used in production code.\"><i class=\"icon-beaker\"> </i></span>",
            "description": "Content flows vertically from top to bottom and all the glyphs, even those in vertical scripts, are set sideways toward the left."
        }, {
            "value": "<code>lr</code> <span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span>",
            "description": "Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>."
        }, {
            "value": "<code>lr-tb</code> <span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span>",
            "description": "Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>."
        }, {
            "value": "<code>rl</code> <span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span>",
            "description": "Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>."
        }, {
            "value": "<code>tb</code> <span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span>",
            "description": "Deprecated except for SVG1 documents. For CSS, use <code>vertical-lr</code>."
        }, {
            "value": "<code>tb-rl</code> <span title=\"This deprecated API should no longer be used, but will probably still work.\"><i class=\"icon-thumbs-down-alt\"> </i></span>",
            "description": "Deprecated except for SVG1 documents. For CSS, use <code>vertical-rl</code>."
        }]
    },
    "z-index": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/z-index",
        "SUMMARY": "The <strong><code>z-index</code></strong> property specifies the z-order of a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioned</a> element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.",
        "VALUES": [{
            "value": "<code>auto</code>",
            "description": "The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent&apos;s box."
        }, {
            "value": "<code>&lt;integer&gt;</code>",
            "description": "This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is <code>0</code>. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element."
        }]
    },
    "zoom": {
        "URL": "https://developer.mozilla.org/en-US/docs/Web/CSS/zoom",
        "SUMMARY": "The non-standard <dfn><code>zoom</code></dfn> CSS property can be used to control the magnification scale of an element.",
        "VALUES": [{
            "value": "<code>normal</code>",
            "description": "Render this element at its normal size."
        }, {
            "value": "<code>reset</code> <span title=\"This API has not been standardized.\"><i class=\"icon-warning-sign\"> </i></span>",
            "description": "Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd>-<kbd>-</kbd> or <kbd>Ctrl</kbd>+<kbd>+</kbd> keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink)."
        }, {
            "value": "<a title=\"The &lt;percentage&gt; 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 &lt;number&gt; immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn&apos;t a space between the &apos;%&apos; and the number.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/percentage\"><code>&lt;percentage&gt;</code></a>",
            "description": "Zoom factor. <code>100%</code> is equivalent to <code>normal</code>. Values larger than <code>100%</code> zoom in. Values smaller than <code>100%</code> zoom out."
        }, {
            "value": "<a title=\"The &lt;number&gt; CSS data type represents a number, either integer or fractional. Its syntax extends the one of the &lt;integer&gt; data value. To represent a fractional value, add the fractional part &#x2014; a &apos;.&apos; followed by one or several decimal digits &#x2014; to any &lt;integer&gt; data value. Like for &lt;integer&gt; data type, there isn&apos;t any unit associated to a &lt;number&gt;, which is not a CSS dimension.\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/number\"><code>&lt;number&gt;</code></a>",
            "description": "Zoom factor. Equivalent to the corresponding percentage (<code>1.0</code> = <code>100%</code> = <code>normal</code>). Values larger than <code>1.0</code> zoom in. Values smaller than <code>1.0</code> zoom out."
        }]
    }
}