From b08b36da142ca412c0c09eb7dc2d90aae388687d Mon Sep 17 00:00:00 2001 From: Saurabh Kathpalia Date: Wed, 5 Apr 2017 13:42:50 +0530 Subject: [PATCH 1/7] Scrapped summary and values of css properties from MDN to css.json --- .../default/WebPlatformDocs/css.json | 2 +- .../default/WebPlatformDocs/logo.svg | 244 +++++++++++++----- 2 files changed, 181 insertions(+), 65 deletions(-) diff --git a/src/extensions/default/WebPlatformDocs/css.json b/src/extensions/default/WebPlatformDocs/css.json index b422e7631d4..d8b9fa4f3f1 100644 --- a/src/extensions/default/WebPlatformDocs/css.json +++ b/src/extensions/default/WebPlatformDocs/css.json @@ -1 +1 @@ -{"DATETIME":"Fri, 24 Jul 2015 21:08:48 GMT","PROPERTIES":{"css/properties/align-content":{"SUMMARY":"

Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. ","URL":"https://www.webplatform.org/docs/css/properties/align-content","VALUES":[{"description":"

Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of empty space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) ","value":"center "},{"description":"

Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. ","value":"flex-end "},{"description":"

Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. ","value":"flex-start "},{"description":"

Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flex container are half the size of the other empty spaces. ","value":"space-around "},{"description":"

Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the empty space between any two adjacent lines is the same. ","value":"space-between "},{"description":"

Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size. ","value":"stretch "}]},"css/properties/align-items":{"SUMMARY":"

Sets the default alignment in the cross axis for all of the flex container's items, including anonymous flex items, similarly to how justify-content aligns items along the main axis. ","URL":"https://www.webplatform.org/docs/css/properties/align-items","VALUES":[{"description":"

If the flex item's inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. ","value":"baseline "},{"description":"

The flex item's margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) ","value":"center "},{"description":"

The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. ","value":"flex-end "},{"description":"

The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. ","value":"flex-start "},{"description":"

If the cross size property of the flex item is auto, its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: that if the flex container's height is constrained the stretch value may cause the contents of the flex item to overflow the item. ","value":"stretch "}]},"css/properties/align-self":{"SUMMARY":"

Allows the default alignment to be overridden for individual flex items. ","URL":"https://www.webplatform.org/docs/css/properties/align-self","VALUES":[{"description":"

Computes to the value of align-items on the element's parent, or stretch if the element has no parent. ","value":"auto "},{"description":"

If the flex item's inline axis is the same as the cross axis, this value is identical to flex-start.

Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. ","value":"baseline "},{"description":"

The flex item's margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) ","value":"center "},{"description":"

The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. ","value":"flex-end "},{"description":"

The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. ","value":"flext-start "},{"description":"

If the cross size property of the flex item is auto, its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: that if the flex container's height is constrained the stretch value may cause the contents of the flex item to overflow the item. ","value":"stretch "}]},"css/properties/alignment-adjust":{"SUMMARY":"

This property allows precise alignment of elements, such as graphics, that do not have a baseline-table or lack the desired baseline in their baseline-table. With the alignment-adjust property, the position of the baseline identified by the alignment-baseline can be explicitly determined. It also determines precisely the alignment point for each glyph within a textual element. ","URL":"https://www.webplatform.org/docs/css/properties/alignment-adjust","VALUES":[{"description":"

The alignment point is at the intersection of the start-edge of the element and the after-edge of the extended inline box of the element. This may include or not the line-height of the element, depending on the line-stacking-strategy. ","value":"after-edge "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the alphabetic baseline of the element. ","value":"alphabetic "},{"description":"

For each glyph corresponding to textual information within the element, the alignment-point is the intersection of the start-edge of the glyph box and the block-progression-direction position of the alignment point from the font. Padding, border or margin do not affect that alignment point. The alignment point of the inline-level element itself is at the intersection of the start-edge of the first inline box and the baseline identified by the ‘alignment-baseline’ property, if this baseline exists in the baseline-table for the element dominant-baseline. If that specific baseline does not exist, the user agent may use heuristics to determine where the missing baseline would be. ","value":"auto "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the dominant-baseline of the element. ","value":"baseline "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the before-edge of the extended inline box of the element. This may include or not the line-height of the element, depending on the line-stacking-strategy. ","value":"before-edge "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the central baseline of the element. ","value":"central "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the hanging baseline of the element. ","value":"hanging "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the ideographic baseline of the element. ","value":"ideographic "},{"description":"

The alignment-point is on the start-edge of the inline box. Its position along the start-edge relative to the intersection of the dominant-baseline and the start-edge is offset by the length value. The offset is opposite to the shift-direction (positive value) or in the shift-direction (negative value). A value of \"0cm\" makes the dominant-baseline the alignment point. ","value":"<length> "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the mathematical baseline of the element. ","value":"mathematical "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the middle baseline of the element. ","value":"middle "},{"description":"

The computed value of the property is this percentage multiplied by the computed line-height of the element. The alignment point is on the start-edge of the inline box. Its position along the start-edge relative to the intersection of the dominant-baseline and the start-edge is offset by the computed value. The offset is opposite to the shift-direction (positive value) or in the shift-direction (negative value). A value of \"0%\" makes the dominant-baseline the alignment point. ","value":"<percentage> "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the text-after-edge baseline of the element. ","value":"text-after-edge "},{"description":"

The alignment point is at the intersection of the start-edge of the element and the text-before-edge baseline of the element. ","value":"text-before-edge "}]},"css/properties/all-space-treatment":{"SUMMARY":"

Specifies the treatment of all consecutive white space characters (with no exception for line feed characters). ","URL":"https://www.webplatform.org/docs/css/properties/all-space-treatment","VALUES":[{"description":"

The white space characters are collapsed according to the rules described in white space processing. ","value":"collapse "},{"description":"

All white space characters are rendered as they are. ","value":"preserve "}]},"css/properties/animation":{"SUMMARY":"

Shorthand property to define a CSS animation, setting all parameters at once. ","URL":"https://www.webplatform.org/docs/css/properties/animation","VALUES":[{"description":"

A list of values for each of the individual animation properties. The animation name and duration are required; all other values are optional. Multiple animations can be assigned as a comma-separated list.

<single-animation-name>
Value of the animation-name property.
<single-animation-duration>
Value of the animation-duration property.
<single-animation-timing-function>
Value of the animation-timing-function property.
<single-animation-delay>
Value of the animation-delay property.
<single-animation-iteration-count>
Value of the animation-iteration-count property.
<single-animation-direction>
Value of the animation-direction property.
<single-animation-fill-mode>
Value of the animation-fill-mode property.

Note: The first <time> value is assigned to the animation-duration. The second <time> value is assigned to the animation-delay. ","value":"single-animation [, single-animation]* "}]},"css/properties/animation-delay":{"SUMMARY":"

Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied. ","URL":"https://www.webplatform.org/docs/css/properties/animation-delay","VALUES":[{"description":"

Can be specified in seconds or milliseconds, e.g., 2s or 150ms. Can also be a comma-separated list of delays, e.g., .25s, .5s, 1s, where each delay is applied to the corresponding ordinal position value of the animation-name property.

If the value is negative the animation will execute the moment it is applied, but will begin execution at the specified offset. That is, the animation appears to begin part-way through its cycle. ","value":"<time> "}]},"css/properties/animation-direction":{"SUMMARY":"

Defines whether an animation should run in reverse on some or all cycles. ","URL":"https://www.webplatform.org/docs/css/properties/animation-direction","VALUES":[{"description":"

The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction, thus reversing direction each cycle. The count to determine if an iteration is even or odd starts at one (odd). ","value":"alternate "},{"description":"

The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction, again reversing direction each cycle. The count to determine if an iteration is even or odd starts at one (odd). ","value":"alternate-reverse "},{"description":"

All iterations of the animation are played as specified. ","value":"normal "},{"description":"

All iterations of the animation are played in the reverse direction from the way they were specified. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation. ","value":"reverse "}]},"css/properties/animation-duration":{"SUMMARY":"

Defines the length of time an animation takes to complete one cycle. ","URL":"https://www.webplatform.org/docs/css/properties/animation-duration","VALUES":[{"description":"

Can be specified in seconds or milliseconds, e.g., 2s or 150ms. Can also be a comma-separated list of durations, e.g., .25s, .5s, 1s, where each duration is applied to the corresponding ordinal position value of the animation-name property.

The initial value of 0s means the animation takes no time; that is, it is applied instantaneously. When the duration is 0s (or 0ms), animation-fill-mode still applies, such that an animation filling backward will show the value of the 0% keyframe during any delay period, while an animation filling forward will retain the value specified at the 100% keyframe even if the animation was instantaneous. Also, animation events are still fired. ","value":"<time> "}]},"css/properties/animation-fill-mode":{"SUMMARY":"

Defines what values are applied by the animation outside the time it is executing (before and after the animation).

By default, an animation does not affect property values between the time it is applied (when the animation-name property is set on an element) and the time it begins execution (determined by the animation-delay property). Also, by default an animation does not affect property values after the animation ends (determined by the animation-duration property). The animation-fill-mode property can override this behavior. ","URL":"https://www.webplatform.org/docs/css/properties/animation-fill-mode","VALUES":[{"description":"

If the animation is delayed by animation-delay, properties assume values set by the first keyframe while waiting for the animation to start. These are either the values of the from keyframe (when animation-direction is normal or alternate) or those of the to keyframe (when animation-direction is reverse or alternate-reverse). When the animation ends, properties revert to their original state.
animation-direction first relevant keyframe
normal or alternate 0% or from
reverse or alternate-reverse 100% or to
","value":"backwards "},{"description":"

Values set by the first and last keyframes are applied before and after the animation. ","value":"both "},{"description":"

When the animation ends (as determined by its animation-iteration-count), properties retain the values set by the final keyframe. If animation-iteration-count is zero, apply the values that would start the first iteration.
animation-direction animation-iteration-count last keyframe encountered
normal even or odd 100% or to
reverse even or odd 0% or from
alternate even 0% or from
alternate odd 100% or to
alternate-reverse even 100% or to
alternate-reverse odd 0% or from
","value":"forwards "},{"description":"

Property values do not change before the animation starts, and they return to their original state when the animation ends. This is the default behavior. ","value":"none "}]},"css/properties/animation-iteration-count":{"SUMMARY":"

Specifies how many times an animation cycle should play. ","URL":"https://www.webplatform.org/docs/css/properties/animation-iteration-count","VALUES":[{"description":"

The animation plays the specified number of times. Can also be a comma-separated list of counts, e.g., 5, 2, 10, where each duration is applied to the corresponding ordinal position value of the animation-name property. Negative values are not allowed. You may specify non-integer values to play part of an animation cycle (for example 0.5 will play half of the animation cycle). ","value":"<single-animation-iteration-count> "},{"description":"

Loop the animation indefinitely. ","value":"infinite "}]},"css/properties/animation-name":{"SUMMARY":"

Defines the list of animations that apply to the element. ","URL":"https://www.webplatform.org/docs/css/properties/animation-name","VALUES":[{"description":"

No animation applies to the element. You can use this value to override any animations coming from the cascade. ","value":"none "},{"description":"

One or more comma-separated animation names. Each name is used to select the @keyframes rule that defines the animation. If the specified name does not match any @keyframes rule then no animation will be run for this name. In addition, when multiple animations update the same property, the animation listed last wins. ","value":"<single-animation-name> [, <single-animation-name>]* "}]},"css/properties/animation-play-state":{"SUMMARY":"

Defines whether an animation is running or paused. ","URL":"https://www.webplatform.org/docs/css/properties/animation-play-state","VALUES":[{"description":"

Pauses the animation. A paused animation continues to display the current state of the animation. ","value":"paused "},{"description":"

Plays the animation. If restarting a paused animation, the animation resumes from the current (paused) state. ","value":"running "}]},"css/properties/animation-timing-function":{"SUMMARY":"

Describes how the animation will progress over one cycle of its duration. ","URL":"https://www.webplatform.org/docs/css/properties/animation-timing-function","VALUES":[{"description":"

Specifies a cubic bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range. This function is used to specify custom timing functions. ","value":"cubic-bezier(0,0,1,1) "},{"description":"

Default. The animation begins and ends gradually; this value is equivalent to cubic-bezier(0.25,0.1,0.25,1). ","value":"ease "},{"description":"

The animation begins gradually and progresses at a steady rate; this value is equivalent to cubic-bezier(0.42,0,1,1). ","value":"ease-in "},{"description":"

The animation begins and ends gradually; equivalent to cubic-bezier(0.42,0,0.58,1). Note that this timing function is similar to ease, although the latter starts faster than it ends. ","value":"ease-in-out "},{"description":"

The animation begins at a steady rate then gradually ends; this value is equivalent to cubic-bezier(0,0,0.58,1). ","value":"ease-out "},{"description":"

The animation begins and progresses at a constant rate over the specified duration; this value is equivalent to cubic-bezier(0,0,1,1) ","value":"linear "},{"description":"

Equivalent to steps(1,end). ","value":"step-end "},{"description":"

Specifies a stepping function using two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0. The second optional is either the value start or end and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value end. ","value":"steps(3, end) "},{"description":"

Equivalent to steps(1,start). ","value":"step-start "}]},"css/properties/appearance":{"SUMMARY":"

Allows changing the style of any element to platform-based interface elements or vice versa. ","URL":"https://www.webplatform.org/docs/css/properties/appearance","VALUES":[{"description":"

The element is drawn like a button ","value":"button "},{"description":"

Firefox specific - but no effect in latest version ","value":"button-arrow-down "},{"description":"

Firefox specific - but no effect in latest version ","value":"button-arrow-next "},{"description":"

Firefox specific - but no effect in latest version ","value":"button-arrow-previous "},{"description":"

Firefox specific - but no effect in latest version ","value":"button-arrow-up "},{"description":"

Use button bevel theme for rendering the object. Seems to work only in mozilla based browsers ","value":"button-bevel "},{"description":"

Firefox specific - but no effect in latest version ","value":"button-focus "},{"description":"

No clear visual effect. ","value":"caret "},{"description":"

The element is drawn like a checkbox, including only the actual \"checkbox\" portion. ","value":"checkbox "},{"description":"

Firefox specific - but no effect in latest version ","value":"checkbox-container "},{"description":"

Firefox specific - but no effect in latest version ","value":"checkbox-small "},{"description":"","value":"dialog "},{"description":"","value":"listbox "},{"description":"

No special styling is applied. For Firefox note bug 649849 and bug 605985 ","value":"none "}]},"css/properties/backface-visibility":{"SUMMARY":"

Determines whether or not the “back” side of a transformed element is visible when facing the viewer. ","URL":"https://www.webplatform.org/docs/css/properties/backface-visibility","VALUES":[{"description":"

There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side). In this case, the property should be set to hidden to make the back face of the element opaque. ","value":"hidden "},{"description":"

The back face of an element is a transparent background, displaying a mirror image of the front face when the back face is observable. ","value":"visible "}]},"css/properties/background":{"SUMMARY":"

This background property is a shorthand property for setting the color, position, size, repeat, clip, origin, attachment, and image of the element.

The background- properties provide fundamental styles to an element, such as color, image, and position. CSS3 adds more properties for handling backgrounds, including properties that improve the mobile web experience. Many CSS background properties can be set, at the same time, with this background property. ","URL":"https://www.webplatform.org/docs/css/properties/background","VALUES":[{"description":"

Any of the values available to background-attachment property. The default value is scroll. ","value":"<attachment> "},{"description":"

Any of the values available to background-image property. The default value is none. ","value":"<bg-image> "},{"description":"

If one <box> value is present then it sets both background-origin and background-clip to that value. If two values are present, then the first sets background-origin and the second background-clip.

For background-clip, valid values are those available to background-clip property. The default value is border-box. For background-origin, valid values are those available to background-origin property. The default value is padding-box. ","value":"<box>{1,2} "},{"description":"

Any of the values available to background-color property. The default value is transparent. ","value":"<color> "},{"description":"

Any of the values available to background-position property. Otherwise, it is set to its initial value. ","value":"<position> [ / <bg-size> ]? "},{"description":"

Any of the values available to background-repeat property. The default value is repeat. ","value":"<repeat-style> "}]},"css/properties/background-attachment":{"SUMMARY":"

Defines if a background image scrolls with the content or stays fixed. ","URL":"https://www.webplatform.org/docs/css/properties/background-attachment","VALUES":[{"description":"

Background image stays fixed within the viewport and does not move when the element or the page is scrolled. ","value":"fixed "},{"description":"

Background image stays fixed with regard to the element’s contents and scrolls as the element is scrolled. ","value":"local "},{"description":"

Default. Background image scrolls with the object as the document is scrolled. ","value":"scroll "}]},"css/properties/background-blend-mode":{"SUMMARY":"

This property describes how the element's background images should blend with each other and the element's background color. The value is a list of blend modes that corresponds to each background image. Each element in the list will apply to the corresponding element of background-image. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough. ","URL":"https://www.webplatform.org/docs/css/properties/background-blend-mode","VALUES":[{"description":"

Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. ","value":"color "},{"description":"

Darkens the backdrop color to reflect the source color. Painting with white produces no change. ","value":"color-burn "},{"description":"

Brightens the backdrop color to reflect the source color. Painting with black produces no changes. ","value":"color-dodge "},{"description":"

The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged. ","value":"darken "},{"description":"

Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change. ","value":"difference "},{"description":"

Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change. ","value":"exclusion "},{"description":"

Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. ","value":"hard-light "},{"description":"

Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. ","value":"hue "},{"description":"

Selects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged. ","value":"lighten "},{"description":"

Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. ","value":"luminosity "},{"description":"

The source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color. ","value":"multiply "},{"description":"

This is the default attribute which specifies no blending. The blending formula simply selects the source color. ","value":"normal "},{"description":"

Multiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop. ","value":"overlay "},{"description":"

Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change. ","value":"saturation "},{"description":"

Multiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen. ","value":"screen "},{"description":"

Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. ","value":"soft-light "}]},"css/properties/background-clip":{"SUMMARY":"

Specifies how an element’s background is clipped. ","URL":"https://www.webplatform.org/docs/css/properties/background-clip","VALUES":[{"description":"

Default. The background extends underneath the element’s borders, which can be seen with semi-transparent or dotted or dashed border-styles. ","value":"border-box "},{"description":"

The background is clipped the element’s content box, so the paddings and borders have no background. This is mainly useful with multiple backgrounds with different background-clip values. ","value":"content-box "},{"description":"

The background is clipped to the padding-box, i.e. it cannot be seen under the element’s borders. ","value":"padding-box "}]},"css/properties/background-color":{"SUMMARY":"

Sets a color to fill up the background of an element it is applied to and accepts any valid CSS color. ","URL":"https://www.webplatform.org/docs/css/properties/background-color","VALUES":[{"description":"

background-color accepts a single color as its value, which can be a keyword, hex, RGB, RGBa, HSL or HSLa color value. See the CSS color values page for more details. ","value":"color "},{"description":"

The element's background-color is inherited from its parent element. ","value":"inherit "},{"description":"

The default value; you will be able to see the elements behind the element in question showing through it. ","value":"transparent "}]},"css/properties/background-image":{"SUMMARY":"

Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients. ","URL":"https://www.webplatform.org/docs/css/properties/background-image","VALUES":[{"description":"

Any valid CSS image value, including image files through CSS images: url() or CSS gradients. ","value":"<image> "},{"description":"

You can apply multiple background images to a single element (image files, gradients, or a mixture) by including all the image references in the property value, with each one separated by a comma. Images referenced earlier in the property value appear in front of images referenced later. ","value":"<image>, <image>, … "},{"description":"

Default. Color of the next parent through which the background is visible. ","value":"none "}]},"css/properties/background-origin":{"SUMMARY":"

Specifies what the background-position property is relative to. ","URL":"https://www.webplatform.org/docs/css/properties/background-origin","VALUES":[{"description":"

The position is relative to the border box. ","value":"border-box "},{"description":"

The position is relative to the content box. Useful for having background images automatically follow the padding. ","value":"content-box "},{"description":"

Default. The position is relative to the padding box. ","value":"padding-box "}]},"css/properties/background-position":{"SUMMARY":"

background-position allows you to set the placement of a background-image on the element it is applied to. background-position generally takes two values, which set the horizontal and vertical position of the background image inside the element. ","URL":"https://www.webplatform.org/docs/css/properties/background-position","VALUES":[{"description":"

If you have applied multiple background images to an element, you can give each background image a different position by specifying multiple background position values delimited by commas. The values supplied will cycle so that all images are given a background-position, for example if four background images are specified and only two position values, position 1 will be applied to images 1 and 3, and position 2 to images 2 and 4. ","value":"30% 15%, 40% 80%, 10px 10px "},{"description":"

Any standard CSS units are acceptable as background-position values: px, ems, rems, mm, cm etc. Note that unit values specify the distance the top left corner of the background image is away from the top left corner of the element. For more details on these units, read Length units. ","value":"length length "},{"description":"

If only a single value is included, that is taken as the horizontal value, and the vertical value is set as center. ","value":"percentage "},{"description":"

Percentages are acceptable for background-position values, and specify percentages of the overall width and height of the element in question. Note that percentage values specify the distance the top left corner of the background image is away from the top left corner of the element. ","value":"percentage percentage "},{"description":"

CSS3 includes the new four value background-position syntax, which allows you to choose which sides of the element you are positioning the background image relative to (values 1 and 3), and then the distance away from those sides (values 2 and 4). So this example says that you want to position the background image 10 pixels from the bottom of the element, and 15 pixels from the right. If you miss out one of the offset values, the other is assumed to be 0. ","value":"bottom length right length "},{"description":"

background-position can also be expressed as keywords: left top, top, right top, left, center, right, left bottom, bottom, right bottom. These values do not relate specifically to the position of the top left hand corner of the background image, but rather the overall position of the background image inside the element. So for example, a value of right top will make the background image site flush to the top and right sides of the element it is applied to; the top left corner won't be positioned at the top right of the element! ","value":"left top "}]},"css/properties/background-position-x":{"SUMMARY":"

Sets the horizontal position of a background image. ","URL":"https://www.webplatform.org/docs/css/properties/background-position-x","VALUES":[{"description":"

Horizontal alignment value (e.g. \"left\", \"right\", or \"center\"). ","value":"hAlignment "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"

Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object. ","value":"percentage "}]},"css/properties/background-position-y":{"SUMMARY":"

Sets vertical starting position of a background image. ","URL":"https://www.webplatform.org/docs/css/properties/background-position-y","VALUES":[{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"

Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object. ","value":"percentage "},{"description":"

Vertical alignment value. ","value":"vAlignment "}]},"css/properties/background-repeat":{"SUMMARY":"

Background-repeat defines if and how background images will be repeated after they have been sized and positioned ","URL":"https://www.webplatform.org/docs/css/properties/background-repeat","VALUES":[{"description":"

Keyword(s) indicating the repeat pattern.

repeat
Default. In CSS2.1, the image is repeated horizontally and vertically. In CSS3, if two keywords are used, the image is repeated along the relevant axis.
no-repeat
The image is not repeated.
repeat-x
The image is repeated along the horizontal axis.
repeat-y
The image is repeated along the vertical axis.
round
The image is repeated as often as will fit into the background area, and is rescaled if necessary to make it fit a whole number of times. (CSS3)
space
The image is repeated as often as will fit into the background area a whole number of times, and is spaced out so that the first and last ones touch the edges. (CSS3)
","value":"<repeat-style> "}]},"css/properties/background-size":{"SUMMARY":"

Specifies the size of the background images. ","URL":"https://www.webplatform.org/docs/css/properties/background-size","VALUES":[{"description":"

Default. See Remarks. ","value":"auto "},{"description":"

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. ","value":"contain "},{"description":"

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. ","value":"cover "},{"description":"

A floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see the CSS Values and Units Reference. ","value":"length "},{"description":"

An integer, followed by a percent (%). A percentage value is relative to the background positioning area. ","value":"percentage "}]},"css/properties/baseline-shift":{"SUMMARY":"

Obsolete - spec retired, not implemented. ","URL":"https://www.webplatform.org/docs/css/properties/baseline-shift","VALUES":[{"description":"

There is no baseline shift; the dominant baseline remains in its original position. ","value":"baseline "},{"description":"

The dominant-baseline is shifted in the shift-direction (positive value) or opposite to the shift-direction (negative value) of the parent area by the <length> value. A value of '0cm' is equivalent to 'baseline'. ","value":"<length> "},{"description":"

The computed value of the property is this percentage multiplied by the computed 'line-height' of the parent element. The dominant-baseline is shifted in the shift-direction (positive value) or opposite to the shift-direction (negative value) of the parent area by the computed value. A value of '0%' is equivalent to 'baseline'. ","value":"<percentage> "},{"description":"

The dominant baseline is shifted to the default position for subscripts. The offset for this position is determined by the font data for the parent nominal font as adjusted by the dominant baseline-table font-size of the parent element. If there is no applicable font data the User Agent may use heuristic to determine the offset. ","value":"sub "},{"description":"

The dominant baseline is shifted to the default position for superscripts. The offset for this position is determined by the font data for the parent nominal font as adjusted by the dominant baseline-table font-size of the parent element. If there is no applicable font data the User Agent may use heuristic to determine the offset. ","value":"super "}]},"css/properties/behavior":{"SUMMARY":"

Non standard. Sets or retrieves the location of the Dynamic HTML (DHTML) behavior. ","URL":"https://www.webplatform.org/docs/css/properties/behavior"},"css/properties/block-progression":{"SUMMARY":"

Sets the block progression and layout orientation: deprecated in favor of the writing-mode property. ","URL":"https://www.webplatform.org/docs/css/properties/block-progression","VALUES":[{"description":"

Bottom-to-top block flow. Layout is horizontal. ","value":"bt "},{"description":"

Left-to-right block flow. Layout is vertical. ","value":"lr "},{"description":"

Right-to-left block flow. Layout is vertical. ","value":"rl "},{"description":"

Default. Top-to-bottom block flow. Layout is horizontal. ","value":"tb "}]},"css/properties/border":{"SUMMARY":"

Shorthand property that defines the different properties of all four sides of an element's border in a single declaration. It can be used to set border-width, border-style and border-color, or a subset of these. ","URL":"https://www.webplatform.org/docs/css/properties/border","VALUES":[{"description":"

A concatenation of <border-width>, <border-style>, and <border-color>. At least one of these must be present, and they may appear in any order.

<border-width>: A numeric value with any of the standard length units. The initial value is medium, which most browsers will render as 3px. See the border-width property.

<border-style>: This takes any of the range of values available to the border-style property. The initial value is none.

<border-color>: This takes any valid CSS color. See the border-color property. The initial value is currentColor. ","value":"<border-width> OR <border-style> OR <border-color> "},{"description":"

When the value is set to inherit, the element will inherit the border values set on its parent. ","value":"inherit "}]},"css/properties/border-bottom":{"SUMMARY":"

Shorthand property that defines the border-width, border-style and border-color of an element's bottom border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the bottom border — border-bottom-width, border-bottom-style and border-bottom-color. ","URL":"https://www.webplatform.org/docs/css/properties/border-bottom","VALUES":[{"description":"

The border-bottom property can contain up to three components:

","value":"border-width border-style color "},{"description":"

When we set the value to inherit, the element will inherit the border values set on its parent. ","value":"inherit "}]},"css/properties/border-bottom-color":{"SUMMARY":"

Sets the color of the bottom border. This page explains the border-bottom-color value, but often you will find it more convenient to fix the border's bottom color as part of a shorthand set, either border-bottom or border-color.

Colors can be defined several ways. For more information, see Usage. ","URL":"https://www.webplatform.org/docs/css/properties/border-bottom-color","VALUES":[{"description":"

The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see Usage. ","value":"<color> "},{"description":"

The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "},{"description":"

currentColor, the color value inherited from parent object. ","value":"inherit "},{"description":"

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. ","value":"transparent "}]},"css/properties/border-bottom-left-radius":{"SUMMARY":"

Defines the shape of the border of the bottom-left corner. ","URL":"https://www.webplatform.org/docs/css/properties/border-bottom-left-radius","VALUES":[{"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 <length> data types. Negative values are invalid. ","value":"length "},{"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. ","value":"percentage "}]},"css/properties/border-bottom-right-radius":{"SUMMARY":"

Defines the shape of the border of the bottom-right corner. ","URL":"https://www.webplatform.org/docs/css/properties/border-bottom-right-radius","VALUES":[{"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 <length> data types. Negative values are invalid. ","value":"length "},{"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. ","value":"percentage "}]},"css/properties/border-bottom-style":{"SUMMARY":"

Sets the style of an element's bottom border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style. ","URL":"https://www.webplatform.org/docs/css/properties/border-bottom-style","VALUES":[{"description":"

A series of square-ended dashes. ","value":"dashed "},{"description":"

A series of round or square dots. ","value":"dotted "},{"description":"

Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"

Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border-color.) ","value":"groove "},{"description":"

Same as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"

Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"

Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See background-image. ","value":"none "},{"description":"

Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"

Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"

A single line segment. ","value":"solid "}]},"css/properties/border-bottom-width":{"SUMMARY":"

Sets the width of an element's bottom border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width. ","URL":"https://www.webplatform.org/docs/css/properties/border-bottom-width","VALUES":[{"description":"

Default.   ","value":"medium "},{"description":"

Greater than the default width. ","value":"thick "},{"description":"

Less than the default width. ","value":"thin "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"<width> "}]},"css/properties/border-collapse":{"SUMMARY":"

Border-collapse can be used for collapsing the borders between table cells ","URL":"https://www.webplatform.org/docs/css/properties/border-collapse","VALUES":[{"description":"

Adjacent borders and the space between them are collapsed into a single border. ","value":"collapse "},{"description":"

The same specified value as the property for the element's parent will be used. ","value":"inherit "},{"description":"

Default. Borders are detached (standard HTML). Each table cell has an individual border, with optional space between the borders. ","value":"separate "}]},"css/properties/border-color":{"SUMMARY":"

The CSS border-color property sets the color of an element's four borders. This property can have from one to four values, made up of the elementary properties:

The default color is the currentColor of each of these values.

If you provide one value, it sets the color for the element. Two values set the horizontal and vertical values, respectively. Providing three values sets the top, vertical, and bottom values, in that order. Four values set all for sides: top, right, bottom, and left, in that order. ","URL":"https://www.webplatform.org/docs/css/properties/border-color","VALUES":[{"description":"

Specify the color to use on all borders. This can be anywhere from one to four values representing the top, right, bottom, and left border respectively. ","value":"<color> "},{"description":"

The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "},{"description":"

Is a keyword indicating that all four values are inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

This will apply a border that is not visible but it can have a width applied. ","value":"transparent "}]},"css/properties/border-corner-shape":{"SUMMARY":"

Specifies different corner clipping effects, such as scoop (inner curves), bevel (straight cuts) or notch (cut-off rectangles). Works along with border-radius to specify the size of each corner effect. ","URL":"https://www.webplatform.org/docs/css/properties/border-corner-shape","VALUES":[{"description":"

Border radii define a diagonal slice at the corner. ","value":"bevel "},{"description":"

Border radii define a convex curve at the corner (default behavior of border-radius). ","value":"curve "},{"description":"

Border radii define a concave rectangular notch at the corner. ","value":"notch "},{"description":"

Border radii define a concave curve at the corner (informally called \"negative border-radius\") ","value":"scoop "}]},"css/properties/border-image":{"SUMMARY":"

Shorthand property that defines an image to be displayed and its positioning, instead of a solid color, for 'border' property. It can be used to set border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat, or a subset of these. ","URL":"https://www.webplatform.org/docs/css/properties/border-image","VALUES":[{"description":"

The border-image property can contain up to five components:

","value":"border-image-source border-image-slice border-image-width border-image-outset border-image-repeat "}]},"css/properties/border-image-outset":{"SUMMARY":"

The border-image-outset property describes, by which amount the border image area extends beyond the border box. ","URL":"https://www.webplatform.org/docs/css/properties/border-image-outset","VALUES":[{"description":"

Is a keyword indicating that all four values are inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference (Length). This length must not be negative. ","value":"<length> "}]},"css/properties/border-image-repeat":{"SUMMARY":"

The border-image-repeat CSS property defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior. ","URL":"https://www.webplatform.org/docs/css/properties/border-image-repeat","VALUES":[{"description":"

Is a keyword indicating that all four values are inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

Is a keyword indicating that the image will be repeated until it fit the gap between the borders ","value":"repeat "},{"description":"

Is a keyword indicating that the image will be repeated until it fit the gap between the borders. If it doesn't fit after having being repeated an integer number of times, it is rescaled to do so. ","value":"round "},{"description":"

Is a keyword indicating that the image will be repeated until it fit the gap between the borders. If it doesn't fit after having being repeated a whole number of times, the white space is distributed around the tiles. ","value":"space "},{"description":"

Is a keyword indicating that the image will be stretched to fit the gap between the borders. ","value":"stretch "}]},"css/properties/border-image-slice":{"SUMMARY":"

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 inward offsets. ","URL":"https://www.webplatform.org/docs/css/properties/border-image-slice","VALUES":[{"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":"fill "},{"description":"

Is a keyword indicating that all four values are inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

Represents pixels for raster images and coordinates for vector images. ","value":"<number> "},{"description":"

Percentages values are relative to the height or width of the image, whichever is adequate. ","value":"<percentage> "}]},"css/properties/border-image-source":{"SUMMARY":"

The property border-image-source is used to set the image to be used instead of the border style. If this is set to none the border-style is used instead. ","URL":"https://www.webplatform.org/docs/css/properties/border-image-source","VALUES":[{"description":"

Default. border-style is used instead. ","value":"none "},{"description":"

This value contains a path to an image that you want to apply to the element in question as a background image, using the CSS images syntax, as described at \"CSS images: url()\". ","value":"url(path/to/image.png) "}]},"css/properties/border-image-width":{"SUMMARY":"

The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges. ","URL":"https://www.webplatform.org/docs/css/properties/border-image-width","VALUES":[{"description":"

Indicates that the width, or height, of the image size must be the intrinsic size of that dimension. ","value":"auto "},{"description":"

Represents the length of the image slice. It can be an absolute or relative length. This length must not be negative. ","value":"<length> "},{"description":"

Represents a multiple of the computed value of the element's border-width property to be used as the image slice size. The number must not be negative. ","value":"<number> "},{"description":"

Represents the percentage of the image slice relative to the height, or width, of the border image area. The percentage must not be negative. ","value":"<percentage> "}]},"css/properties/border-left":{"SUMMARY":"

Shorthand property that defines the border-width, border-style and border-color of an element's left border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the left border — border-left-width, border-left-style and border-left-color. ","URL":"https://www.webplatform.org/docs/css/properties/border-left","VALUES":[{"description":"

The border-left property can contain up to three components:

","value":"border-width border-style color "},{"description":"

When we set the value to inherit, the element will inherit the border values set on its parent. ","value":"inherit "}]},"css/properties/border-left-color":{"SUMMARY":"

The CSS border-left-color property sets the color of an element's left border. This page explains the border-left-color value, but often you will find it more convenient to fix the border's left color as part of a shorthand set, either border-left or border-color.

Colors can be defined several ways. For more information, see Usage. ","URL":"https://www.webplatform.org/docs/css/properties/border-left-color","VALUES":[{"description":"

The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see Usage. ","value":"<color> "},{"description":"

The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "},{"description":"

currentColor, the color value inherited from parent object. ","value":"inherit "},{"description":"

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. ","value":"transparent "}]},"css/properties/border-left-style":{"SUMMARY":"

Sets the style of an element's left border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style. ","URL":"https://www.webplatform.org/docs/css/properties/border-left-style","VALUES":[{"description":"

A series of square-ended dashes. ","value":"dashed "},{"description":"

A series of round or square dots. ","value":"dotted "},{"description":"

Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"

Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border-color.) ","value":"groove "},{"description":"

Same as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"

Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"

Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See background-image. ","value":"none "},{"description":"

Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"

Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"

A single line segment. ","value":"solid "}]},"css/properties/border-left-width":{"SUMMARY":"

Sets the width of an element's left border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width. ","URL":"https://www.webplatform.org/docs/css/properties/border-left-width","VALUES":[{"description":"

Default.   ","value":"medium "},{"description":"

Greater than the default width. ","value":"thick "},{"description":"

Less than the default width. ","value":"thin "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"<width> "}]},"css/properties/border-radius":{"SUMMARY":"

The border-radius CSS property allows authors to round the corners of an element. The rounding can be different per-corner, and it could have different horizontal and vertical radii, to produce elliptical curves. ","URL":"https://www.webplatform.org/docs/css/properties/border-radius","VALUES":[{"description":"

Denotes the size of the circle radius or the horizontal and vertical radii, for elliptical curves. It can be expressed in any unit allowed in CSS <length> data types. em units are useful for controls that scale proportionally with the font-size. Viewport-relative units (vw, vh, vmin, vmax) can be useful for controls that scale with the viewport size. Negative values are invalid. You can specify a single length for all four corners, or two, three or four lengths to specify different lengths for different corners: see the syntax section for more details. ","value":"length "},{"description":"

Specifying two sets of length values separated by a forward slash equates to specifying separate lengths for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have different lengths. Each set can consist of one, two, three or four values. ","value":"length / length "},{"description":"

Denotes the size of the corner radius, in percentages of the box’s border-box dimensions. Specifically, percentages for the horizontal axis refer to the width of the border-box, percentages for the vertical axis refer to the height of the border-box. Negative values are invalid. You can specify a single percentage for all four corners, or two, three or four percentages to specify different percentages for different corners: see the syntax section for more details. ","value":"percentage "},{"description":"

Specifying two sets of percentage values separated by a forward slash equates to specifying separate percentages for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have percentages resulting in different computed values (depending on the width and height of the element, different percentages might result in the same computed values; see the remarks section for more). Each set can consist of one, two, three or four values. ","value":"percentage / percentage "}]},"css/properties/border-right":{"SUMMARY":"

Shorthand property that defines the border-width, border-style and border-color of an element's right border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the right border — border-right-width, border-right-style and border-right-color. ","URL":"https://www.webplatform.org/docs/css/properties/border-right","VALUES":[{"description":"

The border-right property can contain up to three components:

","value":"border-width border-style color "},{"description":"

When we set the value to inherit, the element will inherit the border values set on its parent. ","value":"inherit "}]},"css/properties/border-right-color":{"SUMMARY":"

Sets the color of an element's right border. This page explains the border-right-color value, but often you will find it more convenient to fix the border's right color as part of a shorthand set, either border-right or border-color.

Colors can be defined several ways. For more information, see Usage. ","URL":"https://www.webplatform.org/docs/css/properties/border-right-color","VALUES":[{"description":"

The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see Usage. ","value":"<color> "},{"description":"

The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "},{"description":"

currentColor, the color value inherited from parent object. ","value":"inherit "},{"description":"

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. ","value":"transparent "}]},"css/properties/border-right-style":{"SUMMARY":"

Sets the style of an element's right border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style. ","URL":"https://www.webplatform.org/docs/css/properties/border-right-style","VALUES":[{"description":"

A series of square-ended dashes. ","value":"dashed "},{"description":"

A series of round or square dots. ","value":"dotted "},{"description":"

Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"

Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border-color.) ","value":"groove "},{"description":"

Same as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"

Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"

Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See background-image. ","value":"none "},{"description":"

Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"

Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"

A single line segment. ","value":"solid "}]},"css/properties/border-right-width":{"SUMMARY":"

Sets the width of an element's right border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width. ","URL":"https://www.webplatform.org/docs/css/properties/border-right-width","VALUES":[{"description":"

Default.   ","value":"medium "},{"description":"

Greater than the default width. ","value":"thick "},{"description":"

Less than the default width. ","value":"thin "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"<width> "}]},"css/properties/border-spacing":{"SUMMARY":"

Specifies the distance between the borders of adjacent cells. ","URL":"https://www.webplatform.org/docs/css/properties/border-spacing","VALUES":[{"description":"

The same specified value as the property for the element's parent will be used. ","value":"inherit "},{"description":"

The distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative. ","value":"length "}]},"css/properties/border-style":{"SUMMARY":"

Sets the style of an element's four borders. This property can have from one to four values. With only one value, the value will be applied to all four borders; otherwise, this works as a shorthand property for each of border-top-style, border-right-style, border-bottom-style, border-left-style, where each border style may be assigned a separate value. ","URL":"https://www.webplatform.org/docs/css/properties/border-style","VALUES":[{"description":"

Shorthand values syntax. ","value":"<border-top-style> <border-right-style> <border-bottom-style> <border-left-style> "},{"description":"

A series of square-ended dashes. ","value":"dashed "},{"description":"

A series of round dots. ","value":"dotted "},{"description":"

Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"

Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border-color.) ","value":"groove "},{"description":"

Same as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"

Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"

Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See background-image. ","value":"none "},{"description":"

Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"

Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"

A single line segment. ","value":"solid "}]},"css/properties/border-top":{"SUMMARY":"

Shorthand property that defines the border-width, border-style and border-color of an element's top border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the top border — border-top-width, border-top-style and border-top-color. ","URL":"https://www.webplatform.org/docs/css/properties/border-top","VALUES":[{"description":"

The border-top property can contain up to three components:

","value":"border-width border-style color "},{"description":"

When we set the value to inherit, the element will inherit the border values set on its parent. ","value":"inherit "}]},"css/properties/border-top-color":{"SUMMARY":"

Sets the color of an element's top border. This page explains the border-top-color value, but often you will find it more convenient to fix the border's top color as part of a shorthand set, either border-top or border-color.

Colors can be defined several ways. For more information, see Usage. ","URL":"https://www.webplatform.org/docs/css/properties/border-top-color","VALUES":[{"description":"

The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see Usage. ","value":"<color> "},{"description":"

The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "},{"description":"

currentColor, the color value inherited from parent object. ","value":"inherit "},{"description":"

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. ","value":"transparent "}]},"css/properties/border-top-left-radius":{"SUMMARY":"

Sets the rounding of the top-left corner of the element. ","URL":"https://www.webplatform.org/docs/css/properties/border-top-left-radius","VALUES":[{"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 <length> data types. Negative values are invalid. ","value":"length "},{"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. ","value":"percentage "}]},"css/properties/border-top-right-radius":{"SUMMARY":"

Sets the rounding of the top-right corner of the element. ","URL":"https://www.webplatform.org/docs/css/properties/border-top-right-radius","VALUES":[{"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 <length> data types. Negative values are invalid. ","value":"length "},{"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. ","value":"percentage "}]},"css/properties/border-top-style":{"SUMMARY":"

Sets the style of an element's top border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style. ","URL":"https://www.webplatform.org/docs/css/properties/border-top-style","VALUES":[{"description":"

A series of square-ended dashes. ","value":"dashed "},{"description":"

A series of round or square dots. ","value":"dotted "},{"description":"

Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"

Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border-color.) ","value":"groove "},{"description":"

Same as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"

Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"

Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See background-image. ","value":"none "},{"description":"

Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"

Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"

A single line segment. ","value":"solid "}]},"css/properties/border-top-width":{"SUMMARY":"

Sets the width of an element's top border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width. ","URL":"https://www.webplatform.org/docs/css/properties/border-top-width","VALUES":[{"description":"

Default.   ","value":"medium "},{"description":"

Greater than the default width. ","value":"thick "},{"description":"

Less than the default width. ","value":"thin "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"<width> "}]},"css/properties/border-width":{"SUMMARY":"

Sets the width of an element's four borders. This property can have from one to four values. This is a shorthand property for setting values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width. ","URL":"https://www.webplatform.org/docs/css/properties/border-width","VALUES":[{"description":"

Shorthand syntax. See notes below. ","value":"<border-top-width> <border-right-width> <border-bottom-width> <border-left-width> "},{"description":"

Default.   ","value":"medium "},{"description":"

Greater than the default width. ","value":"thick "},{"description":"

Less than the default width. ","value":"thin "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see [Values and Units Reference]. ","value":"<width> "}]},"css/properties/bottom":{"SUMMARY":"

Sets the position of the bottom edge of an element. ","URL":"https://www.webplatform.org/docs/css/properties/bottom","VALUES":[{"description":"

Default. Default position, according to the regular HTML layout of the page. ","value":"auto "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"

Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object. ","value":"percentage "}]},"css/properties/box-align":{"SUMMARY":"

Obsolete. ","URL":"https://www.webplatform.org/docs/css/properties/box-align","VALUES":[{"description":"

If the parent element has a computed value for -ms-box-direction of normal, the trailing edge of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element.

If the parent element has a computed value for -ms-box-direction of reverse, the leading edge of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. ","value":"after "},{"description":"

The baselines (leading edge or trailing edge depending on the -ms-box-direction property) of all child elements are aligned with each other.

The child element that occupies the most space, perpendicular to the layout axis, follows the before rule; the baselines of all remaining elements are then aligned with the baseline of this element. ","value":"baseline "},{"description":"

If the parent element has a computed value for -ms-box-direction of normal, the leading edge (or baseline) of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element.

If the parent element has a computed value for -ms-box-direction of reverse, the trailing edge (or baseline) of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. ","value":"before "},{"description":"

Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child. ","value":"middle "},{"description":"

Default. Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the max-width or max-height property for a child element takes precedence and layout follows the before rule. ","value":"stretch "}]},"css/properties/box-decoration-break":{"SUMMARY":"

Breaks a box into fragments creating new borders, padding and repeating backgrounds or lets it stay as a continuous box on a page break, column break, or, for inline elements, at a line break. ","URL":"https://www.webplatform.org/docs/css/properties/box-decoration-break","VALUES":[{"description":"

Each box fragment is independently wrapped with the border and padding. The border-radius and border-image and box-shadow, if any, are applied to each fragment independently. The background is drawn independently in each fragment of the element. A no-repeat background image will thus be rendered once in each fragment of the element. ","value":"clone "},{"description":"

No border and no padding are inserted at a break. No box-shadow is drawn at a broken edge; border-radius does not apply to its corners; and the border-image is rendered for the whole box as if it were unbroken. The effect is as though the element were rendered with no breaks present, and then sliced by the breaks afterward. Backgrounds are drawn as if, after the element has been laid out (including any justification, reordering, page breaks, etc.), all the element's box fragments were taken and put one after the other in visual order. The background is applied to the bounding box of this composite box and then the fragments are put back, with each with its share of the background. ","value":"slice "}]},"css/properties/box-direction":{"SUMMARY":"

Deprecated ","URL":"https://www.webplatform.org/docs/css/properties/box-direction","VALUES":[{"description":"

Child elements are displayed in the same order as the computed value of this property for the parent element. ","value":"inherit "},{"description":"

Default. Child elements are displayed in the same order that they are declared in the source document.

If the parent element has a computed value for -ms-box-orient of horizontal, the child elements are displayed from left to right.

If the parent element has a computed value for -ms-box-orient of vertical, the child elements are displayed from top to bottom. ","value":"normal "},{"description":"

Child elements are displayed in the reverse order that they are declared in the source document.

If the parent element has a computed value for -ms-box-orient of horizontal, the child elements are displayed from right to left.

If the parent element has a computed value for -ms-box-orient of vertical, the child elements are displayed from bottom to top. ","value":"reverse "}]},"css/properties/box-flex":{"SUMMARY":"

Do not use. This property has been replaced by the flex property. ","URL":"https://www.webplatform.org/docs/css/properties/box-flex","VALUES":[{"description":"

A floating point value that indicates the relative flexibility of a child element.

A value of 0.0 indicates the element is not flexible. Any other value indicates the relative flexiblity of the child element compared to the flexibility of other child elements.

A negative value is not valid. ","value":"integer "}]},"css/properties/box-line-progression":{"SUMMARY":"

Do not use. This property has been replaced by the flex-wrap property.

Gets or sets a value that specifies the direction to add successive rows or columns when the value of box-lines is set to multiple. ","URL":"https://www.webplatform.org/docs/css/properties/box-line-progression","VALUES":[{"description":"

Default. Successive rows or columns of child elements flow in the direction specified by the writing-mode and -ms-box-lines properties. ","value":"normal "},{"description":"

Successive rows or columns of child elements flow in the reverse direction specified by the writing-mode and box-lines properties. ","value":"reverse "}]},"css/properties/box-lines":{"SUMMARY":"

Do not use. This property has been replaced by the flex-wrap property.

Gets or sets a value that specifies whether child elements wrap onto multiple lines or columns based on the space available in the object. ","URL":"https://www.webplatform.org/docs/css/properties/box-lines","VALUES":[{"description":"

Child elements are wrapped and displayed in successive, parallel rows or columns. The object expands in height or width, perpendicular to the axis defined by the -ms-box-orient property, to accommodate the additional rows or columns. ","value":"multiple "},{"description":"

Default. All child elements are displayed in a single row or column. The overflow property of the object determines whether the child elements are hidden, clipped, or scrollable. ","value":"single "}]},"css/properties/box-ordinal-group":{"SUMMARY":"

Do not use. This property has been replaced by flex-order.

Specifies the ordinal group that a child element of the object belongs to. This ordinal value identifies the display order (along the axis defined by the box-orient property) for the group. ","URL":"https://www.webplatform.org/docs/css/properties/box-ordinal-group","VALUES":[{"description":"

Integer value that identifies the group that a child element belongs to. ","value":"integer "}]},"css/properties/box-orient":{"SUMMARY":"

Deprecated ","URL":"https://www.webplatform.org/docs/css/properties/box-orient","VALUES":[{"description":"

Child elements are displayed along the block axis. ","value":"block-axis "},{"description":"

Child elements are displayed in a horizontal line from left to right. ","value":"horizontal "},{"description":"

Child elements are displayed in the same orientation as the computed value of this property for the parent element. ","value":"inherit "},{"description":"

Default. Child elements are displayed along the inline axis. ","value":"inline-axis "},{"description":"

Child elements are displayed in a vertical stack from top to bottom. ","value":"vertical "}]},"css/properties/box-pack":{"SUMMARY":"

Do not use. This property has been replaced by flex-pack. ","URL":"https://www.webplatform.org/docs/css/properties/box-pack","VALUES":[{"description":"

All child elements are placed edge to edge with each other, as described in the descriptions for the [#start start] or [#end end] keywords. However, the group of child elements is centered between the starting and ending edges of the parent element so that all remaining space is evenly distributed before the first child element and after the last child element. ","value":"center "},{"description":"

The ending edge of the first child element is placed at the end of the parent element; the ending edge of the next child element is placed edge to edge with the starting edge of the first child element; and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis. ","value":"end "},{"description":"

The starting edge of the first child element is placed at the start of the parent element; the ending edge of the last child element is placed edge to edge with the end of the parent box; and all remaining children are placed between the first and last child elements, so that any space that remains along the layout axis is equally distributed between child elements. ","value":"justify "},{"description":"

The starting edge of the first child element is placed at the start of the parent element; the starting edge of the next child element is placed edge to edge with the ending edge of the first child element; and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis. ","value":"start "}]},"css/properties/box-shadow":{"SUMMARY":"

The box-shadow property programmatically creates one or more shadows on the inside or outside of a block level element. ","URL":"https://www.webplatform.org/docs/css/properties/box-shadow","VALUES":[{"description":"

The third length is a blur radius, which can be a number of any length unit. The larger this value, the bigger the blur, meaning the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it defaults to 0 (the shadow's edge is sharp). ","value":"blur-radius (optional) "},{"description":"

If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset 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":"inset (optional) "},{"description":"

To apply multiple shadows to one element, write the box-shadow values out one after another, separated by commas. ","value":"offset-x offset-y blur-radius color, offset-x offset-y blur-radius color "},{"description":"

The first length is the horizontal offset of the shadow — offset-x specifies the horizontal offset of the shadow, which can be a number of any length unit. Positive values place the shadow to the right of the element, and negative values to the left. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element. ","value":"offset-x (optional) "},{"description":"

The second length is the vertical offset of the shadow — offset-y specifies the vertical offset of the shadow, which can be a number of any length unit. Positive values place the shadow below the element, and negative values above. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element. ","value":"offset-y (optional) "},{"description":"

The fourth length is a spread distance, which again can be a number of any unit. Positive values cause the shadow to expand and grow bigger, negative values cause the shadow to shrink. If not specified, it defaults to 0 (the shadow is the same size as the element). Note that setting the size of an outer shadow to 0 causes it to disappear, whereas a 0-sized inner shadow covers the entire padding-box. For inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow's perimeter shape. ","value":"spread-distance (optional) "}]},"css/properties/box-sizing":{"SUMMARY":"

The box-sizing property alters the CSS box model used to calculate widths and heights of elements, so that they can be equal to the width and height of the content-, padding- or border-box. ","URL":"https://www.webplatform.org/docs/css/properties/box-sizing","VALUES":[{"description":"

The width and height (also including min-width, max-width, min-height and max-height properties) of an element are calculated as the width/height of the content plus the padding and border. The dimensions of the content alone are thus calculated by subtracting the padding and border widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0. ","value":"border-box "},{"description":"

The width and height properties (also including min-width, max-width, min-height and max-height properties) are calculated as the width/height of the content, but not the border, margin, or padding. This is the traditional behaviour of width and height as specified by CSS2.1. ","value":"content-box "},{"description":"

The width and height (also including min-width, max-width, min-height and max-height properties) of an element are calculated as the width/height of the content plus the padding. The dimensions of the content alone are thus calculated by subtracting the padding widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0. ","value":"padding-box "}]},"css/properties/break-after":{"SUMMARY":"

The CSS break-after property allows you to force a break on multi-column layouts. More specifically, it allows you to force a break after an element. It allows you to determine if a break should occur, and what type of break it should be. The break-after CSS property describes how the page, column or region break behaves after the generated box. If there is no generated box, the property is ignored. ","URL":"https://www.webplatform.org/docs/css/properties/break-after","VALUES":[{"description":"

A page/column/region break is inserted (forced) after the content block. ","value":"always "},{"description":"

Default. A page break or column break is determined by the flow of content. ","value":"auto "},{"description":"

A page/column/region break is not allowed after the content block. ","value":"avoid "},{"description":"

A column break is not allowed after the content block. ","value":"avoid-column "},{"description":"

A page break is not allowed after the content block. ","value":"avoid-page "},{"description":"

A region break is not allowed after the content block. ","value":"avoid-region "},{"description":"

A column break is inserted (forced) after the content block. ","value":"column "},{"description":"

A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the \"left\" page that immediately follows the current page (according to the paging format of the document). ","value":"left "},{"description":"

A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the page that immediately follows the current page (according to the paging format of the document). ","value":"page "},{"description":"

A region break is inserted (forced) after the content block. ","value":"region "},{"description":"

A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the \"right\" page that immediately follows the current page (according to the paging format of the document). ","value":"right "}]},"css/properties/break-before":{"SUMMARY":"

Control page/column/region breaks that fall above a block of content ","URL":"https://www.webplatform.org/docs/css/properties/break-before","VALUES":[{"description":"

A page break is inserted (forced) before the content block. ","value":"always "},{"description":"

Default. A page break or column break is determined by the flow of content. ","value":"auto "},{"description":"

A page/column/region break is not allowed before the content block. ","value":"avoid "},{"description":"

A column break is not allowed before the content block. ","value":"avoid-column "},{"description":"

A page break is not allowed before the content block. ","value":"avoid-page "},{"description":"

A region break is not allowed before the content block. ","value":"avoid-region "},{"description":"

A column break is inserted (forced) before the content block. ","value":"column "},{"description":"

A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the \"left\" page that immediately follows the current page (according to the paging format of the document). ","value":"left "},{"description":"

A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the page that immediately follows the current page (according to the paging format of the document). ","value":"page "},{"description":"

A region break is inserted (forced) before the content block. ","value":"region "},{"description":"

A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the \"right\" page that immediately follows the current page (according to the paging format of the document). ","value":"right "}]},"css/properties/break-inside":{"SUMMARY":"

Control page/column/region breaks that fall within a block of content ","URL":"https://www.webplatform.org/docs/css/properties/break-inside","VALUES":[{"description":"

Default. A page/column/region break is determined by the flow of content. ","value":"auto "},{"description":"

A page/column/region break is not allowed within the content block. ","value":"avoid "},{"description":"

A column break is not allowed within the content block. ","value":"avoid-column "},{"description":"

A page break is not allowed within the content block. ","value":"avoid-page "},{"description":"

A region break is not allowed within the content block. ","value":"avoid-region "}]},"css/properties/caption-side":{"SUMMARY":"

Specifies the placement of a table caption. ","URL":"https://www.webplatform.org/docs/css/properties/caption-side","VALUES":[{"description":"

Positions the caption box below the table box. ","value":"bottom "},{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Positions the caption box above the table box. ","value":"top "}]},"css/properties/clear":{"SUMMARY":"

The clear CSS property specifies if an element can be positioned next to or must be positioned below the floating elements that precede it in the markup. ","URL":"https://www.webplatform.org/docs/css/properties/clear","VALUES":[{"description":"

Floated elements that precede the cleared element are not allowed to be adjacent to the cleared element. The cleared element must move below the floated elements. ","value":"both "},{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Floated elements that precede the cleared element are not allowed to the left of the cleared element. The cleared element must move below the floated element. ","value":"left "},{"description":"

May have adjacent floats on both the left and right sides. ","value":"none "},{"description":"

Floated elements that precede the cleared element are not allowed to the right of the cleared element. The cleared element must move below the floated element. ","value":"right "}]},"css/properties/clip":{"SUMMARY":"

Deprecated; see clip-path.

Lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed. ","URL":"https://www.webplatform.org/docs/css/properties/clip","VALUES":[{"description":"

Default. Clip to expose entire object. ","value":"auto "},{"description":"

Top, right, bottom, and left specify length values, any of which can be replaced by auto, leaving that side not clipped. The value of top specifies that everything above this value on the Y axis (with 0 at the top) is clipped. The value of right specifies that everything above this value on the X axis (with 0 at the left) is clipped. The value of bottom specifies that everything below this value on the Y axis (with 0 at the top) is clipped. The value of left specifies that everything to the left of this value on the X axis (with 0 at the left) is clipped. ","value":"rect(top, right, bottom, left) "}]},"css/properties/clip-path":{"SUMMARY":"

The clip-path property prevents a portion of an element from drawing by defining a clipping region. ","URL":"https://www.webplatform.org/docs/css/properties/clip-path","VALUES":[{"description":"

The shape is computed based on the values of one of inset, circle, ellipse or polygon. If shape-box is not supplied, then the reference box defaults to margin-box.

","value":"<basic-shape> "},{"description":"

The <clip-source> value may be one of the following.

","value":"<clip-source> "},{"description":"

No clipping path is created. ","value":"none "}]},"css/properties/clip-rule":{"SUMMARY":"

Clipping crops an graphic, so that only a portion of the graphic is rendered, or filled. This clip-rule property, when used with the clip-path property, defines which clip rule, or algorithm, to use when filling the different parts of a graphics. ","URL":"https://www.webplatform.org/docs/css/properties/clip-rule","VALUES":[{"description":"

This value defines whether a point is inside or outside the path by drawing a ray from that point to infinity in any direction and counting the number of shape segments that the ray crosses. If the count is odd, the point is inside; if even, the point is outside.

See SVG fill-rule property for details. ","value":"evenodd "},{"description":"

This value defines whether a point is inside or outside the path by drawing a ray from that point to infinity in any direction and counting the places where a shape segment crosses the ray in a specific direction. When a segment crosses the ray from left to right, the count is incremented; when a segment crosses the ray from right to left, the count is decremented. If the count is zero, the point is outside; if non-zero, it is inside.

See SVG fill-rule property for details. ","value":"nonzero "}]},"css/properties/color":{"SUMMARY":"

The color property sets the color of an element's foreground content (usually text), accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a). ","URL":"https://www.webplatform.org/docs/css/properties/color","VALUES":[{"description":"

CSS color value ","value":"color "}]},"css/properties/column-count":{"SUMMARY":"

Specifies the number of columns an element should be divided into. ","URL":"https://www.webplatform.org/docs/css/properties/column-count","VALUES":[{"description":"

The number of columns is determined by the values of other property values of the multi-column element, such as column-width. ","value":"auto "},{"description":"

An integer value that specifies the number of columns in the multi-column element. Values must be greater than 0. When column-width is specified with column-count and both have non-auto values, the integer value defines the maximum number of columns. ","value":"count "}]},"css/properties/column-fill":{"SUMMARY":"

Specifies how to fill columns (balanced or sequential). ","URL":"https://www.webplatform.org/docs/css/properties/column-fill","VALUES":[{"description":"

Columns are filled sequentially such that the columns may differ in length, depending on other column property values. ","value":"auto "},{"description":"

Columns are filled sequentially such that the column heights are balanced as equally as possible, depending on other column property values. ","value":"balance "}]},"css/properties/column-gap":{"SUMMARY":"

The column-gap property controls the width of the gap between columns in multi-column elements. ","URL":"https://www.webplatform.org/docs/css/properties/column-gap","VALUES":[{"description":"

A floating-point number, followed by either an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px), that indicates the width of the gap between columns. For more information about the supported length units, see CSS Length Units Reference.


Negative values are not valid. ","value":"length "},{"description":"

Default. The width of the normal value is user-agent specific, but 1em is suggested. ","value":"normal "}]},"css/properties/column-rule":{"SUMMARY":"

Sets the width, style, and color of the rule between columns. ","URL":"https://www.webplatform.org/docs/css/properties/column-rule","VALUES":[{"description":"

Value of the column-rule-color property. ","value":"column-rule-color "},{"description":"

Value of the column-rule-style property. ","value":"column-rule-style "},{"description":"

Value of the column-rule-width property. ","value":"column-rule-width "},{"description":"

Indicates rule is transparent. ","value":"transparent "}]},"css/properties/column-rule-color":{"SUMMARY":"

Specifies the color of the rule between columns. ","URL":"https://www.webplatform.org/docs/css/properties/column-rule-color","VALUES":[{"description":"

One of the color names, RGB, RGBA, HSL, or HSLA values in the Color Table. ","value":"color "}]},"css/properties/column-rule-style":{"SUMMARY":"

Specifies the style of the rule between columns. The column-rule-style values are the same as for border-style. ","URL":"https://www.webplatform.org/docs/css/properties/column-rule-style","VALUES":[{"description":"

Column rule is a dashed line. ","value":"dashed "},{"description":"

Column rule is a dotted line. ","value":"dotted "},{"description":"

Column rule is two parallel solid lines with a space between. The sum of the two single lines and the space between equals the column-rule-width value. The column rule width must be at least 3 pixels wide to draw a double rule. ","value":"double "},{"description":"

3-D groove is drawn in colors slightly lighter and darker than the value. ","value":"groove "},{"description":"

Same as none. ","value":"hidden "},{"description":"

3-D inset is drawn in colors based on the value. ","value":"inset "},{"description":"

Default. No column rule is drawn, regardless of any specified column-rule-width. The computed value is set to 0. ","value":"none "},{"description":"

3-D outset is drawn in colors based on the value. ","value":"outset "},{"description":"

3-D ridge is drawn in colors based on the value. ","value":"ridge "},{"description":"

Column rule is a solid line. ","value":"solid "}]},"css/properties/column-rule-width":{"SUMMARY":"

Specifies the width of the rule between columns. ","URL":"https://www.webplatform.org/docs/css/properties/column-rule-width","VALUES":[{"description":"

If the column rule style is ‘none’ or ‘hidden’ ","value":"0 "},{"description":"

Default. A medium width border. ","value":"medium "},{"description":"

Width greater than the default. ","value":"thick "},{"description":"

Width less than the default. ","value":"thin "},{"description":"

Width consisting of a floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px) ","value":"width "}]},"css/properties/column-span":{"SUMMARY":"

The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element. ","URL":"https://www.webplatform.org/docs/css/properties/column-span","VALUES":[{"description":"

The content block spans all columns on a page. All content that is declared before the content block is shown before the content block. ","value":"all "},{"description":"

Default. The content block does not span multiple columns. ","value":"none "}]},"css/properties/column-width":{"SUMMARY":"

Specifies the width of columns in multi-column elements. ","URL":"https://www.webplatform.org/docs/css/properties/column-width","VALUES":[{"description":"

Default. The optimal column width is determined through other property values of the multi-column element, such as columnCount. ","value":"auto "},{"description":"

A floating-point number, followed by either an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (rem, em, ex, or px), that indicates the optimal width. For more information about the supported length units, see CSS Length Units Reference. ","value":"length "}]},"css/properties/columns":{"SUMMARY":"

This property is a shorthand property for setting column-width and/or column-count. ","URL":"https://www.webplatform.org/docs/css/properties/columns","VALUES":[{"description":"

Any of the values available to column-count property. ","value":"column-count "},{"description":"

Any of the values available to column-width property. ","value":"column-width "}]},"css/properties/content":{"SUMMARY":"

The content property is used to display content in the pseudo-elements ::before and ::after. ","URL":"https://www.webplatform.org/docs/css/properties/content","VALUES":[{"description":"

Value of an attribute of the subject of the selector. If attribute is not set on the subject an empty string will be returned. It is used as a function with the element name as the argument: 'attr( element-name )' ","value":"attr "},{"description":"

Sets the content to be the appropriate string from the quotes property. ","value":"close-quote "},{"description":"

Counters may be specified with two different functions: 'counter()' or 'counters()'. 'counter()' has two forms: 'counter(name)' or 'counter(name, style)'. 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 ('decimal' by default). 'counters()' also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. 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 ('decimal' by default). The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored. ","value":"counter "},{"description":"

If set, removes the closing quote from the content. ","value":"no-close-quote "},{"description":"

Pseudo element is not generated. ","value":"none "},{"description":"

If set, removes the opening quote from the content. ","value":"no-open-quote "},{"description":"

Equivalent to \"none\" for :before and :after pseudo-elements, which are the only places the content property currently applies. ","value":"normal "},{"description":"

Sets the content to be the appropriate string from the quotes property. ","value":"open-quote "},{"description":"

Text content, in either double quotation marks (\") or single quotation marks (').

Double quotation marks cannot occur inside other double quotation marks, unless they are preceded by a backslash (\\) escape character. For example, the string \"\\\"\" is interpreted as containing one double quotation character.

It is possible to break strings over several lines, for esthetic or other reasons, by use of the backslash as a continuation character; however, the newline character itself is ignored.

Newlines can be used by writing the \\A escape sequence in any of the strings after the content property. The generated line break is displayed in accordance with the value of the white-space attribute.

The backslash is also used to generate escape characters that cannot be represented in the current character encoding. In this case, the backslash is followed by at most six hexadecimal digits (from the range 0–9 and A–F) to indicate the Unicode character with that number. ","value":"string "},{"description":"

This is the url of an external resource, such as an image. If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed. ","value":"uri "}]},"css/properties/counter-increment":{"SUMMARY":"

The counter-increment property accepts one or more names of counters (identifiers), each one optionally followed by an integer which specifies the value by which the counter should be incremented (e.g. if the value is 2, the counter increases by 2 each time it is invoked). ","URL":"https://www.webplatform.org/docs/css/properties/counter-increment","VALUES":[{"description":"

The name of the counter. The counter can then be invoked by using counter(<identifier>). ","value":"identifier "},{"description":"

An integer that indicates by how much the counter is incremented for every occurrence of the element. Zero and negative integers are allowed. If no value is specified, the value defaults to 1. ","value":"integer "}]},"css/properties/counter-reset":{"SUMMARY":"

The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer (otherwise, the integer defaults to 0.) Each time the given element is invoked, the counters specified by the property are set to the given integer. ","URL":"https://www.webplatform.org/docs/css/properties/counter-reset","VALUES":[{"description":"

The name of the counter, optionally followed by an integer. ","value":"identifier "},{"description":"

The value to which the counter is set when the element is invoked. The default value is 0. ","value":"integer "}]},"css/properties/cue":{"SUMMARY":"

The cue property specifies sound files (known as an \"auditory icon\") to be played by speech media agents before and after presenting an element's content; if only one file is specified, it is played both before and after. The volume at which the file(s) should be played, relative to the volume of the main element, may also be specified. The icon files may also be set separately with the cue-before and cue-after properties. ","URL":"https://www.webplatform.org/docs/css/properties/cue"},"css/properties/cue-after":{"SUMMARY":"

The cue-after property specifies a sound file (known as an \"auditory icon\") to be played by speech media agents after presenting an element's content; the volume at which the file should be played may also be specified. The shorthand property cue sets cue sounds for both before and after the element is presented. ","URL":"https://www.webplatform.org/docs/css/properties/cue-after"},"css/properties/cue-before":{"SUMMARY":"

The cue-before property specifies a sound file (known as an \"auditory icon\") to be played by speech media agents before presenting an element's content; the volume at which the file should be played may also be specified. The shorthand property cue sets cue sounds for both before and after the element is presented. ","URL":"https://www.webplatform.org/docs/css/properties/cue-before"},"css/properties/cursor":{"SUMMARY":"

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element. ","URL":"https://www.webplatform.org/docs/css/properties/cursor","VALUES":[{"description":"

There are many standard cursors available: 

\n

These have varying support across different browsers — see the support section. The examples below feature different boxes with different cursor values set on them, so you can get an idea of what the different ones look like. ","value":"standard values "},{"description":"

CSS3 allows you to specify a custom cusor image along with an X and Y number values for the pointer hotspot, for example cursor: url(cursor2.png) 2 2, auto;. If not specified, the hotspot position defaults to the top left corner of the cursor image, or may be read from the meta data inside the image file, in the case of CUR and XBM format files. ","value":"url() hotspot-x hotspot-y, keyword; "},{"description":"

Instead of specifying a standard pointer type, you can specify a url() function pointing to a custom graphic to use as a cursor, which must be followed by a fallback keyword to use as a pointer if the image is not available (this can be auto or a standard keyword value). For example, cursor: url(), auto;

You can supply multiple url() functions separated by commas (url(), url(), auto for example), and the browser will use the earliest appropriate image it can find. Limitations include:

","value":"url(), keyword "}]},"css/properties/direction":{"SUMMARY":"

The direction CSS property specifies the text direction/writing direction. The rtl is used for Hebrew or Arabic text, the ltr is for other languages. ","URL":"https://www.webplatform.org/docs/css/properties/direction","VALUES":[{"description":"

Default. Content flows left to right. ","value":"ltr "},{"description":"

Content flows right to left. ","value":"rtl "}]},"css/properties/display":{"SUMMARY":"

This property specifies the type of rendering box used for an element. It is a shorthand property for many other display properties. ","URL":"https://www.webplatform.org/docs/css/properties/display","VALUES":[{"description":"

Generates a block element box. ","value":"block "},{"description":"

Generates a block element for laying out content in the flexbox model. This is a flexbox model value in CSS3. See flex. ","value":"flex "},{"description":"

Generates a block element for laying out content in the grid model. This is a grid box model value (an experimental tag in CSS 3.0). See grid. ","value":"grid "},{"description":"

Causes an element to use the specified or computed value of that property on its parent element. ","value":"inherit "},{"description":"

Generates one or more inline element boxes. ","value":"inline "},{"description":"

Generates a block element box that flows with surrounding content as if it were a single inline box--and behaves like a replaced element. ","value":"inline-block "},{"description":"

Generates an inline element for laying out content in the flexbox model. This is a flexbox model value in CSS3. See flex. ","value":"inline-flex "},{"description":"

Generates an inline element for laying out content in the grid model. This is a grid box model value (an experimental tag in CSS 3.0). See grid. ","value":"inline-grid "},{"description":"

Generates an inline principal block box and a marker box. ","value":"inline-list-item "},{"description":"

Generates a principal block box and a marker box. ","value":"list-item "},{"description":"

Causes an element to not appear in the formatting structure and have no effect on layout. Descendant elements and their content are likewise removed from the formatting structure. (This behavior cannot be overridden by setting the display property on the descendants.) Note: A display value of \"none\" does not create an invisible box; it creates no box at all. To render an element box's dimensions, yet have its contents be invisible, use the visibility property; see visibility. ","value":"none "},{"description":"

These values cause an element to behave like a table element, subject to certain restrictions. See the W3C tables specification. ","value":"table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption "}]},"css/properties/empty-cells":{"SUMMARY":"

Sets whether or not to display borders and background on empty cells in a table. ","URL":"https://www.webplatform.org/docs/css/properties/empty-cells","VALUES":[{"description":"

Does not render the cell ","value":"hide "},{"description":"

Renders empty cells with inherited borders and styles ","value":"show "}]},"css/properties/fill":{"SUMMARY":"

The ‘fill’ property paints the interior of the given graphical element. The area to be painted consists of any areas inside the outline of the shape. To determine the inside of the shape, all subpaths are considered, and the interior is determined according to the rules associated with the current value of the ‘fill-rule’ property. The zero-width geometric outline of a shape is included in the area to be painted. ","URL":"https://www.webplatform.org/docs/css/properties/fill","VALUES":[{"description":"

Properties ‘fill’ and ‘stroke’ take on a value of type <paint> ","value":"<paint> "}]},"css/properties/fill-opacity":{"SUMMARY":"

‘fill-opacity’ specifies the opacity of the painting operation used to paint the interior the current object. (See Painting shapes and text.) ","URL":"https://www.webplatform.org/docs/css/properties/fill-opacity","VALUES":[{"description":"","value":"inherit "}]},"css/properties/fill-rule":{"SUMMARY":"

The ‘fill-rule’ property indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies \"inside\"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of \"inside\" is not so obvious.

The ‘fill-rule’ property provides two options for how the inside of a shape is determined: ","URL":"https://www.webplatform.org/docs/css/properties/fill-rule","VALUES":[{"description":"","value":"evenodd "},{"description":"","value":"inherit "}]},"css/properties/filter":{"SUMMARY":"

Applies various image processing effects. This property is largely unsupported. See Compatibility section for more information. ","URL":"https://www.webplatform.org/docs/css/properties/filter","VALUES":[{"description":"

Any combination of built-in filter functions: blur(), brightness(), contrast(), custom(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), and sepia() ","value":"<function> "},{"description":"

A reference to an SVG <filter> element ","value":"url(path/to/filter.svg#filterID) "}]},"css/properties/flex":{"SUMMARY":"

The flex CSS property specifies the ability of a flex item to alter its dimensions to fill the available space. flex is a shorthand property comprised of the flex-grow, flex-shrink, and flex-basis properties. A flex item can be stretched to use available space proportional to its flex grow factor, or reduced proportional to its flex shrink factor to prevent overflow. ","URL":"https://www.webplatform.org/docs/css/properties/flex","VALUES":[{"description":"

An example of the shorthand values.

","value":"3 1 60% "},{"description":"

The shorthand value of this property includes the following values:

","value":"<flex-grow> <flex-shrink> <flex-basis> "},{"description":"

Equivalent to 1 1 auto

","value":"auto "},{"description":"

Equivalent 0 1 auto'

","value":"initial "},{"description":"

Equivalent to 0 0 auto

","value":"none "}]},"css/properties/flex-align":{"SUMMARY":"

Obsolete, do not use. This property has been renamed to align-items.

Specifies the alignment (perpendicular to the layout axis defined by the flex-direction property) of child elements of the object. ","URL":"https://www.webplatform.org/docs/css/properties/flex-align","VALUES":[{"description":"

The baselines (leading edge or trailing edge depending on the -ms-flex-direction property) of all child elements are aligned with each other.

The child element that occupies the most space, perpendicular to the layout axis, follows the start rule; the baselines of all remaining elements are then aligned with the baseline of this element. ","value":"baseline "},{"description":"

Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child. ","value":"center "},{"description":"

If the parent element has a computed value for flex-direction of row or column, the trailing edge of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element.

If the parent element has a computed value for flex-direction of row-reverse or column-reverse, the leading edge of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. ","value":"end "},{"description":"

If the parent element has a computed value for flex-direction of row or column, the leading edge (or baseline) of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element.

If the parent element has a computed value for -ms-flex-direction of row-reverse or column-reverse, the trailing edge (or baseline) of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. ","value":"start "},{"description":"

Initial value. Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the max-width or max-height property for a child element takes precedence and layout follows the start rule. ","value":"stretch "}]},"css/properties/flex-basis":{"SUMMARY":"

The flex-basis CSS property describes the initial main size of the flex item before any free space is distributed according to the flex factors described in the flex property (flex-grow and flex-shrink). ","URL":"https://www.webplatform.org/docs/css/properties/flex-basis","VALUES":[{"description":"

The flex item's initial main size is determined by either the width or height property, whichever is in the main dimension, as determined by the flex-direction property. Note that the value of the width or height property itself may be auto, in which case the size is determined by the flex item's contents. ","value":"auto "},{"description":"

In a vertical writing mode; percentage values of flex-basis are resolved against the flex item's flex container, and if that containing block's size is indefinite, the result is undefined. ","value":"height "},{"description":"

In a horizontal writing mode; percentage values of flex-basis are resolved against the flex item's flex container, and if that containing block's size is indefinite, the result is undefined. ","value":"width "}]},"css/properties/flex-direction":{"SUMMARY":"

The flex-direction CSS property describes how flex items are placed in the flex container, by setting the direction of the flex container's main axis. ","URL":"https://www.webplatform.org/docs/css/properties/flex-direction","VALUES":[{"description":"

The flex container's main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the before/head and after/foot directions, respectively, of the current writing mode. ","value":"column "},{"description":"

Same as 'column', except the main-start and main-end directions are swapped. ","value":"column-reverse "},{"description":"

The flex container's main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the start and end directions, respectively, of the current writing mode. ","value":"row "},{"description":"

Same as 'row', except the main-start and main-end directions are swapped. ","value":"row-reverse "}]},"css/properties/flex-flow":{"SUMMARY":"

The flex-flow CSS property defines the flex container's main and cross axis. It is a shorthand property for the flex-direction and flex-wrap properties. ","URL":"https://www.webplatform.org/docs/css/properties/flex-flow","VALUES":[{"description":"

The shorthand value includes the values of the following properties:

","value":"<flex-direction> <flex-wrap> "}]},"css/properties/flex-grow":{"SUMMARY":"

The flex-grow CSS property specifies how much a flex item will enlarge with respect to the other items in the flex container to fill an expanded container. ","URL":"https://www.webplatform.org/docs/css/properties/flex-grow","VALUES":[{"description":"

The flex grow factor, which describes the proportion by which the flex item will grow relative to the other flex items in the container. Negative numbers are invalid. ","value":"number "}]},"css/properties/flex-item-align":{"SUMMARY":"

Do not use. This property has been renamed to align-self

Specifies the alignment (perpendicular to the layout axis defined by flex-direction) of child elements of the object. ","URL":"https://www.webplatform.org/docs/css/properties/flex-item-align","VALUES":[{"description":"

Initial value. Indicates that the value of the flexbox item's -ms-flex-item-align property is equivalent to that of the parent flexbox element's -ms-flex-align property. ","value":"auto "},{"description":"

The baselines (leading edge or trailing edge depending on the -ms-flex-direction property) of all child elements are aligned with each other.

The child element that occupies the most space, perpendicular to the layout axis, follows the start rule; the baselines of all remaining elements are then aligned with the baseline of this element. ","value":"baseline "},{"description":"

Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child. ","value":"center "},{"description":"

If the parent element has a computed value for -ms-flex-direction of row or column, the trailing edge of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element.

If the parent element has a computed value for -ms-flex-direction of row-reverse or column-reverse, the leading edge of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. ","value":"end "},{"description":"

If the parent element has a computed value for -ms-flex-direction of row or column, the leading edge (or baseline) of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element.

If the parent element has a computed value for -ms-flex-direction of row-reverse or column-reverse, the trailing edge (or baseline) of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. ","value":"start "},{"description":"

Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the max-width or max-height property for a child element takes precedence and layout follows the start rule. ","value":"stretch "}]},"css/properties/flex-line-pack":{"SUMMARY":"

Do not use. This property has been renamed to align-content.

Specifies how a flexbox's lines align within the flexbox when there is extra space along the axis that is perpendicular to the axis defined by the flex-direction property. ","URL":"https://www.webplatform.org/docs/css/properties/flex-line-pack","VALUES":[{"description":"

All child elements are placed edge to edge with each other, as described in the descriptions for the [#start start] or [#end end] keywords. However, the group of child elements is centered between the starting and ending edges of the parent element so that all remaining space is evenly distributed before the first child element and after the last child element. ","value":"center "},{"description":"

Lines are evenly distributed in the flexbox, with half-size spaces on either end. If the leftover free space is negative or there is only a single line in the flexbox, this value is identical to [#center center]. Otherwise, the lines in the flexbox are distributed such that the empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flexbox are half the size of the other empty spaces. ","value":"distribute "},{"description":"

The ending edge of the first child element is placed at the end of the parent element; the ending edge of the next child element is placed edge to edge with the starting edge of the first child element; and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis. ","value":"end "},{"description":"

The starting edge of the first child element is placed at the start of the parent element; the ending edge of the last child element is placed edge to edge with the end of the parent box; and all remaining children are placed between the first and last child elements, so that any space that remains along the layout axis is equally distributed between child elements. ","value":"justify "},{"description":"

The starting edge of the first child element is placed at the start of the parent element; the starting edge of the next child element is placed edge to edge with the ending edge of the first child element; and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis. ","value":"start "},{"description":"

Lines stretch to take up the remaining space. If the leftover free space is negative, this value is identical to [#start start]. Otherwise, the free space is split equally between all of the lines, increasing their cross size. ","value":"stretch "}]},"css/properties/flex-order":{"SUMMARY":"

Gets or sets a value that specifies the ordinal group that a flexbox element belongs to. This ordinal value identifies the display order for the group. ","URL":"https://www.webplatform.org/docs/css/properties/flex-order","VALUES":[{"description":"

Integer value that identifies the group that a child element belongs to. ","value":"integer "}]},"css/properties/flex-shrink":{"SUMMARY":"

The flex-shrink CSS property specifies how much a flex item will be reduced with respect to the other items in the flex container to fit within a reduced container. ","URL":"https://www.webplatform.org/docs/css/properties/flex-shrink","VALUES":[{"description":"

The flex shrink factor, which describes the proportion by which the flex item will shrink relative to the other flex items in the container. Negative numbers are invalid. ","value":"number "}]},"css/properties/flex-wrap":{"SUMMARY":"

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction in which new lines are stacked. ","URL":"https://www.webplatform.org/docs/css/properties/flex-wrap","VALUES":[{"description":"

The flex container is single-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start. ","value":"nowrap "},{"description":"

The flex container is multi-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start. ","value":"wrap "},{"description":"

Same as wrap, except the cross-start and cross-end directions are swapped. ","value":"wrap-reverse "}]},"css/properties/float":{"SUMMARY":"

Elements which have the style float are floated horizontally. These elements can move as far to the left or right of the containing element. All elements after the floating element will flow around it, but elements before the floating element are not impacted. If several floating elements are placed after each other, they will float next to each other as long as there is room. ","URL":"https://www.webplatform.org/docs/css/properties/float","VALUES":[{"description":"

The footnote value indicates that the element is moved to the footnote area and that a footnote call is put in its original location. ","value":"footnote "},{"description":"

The left value indicates that the element must float to the far left side of its containing block. ","value":"left "},{"description":"

none indicates that the element does not contain any float at all. This is the initial value of the float property. ","value":"none "},{"description":"

The right value indicates that the element must float to the far right side of its containing block. ","value":"right "}]},"css/properties/flow-from":{"SUMMARY":"

Flows content from a named flow (specified by a corresponding flow-into) through selected elements to form a dynamic chain of layout regions. ","URL":"https://www.webplatform.org/docs/css/properties/flow-from","VALUES":[{"description":"

Identifier that replaces content from specified named flow, flowing it from one region element to another. ","value":"<ident> "},{"description":"

This container is not a region. Keeps element as is, and does not transform it into a region and replace its content. ","value":"none "}]},"css/properties/flow-into":{"SUMMARY":"

Diverts the selected element's content into a named flow, used to thread content through different layout regions specified by flow-from. ","URL":"https://www.webplatform.org/docs/css/properties/flow-into","VALUES":[{"description":"

String identifier that specifies a named flow into which to divert the element's content. Common keyword values such as none, inherit, default, auto, and initial are invalid flow names, as are element and content:

","value":"<ident> "},{"description":"

The element's content remains unchanged, and is not diverted to a flow unless an ancestor element specifies it. ","value":"none "}]},"css/properties/font":{"SUMMARY":"

The font property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, or you can set one of a choice of keywords to adopt a system font setting. ","URL":"https://www.webplatform.org/docs/css/properties/font","VALUES":[{"description":"

font can take up to six separate parts in its value, which set six different longhand property values. The options are as follows:

","value":"font-weight font-style font-variant font-size/line-height font-family "},{"description":"

Alternatively, you can set the value to be a single keyword that corresponds to a system font used to style a certain feature of the system the browser is running on (some browsers offer more, proprietary options. For more, see the links at the bottom of the document):

","value":"system font "}]},"css/properties/font-family":{"SUMMARY":"

The font-family property allows one or more font family names and/or generic family names to be specified for usage on the selected element(s)' text. The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character. ","URL":"https://www.webplatform.org/docs/css/properties/font-family","VALUES":[{"description":"

The name of a font family, such as courier or arial. You can reference fonts available on the user's system, or external fonts imported using @font-face. When the family name contains more than one word, it should be enclosed in quotes, for example 'Comic Sans'. ","value":"family-name "},{"description":"

You can specify a comma-separated list of multiple font family names and/or generic family names, although it rarely makes sense to specify more than one generic family. This list is called a font-stack. The browser goes down the list and uses the first available font that it can find available on the system. Generic font families are used as a fallback when none of the fonts specified in the stack are available. It is always the last alternative in the list of font family names. ","value":"family-name, family-name, generic-family "},{"description":"

generic families are not specific fonts, but a reference to fallback fonts of a general type that can be used when specific fonts are not available. The actual fonts used for each fallback type may differ between operating systems. The following generic family keywords are defined: serif, sans-serif, cursive, fantasy and monospace. ","value":"generic-family "}]},"css/properties/font-feature-settings":{"SUMMARY":"

The font-feature-settings property gets or sets one or more values that specify glyph substitution (special font characters such as ligatures and figures) and positioning in fonts that include OpenType layout features. ","URL":"https://www.webplatform.org/docs/css/properties/font-feature-settings","VALUES":[{"description":"

This property can take up to two separate parts in its value. The options are as follows:

","value":"\"OpenType feature tag\" Indicator "},{"description":"

Default. No change in glyph substitution or positioning occurs. ","value":"normal "}]},"css/properties/font-kerning":{"SUMMARY":"

The font-kerning property allows contextual adjustment of inter-glyph spacing, i.e. the spaces between the characters in text. This property controls <bold>metric kerning</bold> - that utilizes adjustment data contained in the font. Optical Kerning is not supported as yet. ","URL":"https://www.webplatform.org/docs/css/properties/font-kerning","VALUES":[{"description":"

Used to specify kerning is at the discretion of the user agent. ","value":"auto "},{"description":"

Specifies kerning is not applied ","value":"none "},{"description":"

Specifies kerning is applied. Fonts that do not include kerning data are unaffected by this setting. ","value":"normal "}]},"css/properties/font-language-override":{"SUMMARY":"

The ‘font-language-override’ property allows authors to explicitly specify the language system of the font, overriding the language system implied by the content language. ","URL":"https://www.webplatform.org/docs/css/properties/font-language-override","VALUES":[{"description":"

specifies that when rendering with OpenType fonts, the content language of the element is used to infer the OpenType language system ","value":"normal "},{"description":"

single three-letter case-sensitive OpenType language system tag, specifies the OpenType language system to be used instead of the language system implied by the language of the element ","value":"<string> "}]},"css/properties/font-size":{"SUMMARY":"

font-size sets the font size of the text inside the element to which it is applied, and that of its descendants. You can size text using absolute measurements, or measurements relative to the affected element's parent or root elements. CSS Text Styling Fundamentals provides an overview. ","URL":"https://www.webplatform.org/docs/css/properties/font-size","VALUES":[{"description":"

A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser's default values. From smallest to largest, possible values are xx-small, x-small, small, medium, large, x-large, and xx-large. ","value":"absolute keywords "},{"description":"

The inherit keyword causes the element to adopt its parent element's font size. ","value":"inherit "},{"description":"

An absolute unit value: any of the standard css length units are allowed. Negative lengths are illegal. ","value":"length "},{"description":"

A percentage value specifies an absolute font size relative to the parent element's font-size. ","value":"percentage "},{"description":"

A set of keywords interpreted relative to the parent element's font-size — either smaller or larger. ","value":"relative keywords "}]},"css/properties/font-size-adjust":{"SUMMARY":"

The font-size-adjust property adjusts the font-size of the fallback fonts defined with font-family, so that the x-height is the same no matter what font is used. This preserves the readability of the text when fallback happens. ","URL":"https://www.webplatform.org/docs/css/properties/font-size-adjust","VALUES":[{"description":"

The aspect value is calculated by the browser for the first font in the font-family list, and used for every font in that list. ","value":"auto "},{"description":"

Only use the font-size value to determine the size of the font. ","value":"none "},{"description":"

The value used in calculating the size of the fallback fonts. For the adjusted font size calculation, see Notes. ","value":"number "}]},"css/properties/font-stretch":{"SUMMARY":"

Allows you to expand or condense the widths for a normal, condensed, or expanded font face. ","URL":"https://www.webplatform.org/docs/css/properties/font-stretch","VALUES":[{"description":"

Some font faces incorporate a condensed option, this is the equivalent of that setting. ","value":"condensed "},{"description":"

Some font faces incorporate an expanded option, this is the equivalent of that setting. ","value":"expanded "},{"description":"

This is the second most condensed setting. ","value":"extra-condensed "},{"description":"

This is the second most expanded setting. ","value":"extra-expanded "},{"description":"

This condenses the font face in Internet Explorer only. ","value":"narrower (Internet Explorer only) "},{"description":"

This is the default setting. ","value":"normal "},{"description":"

This is the least condensed setting. ","value":"semi-condensed "},{"description":"

This is the least expanded setting. ","value":"semi-expanded "},{"description":"

This is the most condensed setting. ","value":"ultra-condensed "},{"description":"

This is the most expanded setting. ","value":"ultra-expanded "},{"description":"

This expands the font face in Internet Explorer only. ","value":"wider (Internet Explorer only) "}]},"css/properties/font-style":{"SUMMARY":"

The font-style property allows normal, italic, or oblique faces to be selected. Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face. Oblique faces can be simulated by artificially sloping the glyphs of the regular face. ","URL":"https://www.webplatform.org/docs/css/properties/font-style","VALUES":[{"description":"

Selects a font that is labeled as 'italic' (cursive). If no font labeled 'italic' is available, a font that is labeled as 'oblique' is selected. ","value":"italic "},{"description":"

Selects a face that is classified as a normal face (one that is neither italic or oblique). ","value":"normal "},{"description":"

Selects a font that is labeled as 'oblique' (sloped version of the regular face). If no italic or oblique font is available, the browser slopes the normal version of the font to produce an oblique approximation. ","value":"oblique "}]},"css/properties/font-synthesis":{"SUMMARY":"

This value specifies whether the user agent is allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces. ","URL":"https://www.webplatform.org/docs/css/properties/font-synthesis","VALUES":[{"description":"

user agent is not allowed to synthesize bold or oblique font when not available. ","value":"none "},{"description":"

user agent is only allowed to synthesize oblique font when not available but not bold. ","value":"style "},{"description":"

user agent is only allowed to synthesize bold font when not available but not oblique. ","value":"weight "},{"description":"

user agent is allowed to synthesize both bold and oblique. ","value":"weight style "}]},"css/properties/font-variant":{"SUMMARY":"

The font-variant property enables you to select the small-caps font within a font family. ","URL":"https://www.webplatform.org/docs/css/properties/font-variant","VALUES":[{"description":"

Inherits the font-variant setting from its parent. ","value":"inherit "},{"description":"

Selects a font that is not a 'small-caps' font, usually the available 'normal' font. ","value":"normal "},{"description":"

Selects a 'small-caps' font. If not small caps variant is available, the browser generates a small caps approximation. ","value":"small-caps "}]},"css/properties/font-variant-alternates":{"SUMMARY":"

Fonts can provide alternate glyphs in addition to default glyph for a character. This property provides control over the selection of these alternate glyphs. ","URL":"https://www.webplatform.org/docs/css/properties/font-variant-alternates","VALUES":[{"description":"

None of the feature glyphs are enabled. ","value":"normal "},{"description":"

historical-forms Enables display of historical forms ","value":"stylistic(<feature-value-name>) "}]},"css/properties/font-weight":{"SUMMARY":"

The font-weight property specifies the weight or boldness of the font (their degree of blackness or stroke thickness). Note that some fonts are not available in all weights; some are available only on normal and bold. ","URL":"https://www.webplatform.org/docs/css/properties/font-weight","VALUES":[{"description":"

Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, a face with a nearby weight is used. ","value":"100, 200, 300, 400, 500, 600, 700, 800, 900 "},{"description":"

Bold font weight. Same as 700. ","value":"bold "},{"description":"

One font weight darker than the parent element (among the available weights of the font). ","value":"bolder "},{"description":"

One font weight lighter than the parent element (among the available weights of the font). ","value":"lighter "},{"description":"

Normal font weight. Same as 400. ","value":"normal "}]},"css/properties/grid":{"SUMMARY":"

Foundation of a two-dimensional grid-based layout system. Defines an element as part of a grid and permits those elements to be displayed differently than the flow order. Also used as a shorthand for setting all the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), as well as all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration. If the <grid-auto-rows> value is omitted, it is set to the value specified for grid-auto-columns. Other omitted values are set to their initial values. ","URL":"https://www.webplatform.org/docs/css/properties/grid","VALUES":[{"description":"

See grid-auto-columns and grid-auto-rows for details. ","value":"<grid-auto-columns> / <grid-auto-rows> "},{"description":"

See grid-auto-flow for details. ","value":"<grid-auto-flow> "},{"description":"

Itself a shorthand property, see grid-template for details. ","value":"<grid-template> "}]},"css/properties/grid-area":{"SUMMARY":"

Lays out one or more grid items bound by 4 grid lines. Shorthand for setting grid-column-start, grid-column-end, grid-row-start, and grid-row-end in a single declaration. ","URL":"https://www.webplatform.org/docs/css/properties/grid-area","VALUES":[{"description":"

The resolution order of values for this shorthand is grid-row-start, grid-column-start, grid-row-end, grid-column-end. That is, if four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value.

When grid-column-end is omitted, if grid-column-start is an <ident>, grid-column-end is set to that <ident>; otherwise, it is set to auto.

When grid-row-end is omitted, if grid-row-start is an <ident>, grid-row-end is set to that <ident>; otherwise, it is set to auto.

When grid-column-start is omitted, if grid-row-start is an <ident>, all four longhands are set to that value. Otherwise, it is set to auto. ","value":"<grid-line> [ <grid-line> [ <grid-line> [ <grid-line> ] ] ] "}]},"css/properties/grid-auto-columns":{"SUMMARY":"

Changes default size of columns. Creates implicit grid tracks when a grid item is placed into a row or column that is not explicitly sized (by grid-template-rows or grid-template-columns). This property (with grid-auto-rows) specifies the default size of such implicitly-created tracks. ","URL":"https://www.webplatform.org/docs/css/properties/grid-auto-columns","VALUES":[{"description":"

A space-separated track list specifying the line names and track sizing functions of the grid. See track sizing in specification for details. ","value":"<track-size> "}]},"css/properties/grid-auto-flow":{"SUMMARY":"

Automatically places grid elements into the grid layout if an explicit location is not designated. Designates the direction of the the flow and whether rows or columns must be added to accommodate the element. ","URL":"https://www.webplatform.org/docs/css/properties/grid-auto-flow","VALUES":[{"description":"

Fills each column in turn, adding new columns as necessary. ","value":"columns "},{"description":"

Uses a \"dense\" packing algorithm approach to fill in holes in the grid as smaller items appear.

Note: This may cause items to appear out-of-order. ","value":"dense "},{"description":"

Causes auto-placed grid items to be placed according to the grid-auto-position property, rather than using the auto-placement algorithm. ","value":"none "},{"description":"

Fills each row in turn, adding new rows as necessary. ","value":"rows "},{"description":"

Permanently skips cells that are not filled with the current item. The default auto-pacement algorithm packing approach. ","value":"sparse "}]},"css/properties/grid-auto-position":{"SUMMARY":"

Specifies the automatic default location if a grid container does not specify automatic-placement strategy via grid-auto-flow. ","URL":"https://www.webplatform.org/docs/css/properties/grid-auto-position","VALUES":[{"description":"

Specifies the default starting grid column and grid row, respectively. The two <grid-line> values are treated as though they were specified by grid-column-start and grid-column-end. ","value":"<grid-line> / <grid-line> "}]},"css/properties/grid-auto-rows":{"SUMMARY":"

Changes default size of grid rows. Creates implicit grid tracks when a grid item is placed into a row that is not explicitly sized (by grid-template-rows ) or when the auto-placement algorithm has generated additional rows. This property (with grid-auto-columns) specifies the size of such implicitly-created tracks. ","URL":"https://www.webplatform.org/docs/css/properties/grid-auto-rows","VALUES":[{"description":"

A space-separated track list specifying the line names and track sizing functions of the grid. ","value":"<track-size> "}]},"css/properties/grid-column":{"SUMMARY":"

Controls a grid item's placement in a grid area, particularly grid position and a grid span. Shorthand for setting grid-column-start and grid-column-end in a single declaration. ","URL":"https://www.webplatform.org/docs/css/properties/grid-column","VALUES":[{"description":"

If two <grid-line> values are specified, the grid-column-start property is set to the value before the slash, and the grid-column-end property is set to the value after the slash. If the second value is omitted, then if the first value is an identifier (<ident>), the grid-column-end property is also set to that <ident>; otherwise, it is set to \"auto\". ","value":"<grid-line> [ / <grid-line> ] "}]},"css/properties/grid-column-end":{"SUMMARY":"

Controls a grid item's placement in a grid area as well as grid position and a grid span. The grid-column-end property (with grid-row-start, grid-row-end, and grid-column-start) determines a grid item's placement by specifying the grid lines of a grid item's grid area. ","URL":"https://www.webplatform.org/docs/css/properties/grid-column-end","VALUES":[{"description":"

The default property that does not alter the grid item’s placement. ","value":"auto "},{"description":"

Contributes a line, a span, or nothing (automatic) to the item's row placement or column placement. ","value":"<grid-line> "},{"description":"

Specifies that the corresponding edge of the item's grid area is the grid line at the before edge of the named grid area. If the named grid area doesn't exist, this value is treated as ‘auto’ (computing either to ‘auto’ or ‘span 1’). ","value":"<ident> "},{"description":"

Contributes a line to the placement by specifying the Nth grid line. (Negative integers are allowed, but zero is not; if <integer> is omitted, it defaults to 1.) If a name is given as an <ident>, only lines with that name are counted. If no line with that name exists, it instead specifies the first grid line (or the last, if <integer> is negative). If not enough lines of that name exist, it specifies the last such named line (or the first, if the <integer> is negative). ","value":"<integer> <ident> "},{"description":"

Contributes a grid span to the placement by specifying that the corresponding edge of the item’s grid area is N grid lines from the opposite edge of the item's grid area. (Negative integers and zero are not allowed; if <integer> is omitted, it defaults to 1.) If a name is given as an <ident>, only lines with that name are counted. If no line with that name exists, the name is ignored. If not enough lines of that name exist, it spans to the last such named line. ","value":"span [ <integer> or <ident>] "}]},"css/properties/grid-column-position":{"SUMMARY":"

Specifies the column position to place a grid item based upon integer location, string value, or column size. ","URL":"https://www.webplatform.org/docs/css/properties/grid-column-position","VALUES":[{"description":"

Places a Grid item based on an automatic placement algorithm. ","value":"auto "},{"description":"

Refers to a named Grid area and computes to a Grid line with the starting edge of the Grid area. ","value":"<identifier> "},{"description":"

A value that specifies a grid line in the grid. ","value":"<integer> "},{"description":"

A name value that specifies a named grid line. ","value":"<string> "}]},"css/properties/grid-column-span":{"SUMMARY":"

See css/properties/grid-column. This property has been removed from the specification. ","URL":"https://www.webplatform.org/docs/css/properties/grid-column-span","VALUES":[{"description":"

Integer value that specifies the number of columns to span. ","value":"integer "}]},"css/properties/grid-column-start":{"SUMMARY":"

Determines a grid item's placement by specifying the starting grid lines of a grid item's grid area . A grid item's placement in a grid area consists of a grid position and a grid span. See also ( grid-row-start, grid-row-end, and grid-column-end) ","URL":"https://www.webplatform.org/docs/css/properties/grid-column-start","VALUES":[{"description":"

Default setting. Contributes nothing to the grid item’s placement. ","value":"auto "},{"description":"

Contributes a line, a span, or nothing (automatic) to the item's row placement or column placement. ","value":"<grid-line> "},{"description":"

If there is a named grid area with the specified name, contributes a line to the placement by specifying the line at the corresponding edge of that named grid area. Otherwise, if there is a named line with the specified name, contributes a line to the placement by specifying the first line of that name. Otherwise, contributes nothing to the placement. ","value":"<ident> "},{"description":"

Contributes a line to the placement by specifying the Nth grid line. (Negative integers are allowed, but zero is not; if <integer> is omitted, it defaults to 1.) If a name is given as an <ident>, only lines with that name are counted. If no line with that name exists, it instead specifies the first grid line (or the last, if <integer> is negative). If not enough lines of that name exist, it specifies the last such named line (or the first, if the <integer> is negative). ","value":"<integer> <ident> "},{"description":"

Contributes a grid span to the placement by specifying that the corresponding edge of the item’s grid area is N grid lines from the opposite edge of the item's grid area. (Negative integers and zero are not allowed; if <integer> is omitted, it defaults to 1.) If a name is given as an <ident>, only lines with that name are counted. If no line with that name exists, the name is ignored. If not enough lines of that name exist, it spans to the last such named line. ","value":"span [ <integer> or <ident> ] - "}]},"css/properties/grid-definition-columns":{"SUMMARY":"

This property can specify the length, a percentage of the grid container’s size, a measurement of the contents occupying the column, or a fraction of the free space in the grid. You can also specify a range using minmax(), which combines any of these measurements to define a min and max size for the column.

As well as referring to grid lines by their numerical index, you can also name lines. Names can make the grid-placement properties easier to understand and maintain. Lines can have multiple names, such as 'first' and 'header'. ","URL":"https://www.webplatform.org/docs/css/properties/grid-definition-columns","VALUES":[{"description":"

No initial grid; any columns are implicitly generated with their size determined by the ‘grid-auto-columns’ property. ","value":"none "},{"description":"

The track-list syntax is:

<track-list> = [ <string>* [ <track-size> | <repeat-function> ] ]+ <string>*

<track-size> = minmax( <track-breadth> , <track-breadth> ) | auto | <track-breadth>

<track-breadth> = <length> | <percentage> | <flex> | min-content | max-content

Where the values are described as:

","value":"<track-list> "}]},"css/properties/grid-definition-rows":{"SUMMARY":"

This property can specify the length, a percentage of the grid container’s size, a measurement of the contents occupying the row, or a fraction of the free space in the grid. You can also specify a range using minmax(), which combines any of these measurements to define a min and max size for the row.

As well as referring to grid lines by their numerical index, you can also name lines. Names can make the grid-placement properties easier to understand and maintain. Lines can have multiple names, such as 'first' and 'header'. ","URL":"https://www.webplatform.org/docs/css/properties/grid-definition-rows","VALUES":[{"description":"

No initial grid; any rows are implicitly generated with their size determined by the ‘grid-auto-rows’ property. ","value":"none "},{"description":"

The track-list syntax is:

<track-list> = [ <string>* [ <track-size> | <repeat-function> ] ]+ <string>*

<track-size> = minmax( <track-breadth> , <track-breadth> ) | auto | <track-breadth>

<track-breadth> = <length> | <percentage> | <flex> | min-content | max-content

Where the values are described as:

","value":"<track-list> "}]},"css/properties/grid-row":{"SUMMARY":"

Gets or sets a value that indicates which row an element within a Grid should appear in. Shorthand for setting grid-row-start and grid-row-end in a single declaration. ","URL":"https://www.webplatform.org/docs/css/properties/grid-row","VALUES":[{"description":"

If two <grid-line> values are specified, the grid-row-start property is set to the value before the slash, and the grid-row-end property is set to the value after the slash.

When the second value is omitted, then if the first value is an identifier (<ident>), the grid-row-end property is also set to that <ident>; otherwise, it is set to \"auto\". ","value":"<grid-line> [ / <grid-line> ] "}]},"css/properties/grid-row-end":{"SUMMARY":"

Determines a grid item’s placement by specifying the block-end. A grid item's placement in a grid area consists of a grid position and a grid span. The grid-row-end property (with grid-row-start, grid-column-start, and grid-column-end) determines a grid item's placement by specifying the grid lines of a grid item's grid area. ","URL":"https://www.webplatform.org/docs/css/properties/grid-row-end","VALUES":[{"description":"

Contributes nothing to the grid item’s placement. Uses existing criteria. ","value":"auto "},{"description":"

Contributes a line to the item's row placement or column placement. ","value":"<grid-line> "},{"description":"

If there is a named grid area with the specified name, contributes a line to the placement by specifying the line at the corresponding edge of that named grid area. Otherwise, if there is a named line with the specified name, contributes a line to the placement by specifying the first line of that name. Otherwise, contributes nothing to the placement. ","value":"<indent> "},{"description":"

Contributes a line to the placement by specifying the Nth grid line. (Negative integers are allowed, but zero is not; if <integer> is omitted, it defaults to 1.) If a name is given as an <ident>, only lines with that name are counted. If no line with that name exists, it instead specifies the first grid line (or the last, if <integer> is negative). If not enough lines of that name exist, it specifies the last such named line (or the first, if the <integer> is negative). ","value":"<integer> <ident> "},{"description":"

Contributes a grid span to the placement by specifying that the corresponding edge of the item’s grid area is N grid lines from the opposite edge of the item's grid area. (Negative integers and zero are not allowed; if <integer> is omitted, it defaults to 1.) If a name is given as an <ident>, only lines with that name are counted. If no line with that name exists, the name is ignored. If not enough lines of that name exist, it spans to the last such named line. ","value":"<span> [<integer> or <ident>] "}]},"css/properties/grid-row-position":{"SUMMARY":"

Specifies a row position based upon an integer location, string value, or desired row size.

css/properties/grid-row is used as short-hand for grid-row-position and grid-row-position ","URL":"https://www.webplatform.org/docs/css/properties/grid-row-position","VALUES":[{"description":"

Automatically places an item using the auto-placement algorithm. ","value":"auto "},{"description":"

Identifies the specified row. ","value":"integer "},{"description":"

Places an item with contiguous space available to the <integer> value. Using the <string> value only considers lines with that name. ","value":"span [integer] [string] "},{"description":"

Identifies the specified row. ","value":"string "}]},"css/properties/grid-row-start":{"SUMMARY":"

A grid item's placement in a grid area consists of a grid position and a grid span. The grid-row-start property (with grid-row-end, grid-column-start, and grid-column-end) determines a grid item's placement by specifying the grid lines of a grid item's grid area. ","URL":"https://www.webplatform.org/docs/css/properties/grid-row-start","VALUES":[{"description":"

Contributes a line, a span, or nothing (automatic) to the item's row placement or column placement. Values have the following meanings:

","value":"<grid-line> "}]},"css/properties/grid-template":{"SUMMARY":"

Shorthand for setting grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration. ","URL":"https://www.webplatform.org/docs/css/properties/grid-template","VALUES":[{"description":"

Sets grid-template-columns and grid-template-rows to the specified values, and sets grid-template-areas to \"none\". ","value":"<grid-template-columns> / <grid-template-rows> "},{"description":"

Sets all three individual properties to their initial values (\"none\"). ","value":"none "},{"description":"

Sets grid-template-columns to the track listing specified before the slash (or \"none\", if not specified). Sets grid-template-areas to the strings listed after the slash. Sets grid-template-rows to the <track-size>s following each string (filling in \"auto\" for any missing sizes), and splicing in the named lines defined before/after each size.

This syntax allows the author to align track names and sizes inline with their respective grid areas. ","value":"<track-list> / <line-names> <string> <track-size> <line-names> "}]},"css/properties/grid-template-areas":{"SUMMARY":"

Specifies named grid areas which are not associated with any particular grid item, but can be referenced from the grid-placement properties. The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand. ","URL":"https://www.webplatform.org/docs/css/properties/grid-template-areas","VALUES":[{"description":"

The grid container does not define any named grid areas. ","value":"none "},{"description":"

A row is created for every separate string listed, and a column is created for each identifier or period (\".\") in the string. A period represents an unnamed area in the grid container. An identifier creates a named grid area with the identifier as its name. ","value":"<string> "}]},"css/properties/grid-template-columns":{"SUMMARY":"

Specifies (with grid-template-rows) the line names and track sizing functions of the grid. Each sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. ","URL":"https://www.webplatform.org/docs/css/properties/grid-template-columns","VALUES":[{"description":"

Indicates that there is no explicit grid; any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties. ","value":"none "},{"description":"

Indicates that the grid will align to its parent grid in that axis. Rather than specifying the sizes of rows/columns explicitly, they will be taken from the parent grid’s definition. If the grid container is not a grid item, this value computes to \"none\". ","value":"subgrid <line-name-list> "},{"description":"

Specifies the track list for the grid columns. See specification for complete syntax. ","value":"<track-list> "}]},"css/properties/grid-template-rows":{"SUMMARY":"

Specifies (with grid-template-columns) the line names and track sizing functions of the grid. Each sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. ","URL":"https://www.webplatform.org/docs/css/properties/grid-template-rows","VALUES":[{"description":"

Indicates that there is no explicit grid; any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties. ","value":"none "},{"description":"

Indicates that the grid will align to its parent grid in that axis. Rather than specifying the sizes of rows/columns explicitly, they will be taken from the parent grid’s definition. If the grid container is not a grid item, this value computes to \"none\". ","value":"subgrid <line-name-list> "},{"description":"

Specifies the track list for the grid columns. See specification for complete syntax. ","value":"<track-list> "}]},"css/properties/hanging-punctuation":{"SUMMARY":"

If a punctuation mark is present, this property determines if the punctuation mark hangs and whether it can be placed outside the line box and the start or at the end of a line of text. ","URL":"https://www.webplatform.org/docs/css/properties/hanging-punctuation","VALUES":[{"description":"

A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification. ","value":"allow-end "},{"description":"

This is an opening bracket or quote that is at the start of the first formatted line of an element that hangs. Any characters in the Unicode categories Ps, Pf, Pi are applied. ","value":"first "},{"description":"

A stop or comma at the end of a line hangs ","value":"force-end "},{"description":"

This is a closing bracket or quote of an element at the end of the last formatted line. The element hangs and this applies to any characters in the Unicode categories Pe, Pf, and Pi. ","value":"last "},{"description":"

No character hangs ","value":"none "}]},"css/properties/height":{"SUMMARY":"

Sets the height of an element. The content area of the element height does not include the padding, border, and margin of the element. ","URL":"https://www.webplatform.org/docs/css/properties/height","VALUES":[{"description":"

If auto is set for the elements height, the browser will determine the height for the element. ","value":"auto "},{"description":"

The containing block height minus horizontal margin, border, and padding ","value":"available "},{"description":"

If border-box is used, the height or percentage defined will be applied to the element's border box. ","value":"border-box "},{"description":"

If content-box is used, the height or percentage defined will be applied to the element's content-box. ","value":"content-box "},{"description":"

This will be either the large of the minimum height or the smaller of the preferred height and the available height ","value":"fit-content "},{"description":"

Will take a number that is immediately followed by a length unit such as px, em, in, etc. ","value":"height "},{"description":"

The intrinsic preferred height ","value":"max-content "},{"description":"

The intrinsic minimum height ","value":"min-content "},{"description":"

Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly. Negative values are not allowed. ","value":"percentage "}]},"css/properties/hyphenate-limit-chars":{"SUMMARY":"

Specifies the minimum number of characters in a hyphenated word ","URL":"https://www.webplatform.org/docs/css/properties/hyphenate-limit-chars","VALUES":[{"description":"

One to three integer values, corresponding to the word limit, the minimum number of characters required before a hyphenation break, and the minimum number of characters required following a hyphenation break, respectively.

If the third value is missing it is equal to the second.

If the second and third values are missing they are given a value of auto.

Negative values are not allowed. ","value":"integer "},{"description":"

Corresponds to a value of 5 2 2, indicating a 5-character word limit, 2 characters required before a hyphenation break, and 2 characters required following a hyphenation break. ","value":"auto "}]},"css/properties/hyphenate-limit-lines":{"SUMMARY":"

Indicates the maximum number of successive hyphenated lines in an element. The ‘no-limit’ value means that there is no limit. ","URL":"https://www.webplatform.org/docs/css/properties/hyphenate-limit-lines","VALUES":[{"description":"

Indicates the maximum number of successive hyphenated lines.

For instance, if 2, then no more than 2 successive lines may end with a hyphenated word. If 0 then no lines may end with a hyphenated word. (Hyphenation is effectively disabled.)

Negative values are not allowed. ","value":"integer "},{"description":"

Indicates that hyphenation is not limited based on the number of consecutive hyphenated lines. In the flow above the consecutive hyphenated lines limit would be an infinitely large positive number. ","value":"no-limit "}]},"css/properties/hyphenate-limit-zone":{"SUMMARY":"

Specifies the maximum amount of trailing whitespace (before justification) that may be left in a line before hyphenation is triggered to pull part of a word from the next line back up into the current one. ","URL":"https://www.webplatform.org/docs/css/properties/hyphenate-limit-zone","VALUES":[{"description":"

Indicates the width of the hyphenation zone. Lengths set in font-relative units (em, ex, ch) tend to be more useful here. Negative values are not allowed. ","value":"length "},{"description":"

Specifies the width of the hyphenation zone, relative to the total line length. Negative values are not allowed. ","value":"percentage "}]},"css/properties/hyphens":{"SUMMARY":"

Specifies whether or not words in a sentence can be split by the use of a manual or automatic hyphenation mechanism. ","URL":"https://www.webplatform.org/docs/css/properties/hyphens","VALUES":[{"description":"

Indicates that, in addition to suggested word breaking opportunities, word breaking opportunities are allowed where determined by a hyphenation resource (dictionary). Soft hyphens take priority over other hyphenation opportunities, but are still subject to the hyphenation controlled properties. By providing a language for the text (via the HTML lang attribute for example), a User Agent can determine the correct place to break a word. ","value":"auto "},{"description":"

Indicates that word breaking is allowed only where word breaking opportunities are suggested. These suggestions may come in the form of soft hyphens or hard hyphens. Soft hyphens (Unicode U+00AD, HTML &shy;) can be inserted on the desired place. ","value":"manual "},{"description":"

Indicates that all word breaking is suppressed, even when explicitly specified with soft hyphens. ","value":"none "}]},"css/properties/justify-content":{"SUMMARY":"

The justify-content property aligns flex items along the main axis of the current line of the flex container, similarly to how align-items aligns items in the cross axis. ","URL":"https://www.webplatform.org/docs/css/properties/justify-content","VALUES":[{"description":"

Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of empty space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) ","value":"center "},{"description":"

Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. ","value":"flex-end "},{"description":"

Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. ","value":"flex-start "},{"description":"

Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘center’. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. ","value":"space-around "},{"description":"

Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘flex-start’. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. ","value":"space-between "}]},"css/properties/kerning-mode":{"SUMMARY":"

Obsolete: Unsupported ","URL":"https://www.webplatform.org/docs/css/properties/kerning-mode"},"css/properties/knock-out":{"SUMMARY":"

Defines whether an element group is a knock-out group. When a group is set to knock-out, the elements in the group only composite and blend with elements outside the group. When a group is set to preserve (the default), the elements composite normally and blend with other elements inside and outside the group. ","URL":"https://www.webplatform.org/docs/css/properties/knock-out","VALUES":[{"description":"

Elements in the group only composite and blend with elements outside the group. ","value":"knock-out "},{"description":"

Elements in the group composite normally and blend with other elements inside and outside the group. ","value":"preserve "}]},"css/properties/left":{"SUMMARY":"

Sets the left edge of an element ","URL":"https://www.webplatform.org/docs/css/properties/left","VALUES":[{"description":"

Default. Default position, according to the regular HTML layout of the page. ","value":"auto "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"

Integer, followed by a percent sign (%). The value is a percentage of the width of the parent object. ","value":"percentage "}]},"css/properties/letter-spacing":{"SUMMARY":"

The letter-spacing CSS property specifies the spacing behavior between text characters. ","URL":"https://www.webplatform.org/docs/css/properties/letter-spacing","VALUES":[{"description":"

Indicates inter-character space in addition to the default space between characters, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Values may be negative, but there may be implementation-specific limits. ","value":"length "},{"description":"

The spacing is the normal spacing for the current font. ","value":"normal "}]},"css/properties/line-break":{"SUMMARY":"

Deprecated. Gets or sets line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean. ","URL":"https://www.webplatform.org/docs/css/properties/line-break","VALUES":[{"description":"

Default. Normal line-breaking mode is applied. ","value":"normal "},{"description":"

Stricter line-breaking rules are enforced. ","value":"strict "}]},"css/properties/line-height":{"SUMMARY":"

The line-height property specifies the height of an inline block level element. The value of the line-height property cannot be negative. ","URL":"https://www.webplatform.org/docs/css/properties/line-height","VALUES":[{"description":"

The specified length is used in the calculation of the line box height: a number immediately followed by a length unit - px, em, pc, in, mm. Negative values cannot be used. ","value":"<length> "},{"description":"

This value has no effect on the rendering of the element and for block inline elements it is equivalent to 'normal.' ","value":"none "},{"description":"

Take the height fixed by the default css of the user browser. In most cases, it multiplies the height of the font by 1.2. ","value":"normal "},{"description":"

The used value of the property is this number multiplied by the element's font size. Negative values cannot be used. ","value":"<number> "},{"description":"

The value of this property is determined by multiplying this number by the element's font size. Negative values cannot be used. ","value":"<percentage> "}]},"css/properties/list-style":{"SUMMARY":"

Shorthand property that sets the list-style-type, list-style-position and list-style-image properties in one declaration. ","URL":"https://www.webplatform.org/docs/css/properties/list-style","VALUES":[{"description":"

Takes the same specified value as the property for the element's parent. (Acts similarly to other uses of inherit in CSS.) ","value":"inherit "},{"description":"

The list-style property can contain up to three components:

","value":"list-style-type list-style-position list-style-image "}]},"css/properties/list-style-image":{"SUMMARY":"

This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker. That also means that if the image is not available, it will show the style specified by list-style-property ","URL":"https://www.webplatform.org/docs/css/properties/list-style-image","VALUES":[{"description":"

Takes the same specified value as the property for the element's parent. (Acts similarly to other uses of inherit in CSS.) ","value":"inherit "},{"description":"

Default. No image is specified. ","value":"none "},{"description":"

Location of the image, where path/to/image.png is an absolute or relative URL. More details can be found at the css/functions/url() section. ","value":"url(path/to/image.png) "}]},"css/properties/list-style-position":{"SUMMARY":"

Specifies if the list-item markers should appear inside or outside the content flow. ","URL":"https://www.webplatform.org/docs/css/properties/list-style-position","VALUES":[{"description":"

Takes the same specified value as the property for the element's parent. (Acts similarly to other uses of inherit in CSS.) ","value":"inherit "},{"description":"

Marker is placed inside the text, and any wrapping text is aligned under the marker. ","value":"inside "},{"description":"

Default. Marker is placed outside the list item, and any wrapping text is not aligned under the marker. ","value":"outside "}]},"css/properties/list-style-type":{"SUMMARY":"

Specifies the type of list-item marker in a list. ","URL":"https://www.webplatform.org/docs/css/properties/list-style-type","VALUES":[{"description":"

The marker is traditional Armenian numbering ","value":"armenian "},{"description":"

circle ","value":"circle "},{"description":"

number. This is default for <ol> ","value":"decimal "},{"description":"

number with leading zeros (01, 02, 03, etc.) ","value":"decimal-leading-zero "},{"description":"

filled circle. This is default for <ul> ","value":"disc "},{"description":"

traditional Georgian numbering ","value":"georgian "},{"description":"

The value of the listStyleType property is inherited from parent element ","value":"inherit "},{"description":"

lower-alpha (a, b, c, d, e, etc.) ","value":"lower-alpha "},{"description":"

lower-greek ","value":"lower-greek "},{"description":"

lower-latin (a, b, c, d, e, etc.) ","value":"lower-latin "},{"description":"

lower-roman (i, ii, iii, iv, v, etc.) ","value":"lower-roman "},{"description":"

No marker is shown ","value":"none "},{"description":"

square ","value":"square "},{"description":"

upper-alpha (A, B, C, D, E, etc.) ","value":"upper-alpha "},{"description":"

upper-latin (A, B, C, D, E, etc.) ","value":"upper-latin "},{"description":"

upper-roman (I, II, III, IV, V, etc.) ","value":"upper-roman "}]},"css/properties/margin":{"SUMMARY":"

The margin property is shorthand to allow you to set all four margins of an element at once. Its equivalent longhand properties are margin-top, margin-right, margin-bottom and margin-left. Negative values are also allowed. ","URL":"https://www.webplatform.org/docs/css/properties/margin/","VALUES":[{"description":"

auto is replaced by some suitable value by the browser. For example, it can be used for centering of blocks.

div { width:50%; margin:0 auto; } centers the <div> container horizontally. ","value":"auto "},{"description":"

Causes the element it is applied to to take on the same margin values as its parent. ","value":"inherit "},{"description":"

Specifies a fixed length, using any standard CSS length units . Negative Values are allowed. ","value":"length "},{"description":"

A percentage relative to the width of the containing block. Negative values are allowed. ","value":"percentage "}]},"css/properties/margin-bottom":{"SUMMARY":"

margin-bottom sets the bottom margin of an element. ","URL":"https://www.webplatform.org/docs/css/properties/margin-bottom","VALUES":[{"description":"

The browser calculates a bottom margin dependent on the space available ","value":"auto "},{"description":"

Inherits the parent element's specified margin-bottom width. ","value":"inherit "},{"description":"

Specifies a fixed length, using any standard CSS length units . Negative Values are allowed. ","value":"length "},{"description":"

A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-bottom, the browser will take the percentage from the width, not the height of the containing block.) ","value":"percentage "}]},"css/properties/margin-left":{"SUMMARY":"

margin-left sets the left margin of an element. ","URL":"https://www.webplatform.org/docs/css/properties/margin-left","VALUES":[{"description":"

The browser calculates a left margin dependent on the space available. ","value":"auto "},{"description":"

Inherits the parent element's specified margin-left width. ","value":"inherit "},{"description":"

Specifies a fixed length, using any standard CSS length units . Negative Values are allowed. ","value":"length "},{"description":"

A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.) ","value":"percentage "}]},"css/properties/margin-right":{"SUMMARY":"

margin-right sets the right margin of an element. ","URL":"https://www.webplatform.org/docs/css/properties/margin-right","VALUES":[{"description":"

The browser calculates a right margin dependent on the space available. ","value":"auto "},{"description":"

Inherits the parent element's specified margin-right width. ","value":"inherit "},{"description":"

Specifies a fixed length, using any standard CSS length units . Negative Values are allowed. ","value":"length "},{"description":"

A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.) ","value":"percentage "}]},"css/properties/margin-top":{"SUMMARY":"

margin-top sets the top margin of an element. ","URL":"https://www.webplatform.org/docs/css/properties/margin-top","VALUES":[{"description":"

The browser calculates a bottom margin dependent on the space available. ","value":"auto "},{"description":"

Inherits the parent element's specified margin-top width. ","value":"inherit "},{"description":"

Specifies a fixed length, using any standard CSS length units . Negative Values are allowed. ","value":"length "},{"description":"

A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.) ","value":"percentage "}]},"css/properties/marquee-direction":{"SUMMARY":"

The marquee-direction determines the initial direction in which the marquee content moves. ","URL":"https://www.webplatform.org/docs/css/properties/marquee-direction","VALUES":[{"description":"

moves the content in normal reading order ","value":"forward "},{"description":"

moves the content in reverse reading order ","value":"reverse "}]},"css/properties/marquee-play-count":{"SUMMARY":"

This property specifies how many times the marquee content moves. ","URL":"https://www.webplatform.org/docs/css/properties/marquee-play-count","VALUES":[{"description":"

An infinite loop. The UA may stop after 16 loops. ","value":"infinite "},{"description":"

Any value of 0 and higher. If the value is greater than 16, the UA may stop after 16 loops. ","value":"<non-negative-integer> "}]},"css/properties/marquee-speed":{"SUMMARY":"

The marquee-speed determines how fast the marquee content scrolls. ","URL":"https://www.webplatform.org/docs/css/properties/marquee-speed","VALUES":[{"description":"

faster than normal ","value":"fast "},{"description":"

faster than slow, slower than fast ","value":"normal "},{"description":"

slower than normal ","value":"slow "}]},"css/properties/marquee-style":{"SUMMARY":"

The 'marquee-style' property determines a marquee's scrolling behavior. ","URL":"https://www.webplatform.org/docs/css/properties/marquee-style","VALUES":[{"description":"

Bounce back and forth. ","value":"alternate "},{"description":"

Start completely off one side, scroll all the way across and completely off. ","value":"scroll "},{"description":"

Start completely off one side, scroll in, and stop as soon as no more content is off that side. ","value":"slide "}]},"css/properties/mask":{"SUMMARY":"

This property is shorthand for setting mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite and mask-size. Omitted values are set to their original properties' initial values. ","URL":"https://www.webplatform.org/docs/css/properties/mask","VALUES":[{"description":"

Where <mask-layer> = <mask-reference> <masking-mode>? ","value":"<mask-layer> "}]},"css/properties/mask-border":{"SUMMARY":"

This property is shorthand for setting mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, and mask-border-repeat. Omitted values are set to their original properties' initial values. ","URL":"https://www.webplatform.org/docs/css/properties/mask-border","VALUES":[{"description":"

See mask-border-outset. ","value":"<mask-border-outset> "},{"description":"

See mask-border-repeat. ","value":"<mask-border-repeat> "},{"description":"

See mask-border-slice. ","value":"<mask-border-slice> "},{"description":"

See mask-border-source. ","value":"<mask-border-source> "},{"description":"

See mask-border-width. ","value":"<mask-border-width> "}]},"css/properties/mask-border-outset":{"SUMMARY":"

This property specifies the amount by which the mask box image area extends beyond the border box, similar to the CSS border-image-outset property. The four values set the outsets on the top, right, bottom, and left sides in that order. ","URL":"https://www.webplatform.org/docs/css/properties/mask-border-outset","VALUES":[{"description":"

Represents pixels if the image is a raster image or vector coordinates if the image is a vector image. ","value":"length "},{"description":"

Represents multiples of the corresponding computed border-width. ","value":"number "}]},"css/properties/mask-border-repeat":{"SUMMARY":"

This property specifies how the images for the sides and the middle part of the mask image are scaled and tiled. The first keyword applies to the horizontal sides, the second one applies to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first, similar to the CSS border-image-repeat property. ","URL":"https://www.webplatform.org/docs/css/properties/mask-border-repeat","VALUES":[{"description":"

The image is tiled (repeated) to fill the area. ","value":"repeat "},{"description":"

The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. ","value":"round "},{"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. ","value":"space "},{"description":"

The image is stretched to fill the area. ","value":"stretch "}]},"css/properties/mask-border-slice":{"SUMMARY":"

This property specifies inward offsets from the top, right, bottom, and left edges of the mask image, dividing it into nine regions: four corners, four edges, and a middle. The middle image part is discarded and treated as fully transparent black unless the fill keyword is present. The four values set the top, right, bottom and left offsets in that order, similar to the CSS border-image-slice property. ","URL":"https://www.webplatform.org/docs/css/properties/mask-border-slice","VALUES":[{"description":"

If present, causes the middle part of the mask image to be preserved. If omitted, the middle part of the mask image is discarded, i.e., treated as empty. ","value":"fill "},{"description":"

Represents pixels if the image is a raster image or vector coordinates if the image is a vector image. ","value":"<number> "},{"description":"

Refers to the size of the mask box image area: the width of the area for horizontal offsets, the height for vertical offsets. ","value":"<percentage> "}]},"css/properties/mask-border-source":{"SUMMARY":"

Specifies an image to be used as a mask. An image that is empty, fails to download, is non-existent, or cannot be displayed is ignored and does not mask the element. ","URL":"https://www.webplatform.org/docs/css/properties/mask-border-source","VALUES":[{"description":"

A CSS image. ","value":"<image> "},{"description":"

Counts as an image layer but does not mask the element. ","value":"none "}]},"css/properties/mask-border-width":{"SUMMARY":"

This property sets the width of the mask box image, similar to the CSS border-image-width property. ","URL":"https://www.webplatform.org/docs/css/properties/mask-border-width","VALUES":[{"description":"

If specified, the mask box image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice (see mask-border-slice). If the image does not have the required intrinsic dimension then the corresponding border-width is used. ","value":"auto "},{"description":"

Represents pixels if the image is a raster image or vector coordinates if the image is a vector image. ","value":"length "},{"description":"

Represents multiples of the corresponding computed border-width. ","value":"number "},{"description":"

Refers to the size of the mask border image area: the width of the area for horizontal offsets, the height for vertical offsets. ","value":"percentage "}]},"css/properties/mask-clip":{"SUMMARY":"

Determines the mask painting area, which defines the area that is affected by the mask. The painted content of an element may be restricted to this area. ","URL":"https://www.webplatform.org/docs/css/properties/mask-clip","VALUES":[{"description":"

The painted content is restricted (clipped) to the border box (painting box for objects without associated layout box). ","value":"border-box "},{"description":"

The painted content is restricted (clipped) to the content box (object bounding box for objects without associated layout box). ","value":"content-box "},{"description":"

The painted content is not restricted (not clipped). The mask painting area is set to the bounding client rect. ","value":"no-clip "},{"description":"

The painted content is restricted (clipped) to the padding box. ","value":"padding-box "}]},"css/properties/mask-composite":{"SUMMARY":"

This property allows to composite multiple mask layers define by mask-image with different Porter-Duff compositing modes. As of time of writing, this property is not yet implemented in most browsers. ","URL":"https://www.webplatform.org/docs/css/properties/mask-composite","VALUES":[{"description":"

The mask image layer closer to the user is placed above the next mask image layer. ","value":"add "},{"description":"

The non-overlaping parts of the mask image layer closer to the user and the next mask image layer are combined. ","value":"exclude "},{"description":"

The parts of the mask image layer closer to the user that overlap the next mask image layer replace the parts of the next mask image layer. ","value":"intersect "},{"description":"

The mask image layer closer to the user is placed where it falls outside of the next mask image layer. ","value":"subtract "}]},"css/properties/mask-image":{"SUMMARY":"

This property sets the mask image or the mask source of an element. ","URL":"https://www.webplatform.org/docs/css/properties/mask-image","VALUES":[{"description":"

A keyword indicating that the last direct child <mask> element of the element the mask-image property is applied to should be used as the mask source. It is equivalent to select(mask:last-of-type). ","value":"child "},{"description":"

A functional notation accepting a comma-separated list of compound selectors that represents the first matching child <mask> element in DOM tree order. ","value":"<child-selector> "},{"description":"

A CSS image. ","value":"<image> "},{"description":"

Counts as an image layer but does not mask the element. ","value":"none "},{"description":"

A URL reference to a <mask> element, e.g., url(commonmasks.svg#mask), or to a CSS image. ","value":"<url> "}]},"css/properties/mask-mode":{"SUMMARY":"

This property indicates whether the <mask-reference> is treated as a luminescence mask or as an alpha mask. ","URL":"https://www.webplatform.org/docs/css/properties/mask-mode","VALUES":[{"description":"

Indicates that the alpha values of the mask image should be used as the mask values. ","value":"alpha "},{"description":"

Implicitly sets alpha or luminance, depending on the <mask-reference> value of the mask-image property. If it is of type <mask-source>, the luminance values of the mask image should be used as the mask values; if it is of type <image>, the alpha values of the mask image should be used as the mask values. ","value":"auto "},{"description":"

Indicates that the luminance values of the mask image should be used as the mask values. ","value":"luminance "}]},"css/properties/mask-origin":{"SUMMARY":"

For elements rendered as a single box, specifies the mask positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes box-decoration-break operates on to determine the mask positioning area(s). ","URL":"https://www.webplatform.org/docs/css/properties/mask-origin","VALUES":[{"description":"

The position is relative to the border box (painting box for objects without associated layout box). ","value":"border-box "},{"description":"

The position is relative to the content box (object bounding box for objects without associated layout box). ","value":"content-box "},{"description":"

The position is relative to the padding box. (For single boxes, 0 0 is the upper left corner of the padding edge; 100% 100% is the lower right corner.) ","value":"padding-box "}]},"css/properties/mask-position":{"SUMMARY":"

This property sets the initial position of a mask image. Position can be specified in terms of percentages of the distance from upper left corner (original point) or using the keywords top, left, center, right, or bottom, similar to the CSS background-position property. ","URL":"https://www.webplatform.org/docs/css/properties/mask-position","VALUES":[{"description":"

Any standard CSS units are acceptable as mask-position values: px, ems, rems, mm, cm etc. Note that unit values specify the distance the top left corner of the mask is away from the top left corner of the element. For more details on these units, read Length units. ","value":"length length "},{"description":"

If only a single value is included, that is taken as the horizontal value, and the vertical value is set as center. ","value":"percentage "},{"description":"

Percentages are acceptable for mask-position values, and specify percentages of the overall width and height of the element in question. Note that percentage values specify the distance the top left corner of the mask is away from the top left corner of the element. ","value":"percentage percentage "},{"description":"

CSS3 includes the new four value mask-position syntax, which allows you to choose which sides of the element you are positioning the mask relative to (values 1 and 3), and then the distance away from those sides (values 2 and 4). So this example says that you want to position the mask 10 pixels from the bottom of the element, and 15 pixels from the right. If you miss out one of the offset values, the other is assumed to be 0. ","value":"bottom length right length "},{"description":"

mask-position can also be expressed as keywords: left top, top, right top, left, center, right, left bottom, bottom, right bottom. These values do not relate specifically to the position of the top left hand corner of the mask, but rather the overall position of the mask inside the element. So for example, a value of right top will make the right and top sides of the mask flush to the top and right sides of the element it is applied to; the top left corner won't be positioned at the top right of the element! ","value":"left top "}]},"css/properties/mask-repeat":{"SUMMARY":"

Specifies how mask images are tiled (repeated) after they have been sized and positioned. ","URL":"https://www.webplatform.org/docs/css/properties/mask-repeat","VALUES":[{"description":"

Tiling of the mask object does not occur; that is, it is placed once and not repeated. ","value":"no-repeat "},{"description":"

Tiling of the mask object occurs in both the x and y directions as often as needed to cover the background area. ","value":"repeat "},{"description":"

Tiling of the mask object occurs in the x direction. ","value":"repeat-x "},{"description":"

Tiling of the mask object occurs in the y direction. ","value":"repeat-y "},{"description":"

Tiling of the mask object occurs in both the x and y directions as often as will fit within the background positioning area. If it does not fit a whole number of times, it is rescaled so that it does. ","value":"round "},{"description":"

Tiling of the mask object occurs in both the x and y directions as often as will fit within the background positioning area without being clipped, and then the images are spaced out to fill the area. ","value":"space "}]},"css/properties/mask-size":{"SUMMARY":"

Specifies the size of the mask images, similar to the CSS background-size property. ","URL":"https://www.webplatform.org/docs/css/properties/mask-size","VALUES":[{"description":"

The intrinsic height/width of the mask image is used. ","value":"auto "},{"description":"

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and height can fit inside the background positioning area. ","value":"contain "},{"description":"

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and height can completely cover the background positioning area. ","value":"cover "},{"description":"

A floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). ","value":"length "},{"description":"

An integer, followed by a percent (%). A percentage value is relative to the background positioning area. ","value":"percentage "}]},"css/properties/mask-type":{"SUMMARY":"

Defines whether the content of the <mask> element is treated as as luminance mask or an alpha mask. ","URL":"https://www.webplatform.org/docs/css/properties/mask-type","VALUES":[{"description":"

Indicates that the alpha values of the mask should be used. ","value":"alpha "},{"description":"

Indicates that the luminance values of the mask should be used. ","value":"luminance "}]},"css/properties/max-font-size":{"SUMMARY":"

This property must not be used. It is no longer included in any standard or standard track specification, nor is it implemented in any browser. It is only used when the text-align-last property is set to size. It controls allowed adjustments of font-size to fit line content. ","URL":"https://www.webplatform.org/docs/css/properties/max-font-size","VALUES":[{"description":"

The rendering agent determines the minium font size. ","value":"auto "},{"description":"

The font size of the last line of an element is restricted to being less than either the computed font-size or this number, whichever is larger. ","value":"font-size "}]},"css/properties/max-height":{"SUMMARY":"

Sets the maximum height for an element. It prevents the height of the element to exceed the specified value. If min-height is specified and is greater than max-height, max-height is overridden. ","URL":"https://www.webplatform.org/docs/css/properties/max-height","VALUES":[{"description":"

See css calc function for mode details. ","value":"calc() "},{"description":"

Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fill-available "},{"description":"

If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fit-content "},{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Specifies a fixed height. Negative values are not allowed. See length for possible units. ","value":"length "},{"description":"

The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"max-content "},{"description":"

The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"min-content "},{"description":"

Default. Clears the max-height value. The height property can have any value. ","value":"none "},{"description":"

A <percentage> relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as none. Negative values are not allowed. ","value":"percentage "}]},"css/properties/max-width":{"SUMMARY":"

Sets the maximum width for an element. It limits the width property to be larger than the value specified in max-width. ","URL":"https://www.webplatform.org/docs/css/properties/max-width","VALUES":[{"description":"

See css calc function for mode details. ","value":"calc() "},{"description":"

Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fill-available "},{"description":"

If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fit-content "},{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Specifies a fixed width. Negative values are not allowed. See length for possible units. ","value":"length "},{"description":"

The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"max-content "},{"description":"

The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"min-content "},{"description":"

Default. Clears the max-width value. The width property can have any value. ","value":"none "},{"description":"

A <percentage> relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed. ","value":"percentage "}]},"css/properties/min-font-size":{"SUMMARY":"

Obsolete: unsupported.

This property is only used when the text-align-last property is set to size. It controls allowed adjustments of font-size to fit line content. ","URL":"https://www.webplatform.org/docs/css/properties/min-font-size","VALUES":[{"description":"

The rendering agent determines the minium font size. ","value":"auto "},{"description":"

The font size of the last line of an element is restricted to being greater than either the computed font-size or this number, whichever is smaller. ","value":"font-size "}]},"css/properties/min-height":{"SUMMARY":"

Sets the minimum height for an element. It prevents the height of the element to exceed the specified value. It overrides both the height & the max-height property if any them is specified below the min-height value. ","URL":"https://www.webplatform.org/docs/css/properties/min-height","VALUES":[{"description":"

Default. Behaves as 0 for non-flexbox elements. On flexbox acts as min-content. ","value":"auto "},{"description":"

See css calc function for mode details. ","value":"calc "},{"description":"

Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fill-available "},{"description":"

If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fit-content "},{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Specifies a fixed height. Negative values are not allowed. See length for possible units. ","value":"length "},{"description":"

The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"max-content "},{"description":"

The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"min-content "},{"description":"

A <percentage> relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as 0. Negative values are not allowed ","value":"percentage "}]},"css/properties/min-width":{"SUMMARY":"

Sets the minimum width of an element. It limits the width property to be not smaller than the value specified in min-width. ","URL":"https://www.webplatform.org/docs/css/properties/min-width","VALUES":[{"description":"

See css calc function for mode details. ","value":"calc() "},{"description":"

Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fill-available "},{"description":"

If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fit-content "},{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Specifies a fixed width. Negative values are not allowed. See length for possible units. ","value":"length "},{"description":"

The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"max-content "},{"description":"

The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"min-content "},{"description":"

Default. Clears the min-width value. The width property can have any value. ","value":"none "},{"description":"

A <percentage> relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed. ","value":"percentage "}]},"css/properties/object-fit":{"SUMMARY":"

The object-fit property defines how content of a replaced element (e.g., a video or an image) is made to fit the dimensions of its containing box. ","URL":"https://www.webplatform.org/docs/css/properties/object-fit","VALUES":[{"description":"

The replaced content is sized to maintain its aspect ratio while fitting within the element's content box ","value":"contain "},{"description":"

The replaced content is sized to maintain its aspect ratio while filling the element's entire content box ","value":"cover "},{"description":"

The replaced content is sized to fill the element's box ","value":"fill "},{"description":"

The replaced content is not resized to fit inside the element's content box ","value":"none "},{"description":"

Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size ","value":"scale-down "}]},"css/properties/opacity":{"SUMMARY":"

The opacity property controls transparency and opacity of an element. Its values range from 0 to 1. Assuming defaults at parent level, an element with an opacity of 1 is completely opaque, whereas and element with an opacity of 0 is completely transparent. The opacity used when rendering an element is the product of its opacity and the opacity of its ancestors. ","URL":"https://www.webplatform.org/docs/css/properties/opacity","VALUES":[{"description":"

A floating-point value between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. Any values outside the range will be clamped to this range. ","value":"alpha-value "},{"description":"

Indicates that the property takes the same computed value as the property for the element's parent. ","value":"inherit "}]},"css/properties/order":{"SUMMARY":"

The order property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups. ","URL":"https://www.webplatform.org/docs/css/properties/order","VALUES":[{"description":"

The ordinal group for this flex item. ","value":"<integer> "}]},"css/properties/orphans":{"SUMMARY":"

In typography terms, an orphan is the first line of a paragraph that is left behind on the old page while the paragraph continues on the next. The orphans CSS property refers to the minimum number of lines in a block container that must be left at the bottom of the old page. This property is normally used to control how page breaks occur. This property only affects paged media such as print. For example, if a paragraph can't fit on one page in its entirety it is split wherever it is possible. In this way single lines of a paragraph can appear on page before it continues on the next page. This is usually unwanted, so many word processors require at least two lines to be left on an old page, instead of one. You can give it either a positive number (where 2 is the default) or inherit.

Note that the orphan property does not generally affect non-paged media such as screen. However, browsers supporting both orphans and columns will apply the intended functionality to columns as well. Also, the property only affects block-level elements. ","URL":"https://www.webplatform.org/docs/css/properties/orphans","VALUES":[{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Only positive values are allowed. An Integer that specifies or receives the minimum number of lines to print at the bottom of a page. ","value":"integer "}]},"css/properties/outline":{"SUMMARY":"

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 rule. In most cases the use of this shortcut is preferable and more convenient.

Outlines differ from borders in the following ways:

","URL":"https://www.webplatform.org/docs/css/properties/outline","VALUES":[{"description":"

This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

The outline property can contain up to three components:

  • outline-color: This can take any valid CSS color as its value.
  • outline-style: This takes any of the range of style values available to the outline-style property, which includes none, dotted, dashed, solid, double, groove, ridge, inset, outset. For more details about each, see the outline-style page.
  • outline-width: This takes a numeric value with any of the standard length units.
","value":"outline-color outline-style outline-width "}]},"css/properties/outline-color":{"SUMMARY":"

The outline-color 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. ","URL":"https://www.webplatform.org/docs/css/properties/outline-color","VALUES":[{"description":"

Specify the color to use on all outlines. This can be anywhere from one to four values representing the top, right, bottom, and left outline respectively. ","value":"<color> "},{"description":"

This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

This is expected to perform a color inversion on the pixels on the screen. ","value":"invert "}]},"css/properties/outline-offset":{"SUMMARY":"

The outline-offset property offsets the outline and draw it beyond the border edge. ","URL":"https://www.webplatform.org/docs/css/properties/outline-offset","VALUES":[{"description":"

This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference (Length).  ","value":"<length> "}]},"css/properties/outline-style":{"SUMMARY":"

The outline-style property sets 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. ","URL":"https://www.webplatform.org/docs/css/properties/outline-style","VALUES":[{"description":"

Defined by the user agent (browser). Currently supported only in WebKit. This value allows user-agents to draw focus outlines on elements in an appropriate platform-native style, or in some other appropriate style if there is no platform-native style. ","value":"auto "},{"description":"

A series of square-ended dashes. ","value":"dashed "},{"description":"

A series of round or square dots. ","value":"dotted "},{"description":"

Outline is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the outline-width value. The border width must be at least 3 pixels wide to draw a double outline. ","value":"double "},{"description":"

Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the outline-color.) ","value":"groove "},{"description":"

This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

Looks as if the content on the inside of the outline is sunken into the canvas. ","value":"inset "},{"description":"

Default. Outline is not drawn, color and width are ignored. ","value":"none "},{"description":"

Looks as if the content on the inside of the outline is coming out of the canvas. ","value":"outset "},{"description":"

Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"

A single line segment. ","value":"solid "}]},"css/properties/outline-width":{"SUMMARY":"

The outline-width property sets 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. ","URL":"https://www.webplatform.org/docs/css/properties/outline-width","VALUES":[{"description":"

This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "},{"description":"

Default.   ","value":"medium "},{"description":"

Greater than the default width. ","value":"thick "},{"description":"

Less than the default width. ","value":"thin "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"<width> "}]},"css/properties/outline/sv":{"SUMMARY":"

Enheten outline i CSS är en regel för att ställa in en eller fler individuella konturregler outline-style, outline-width och outline-color i en enda regel. I de flesta fall är det föredraget och mer passande att använda denna enhet. ","URL":"https://www.webplatform.org/docs/css/properties/outline/sv"},"css/properties/overflow":{"SUMMARY":"

The overflow property controls how extra content exceeding the bounding box of an element is rendered. It can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion. ","URL":"https://www.webplatform.org/docs/css/properties/overflow","VALUES":[{"description":"

Content is clipped and scrolling is added only when necessary. ","value":"auto "},{"description":"

Content that exceeds the dimensions of the object is not shown. No scroll mechanism is applied. ","value":"hidden "},{"description":"

When the content doesn't fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified. ","value":"no-content "},{"description":"

When the content doesn't fit in the content box, the whole box is removed, as if ‘display: none’ were specified. ","value":"no-display "},{"description":"

Set overflow-x and overflow-y separately. ","value":"<overflow-x> <overflow-y> "},{"description":"

Content is clipped and a scroll mechanism is added, even if the content does not exceed the dimensions of the object. ","value":"scroll "},{"description":"

The default value for most elements. Content is not clipped and a scroll mechanism is not added. ","value":"visible "}]},"css/properties/overflow-style":{"SUMMARY":"

Specifies the preferred scrolling methods for elements that overflow. ","URL":"https://www.webplatform.org/docs/css/properties/overflow-style","VALUES":[{"description":"

Initial value. Indicates no preference. ","value":"auto "},{"description":"

The marquee effect (value ‘marquee’) consists of the content moving autonomously, without any user events to control it. A user who waits long enough will eventually see all the content that overflows. ","value":"marquee "},{"description":"

The value ‘move’ refers to a method where the user can move the content of the element directly (rather than indirectly by moving a scrollbar or a panner). Typically, the mouse pointer changes into a hand or a cross of four arrows to indicate that the user can drag the content around with the mouse. Sometimes the user needs to explicitly activate the move mode and in that case he often can use both dragging (with the mouse) and key events to move the content. ","value":"move "},{"description":"

Indicates the element does not display any scrolling mechanism, even when its content overflows.

Unlike overflow: hidden, elements with overflow-style: none can still be scrolled via touch panning, keyboard, or mouse wheel. ","value":"none "},{"description":"

A panner is typically a rectangle shown in one corner of the element, with a smaller rectangle inside. The larger rectangle represents all the available content of the element and the smaller one the visible part. The smaller rectangle can be moved around by the user to move the content of the element accordingly. ","value":"panner "},{"description":"

Indicates the element displays a classic scrollbar-type control when its content overflows.

Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear. ","value":"scrollbar "}]},"css/properties/overflow-wrap":{"SUMMARY":"

This property specifies whether or not particularly long words will be 'broken' (separated into multiple lines) if necessary in order to fit in within its container. ","URL":"https://www.webplatform.org/docs/css/properties/overflow-wrap","VALUES":[{"description":"

Lines can be broken at any point if necessary to preserve the limits of the container element -- for example, \"hamburger\" can be broken into \"ham\" and \"burger\" across separate lines. ","value":"break-word "},{"description":"

Lines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.)

This is the default option. ","value":"normal "}]},"css/properties/overflow-x":{"SUMMARY":"

The overflow-x property is a specific case of the generic overflow property. It controls how extra content exceeding the x-axis of the bounding box of an element is rendered. ","URL":"https://www.webplatform.org/docs/css/properties/overflow-x","VALUES":[{"description":"

Content is clipped and scrolling is added only when necessary. ","value":"auto "},{"description":"

Content that exceeds the dimensions of the object is not shown. ","value":"hidden "},{"description":"

When the content doesn't fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified. ","value":"no-content "},{"description":"

When the content doesn't fit in the content box, the whole box is removed, as if ‘display: none’ were specified. ","value":"no-display "},{"description":"

Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object. ","value":"scroll "},{"description":"

Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame. ","value":"visible "}]},"css/properties/overflow-y":{"SUMMARY":"

The overflow-y property is a specific case of the generic overflow property. It controls how extra content exceeding the y-axis of the bounding box of an element is rendered. ","URL":"https://www.webplatform.org/docs/css/properties/overflow-y","VALUES":[{"description":"

Content is clipped and scrolling is added only when necessary. ","value":"auto "},{"description":"

Content that exceeds the dimensions of the object is not shown. ","value":"hidden "},{"description":"

When the content doesn't fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified. ","value":"no-content "},{"description":"

When the content doesn't fit in the content box, the whole box is removed, as if ‘display: none’ were specified. ","value":"no-display "},{"description":"

Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object. ","value":"scroll "},{"description":"

Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame. ","value":"visible "}]},"css/properties/padding":{"SUMMARY":"

The padding optional CSS property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased.

The padding property is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left). ","URL":"https://www.webplatform.org/docs/css/properties/padding","VALUES":[{"description":"

Specifies a non-negative fixed width defined in pixels, pt, em, etc. . See length for details. ","value":"length "},{"description":"

Calculated using the dimensions of the containing block or element. ","value":"percentage "}]},"css/properties/padding-bottom":{"SUMMARY":"

The padding-bottom CSS property of an element sets the padding space required on 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. ","URL":"https://www.webplatform.org/docs/css/properties/padding-bottom","VALUES":[{"description":"

Specifies a positive fixed distance. See length for details. ","value":"length "},{"description":"

Calculated using the dimensions of the containing block or element. ","value":"percentage "}]},"css/properties/padding-left":{"SUMMARY":"

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 its border. Contrary to margin-left values, negative values of padding-left are invalid. ","URL":"https://www.webplatform.org/docs/css/properties/padding-left","VALUES":[{"description":"

Specifies a positive fixed width. See length for details. ","value":"length "},{"description":"

A percentage with respect to the width of the containing block. ","value":"percentage "}]},"css/properties/padding-right":{"SUMMARY":"

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. Contrary to margin-right values, negative values of padding-right are invalid. ","URL":"https://www.webplatform.org/docs/css/properties/padding-right","VALUES":[{"description":"

Specifies a positive fixed width. See length for details. ","value":"length "},{"description":"

A percentage with respect to the width of the containing block. ","value":"percentage "}]},"css/properties/padding-top":{"SUMMARY":"

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. ","URL":"https://www.webplatform.org/docs/css/properties/padding-top","VALUES":[{"description":"

Specifies a positive fixed distance. See length for details. ","value":"length "},{"description":"

A percentage with respect to the height of the containing block. ","value":"percentage "}]},"css/properties/page-break-after":{"SUMMARY":"

The page-break-after property is supported in all major browsers. With CSS3, page-break-* properties are only aliases of the break-* properties. The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation. ","URL":"https://www.webplatform.org/docs/css/properties/page-break-after","VALUES":[{"description":"

Insert a page break after the element ","value":"always "},{"description":"

Default. Insert a page break after the element if necessary ","value":"auto "},{"description":"

Avoid inserting a page break after the element ","value":"avoid "},{"description":"

Behaves the same as auto. ","value":"empty string "},{"description":"

Specifies that the value of the page-break-after property should be inherited from the parent element ","value":"inherit "},{"description":"

Insert page breaks after the element until it reaches a blank left page ","value":"left "},{"description":"

Insert page breaks after the element until it reaches a blank right page ","value":"right "}]},"css/properties/page-break-before":{"SUMMARY":"

The page-break-before property sets the page-breaking behavior before an element. With CSS3, page-break-* properties are only aliases of the break-* properties. The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation. ","URL":"https://www.webplatform.org/docs/css/properties/page-break-before","VALUES":[{"description":"

Insert a page break before the element. ","value":"always "},{"description":"

Default. Insert a page break before the element if necessary. ","value":"auto "},{"description":"

Avoid inserting a page break before the element. ","value":"avoid "},{"description":"

Behaves the same as auto. ","value":"empty string "},{"description":"

Specifies that the value of the page-break-before property should be inherited from the parent element ","value":"inherit "},{"description":"

Insert page breaks before the element until it reaches a blank left page. ","value":"left "},{"description":"

Insert page breaks before the element until it reaches a blank right page. ","value":"right "}]},"css/properties/page-break-inside":{"SUMMARY":"

Sets the page-breaking behavior inside an element. With CSS3, page-break-* properties are only aliases of the break-* properties. The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation. ","URL":"https://www.webplatform.org/docs/css/properties/page-break-inside","VALUES":[{"description":"

Default. Neither force nor forbid a page break inside the object. ","value":"auto "},{"description":"

Forbid a page break inside the object, if possible. ","value":"avoid "},{"description":"

Behaves the same as auto. ","value":"empty string "},{"description":"

Inherit the value of the same property for the object's parent. ","value":"inherit "}]},"css/properties/pause":{"SUMMARY":"

The pause property determines how long a speech media agent should pause before and after presenting an element. It is a shorthand for the pause-before and pause-after properties. ","URL":"https://www.webplatform.org/docs/css/properties/pause"},"css/properties/pause-after":{"SUMMARY":"

The pause-after property determines how long a speech media agent should pause after presenting an element. It may be replaced by the shorthand property pause, which sets pause time before and after. ","URL":"https://www.webplatform.org/docs/css/properties/pause-after"},"css/properties/pause-before":{"SUMMARY":"

The pause-before property determines how long a speech media agent should pause before presenting an element. It may be replaced by the shorthand property pause, which sets pause time before and after. ","URL":"https://www.webplatform.org/docs/css/properties/pause-before"},"css/properties/perspective":{"SUMMARY":"

The perspective property defines how far an element is placed from the view on the z-axis, from the screen to the viewer.

Perspective defines how an object is viewed. In graphic arts, perspective is the representation on a flat surface of what the viewer's eye would see in a 3D space. (See Wikipedia for more information about graphical perspective and for related illustrations.)

The illusion of perspective on a flat surface, such as a computer screen, is created by projecting points on the flat surface as they would appear if the flat surface were a window through which the viewer was looking at the object. In discussion of virtual environments, this flat surface is called a projection plane. ","URL":"https://www.webplatform.org/docs/css/properties/perspective","VALUES":[{"description":"

The distance the element is placed on the z-axis. Lengths must be positive. ","value":"<length> "},{"description":"

Default. ","value":"none "}]},"css/properties/perspective-origin":{"SUMMARY":"

The perspective-origin property establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.

When used with perspective, perspective-origin changes the appearance of an object, as if a viewer were looking at it from a different origin. An object appears differently if a viewer is looking directly at it versus looking at it from below, above, or from the side. Thus, the perspective-origin is like a vanishing point.

The default value of perspective-origin is 50% 50%. This displays an object as if the viewer's eye were positioned directly at the center of the screen, both top-to-bottom and left-to-right. A value of 0% 0% changes the object as if the viewer was looking toward the top left angle. A value of 100% 100% changes the appearance as if viewed toward the bottom right angle. ","URL":"https://www.webplatform.org/docs/css/properties/perspective-origin","VALUES":[{"description":"

Second value only. Equal to 100% or the full box height. This keyword displays the object as if the viewer were looking towards the bottom. ","value":"bottom "},{"description":"

Equal to 50% or half the height of the box. When given as the second value, this keyword displays the object as if the viewer was positioned on par with the object, from top-to-bottom. ","value":"center "},{"description":"

Equal to 50% or half the length of the box. When given as the first value, this keyword displays the object as if the viewer was positioned on par with the object, from left-to-right. ","value":"center "},{"description":"

First value only. Equal to 0% or a zero length. This keyword displays the object as if the viewer were looking towards the left. ","value":"left "},{"description":"

A floating-point number, followed by either an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px), that indicates the origin of transformation. ","value":"<length> "},{"description":"

An integer, followed by a %. The value is a percentage of the total box length (for the first value) or the total box height (for the second value, if specified). The default is 50% 50%, as if the viewer was positioned directly in front of the object. ","value":"<percentage> "},{"description":"

First value only. Equal to 100% or the full box length. This keyword displays the object as if the viewer were looking towards the right. ","value":"right "},{"description":"

Second value only. Equal to 0% or a zero height. This keyword displays the object as if the viewer were looking towards the top. ","value":"top "}]},"css/properties/pointer-events":{"SUMMARY":"

The pointer-events property allows you to control whether an element can be the target for the pointing device (e.g, mouse, pen) events. ","URL":"https://www.webplatform.org/docs/css/properties/pointer-events","VALUES":[{"description":"

The element may be the target element for pointer events whenever the pointer is inside the CSS border edge of the element. ","value":"all "},{"description":"

In HTML/XML content, this value and the value all have the same effect. In SVG content, this value and the value visiblePainted have the same effect. ","value":"auto "},{"description":"

For SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. ","value":"fill "},{"description":"

The element is never the target of pointer events, although pointer events may target its descendant elements if those descendants have the pointer-events set to some other value. ","value":"none "},{"description":"

For SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and the fill, stroke property is set to a value other than none. ","value":"painted "},{"description":"

For SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. ","value":"stroke "},{"description":"

The element may be the target of pointer events when the visibility property is set to visible, and the pointer is over the contents, background, or border of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element). ","value":"visible "},{"description":"

For SVG only. The element can only be the target of a pointer event when the visibility property is set to visible and when the pointer is over the interior (i.e., fill) of the element. ","value":"visibleFill "},{"description":"

For SVG only. The element can only be the target of a pointer event when the visibility property is set to <span class=\"value\">visible</span> and when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and the fill, stroke property is set to a value other than none. ","value":"visiblePainted "},{"description":"

For SVG only. The element can only be the target of a pointer event when the visibility property is set to visible and when the pointer is over the perimeter (i.e., stroke) of the element. ","value":"visibleStroke "}]},"css/properties/position":{"SUMMARY":"

The position property controls the type of positioning used by an element within its parent elements. The effect of the position property depends on a lot of factors, for example the position property of parent elements. ","URL":"https://www.webplatform.org/docs/css/properties/position","VALUES":[{"description":"

Object is positioned relative to nearest positioned ancestor—or to the initial containing block if no positioned ancestor exists—using the top and left properties. ","value":"absolute "},{"description":"

Object is positioned relative to the viewport containing the content. Object stays in the viewport when scrolling. Usually used for navigation on mobile devices. Limited support. ","value":"fixed "},{"description":"

Inherits the value of the parent element. ","value":"inherit "},{"description":"

Object is positioned according to the normal flow, and then offset by the top and left properties. ","value":"relative "},{"description":"

Default. Object has no special positioning; it follows the layout rules of HTML. Values of top, bottom, left and right have no impact. ","value":"static "}]},"css/properties/punctuation-trim":{"SUMMARY":"

Obsolete: unsupported.

This property determines whether or not a full-width punctuation mark character should be trimmed if it appears at the beginning of a line, so that its \"ink\" lines up with the first glyph in the line above and below. ","URL":"https://www.webplatform.org/docs/css/properties/punctuation-trim","VALUES":[{"description":"

Leading punctuation is not trimmed. ","value":"none "},{"description":"

Leading punctuation is trimmed. ","value":"start "}]},"css/properties/quotes":{"SUMMARY":"

Sets the type of quotation marks for embedded quotations. ","URL":"https://www.webplatform.org/docs/css/properties/quotes","VALUES":[{"description":"

The \"open-quote\" and \"close-quote\" values produce no quotation marks. ","value":"none "},{"description":"

The \"open-quote\" and \"close-quote\" values are taken from the specified list of pairs of quotation marks. The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. ","value":"[<string> <string>]+ "}]},"css/properties/region-fragment":{"SUMMARY":"

Controls whether the last region in a chain displays additional 'overset' content according its default overflow property, or\tif it displays a fragment of content as if it were flowing into a subsequent region. ","URL":"https://www.webplatform.org/docs/css/properties/region-fragment","VALUES":[{"description":"

Region element displays overset content according to its overflow property. ","value":"auto "},{"description":"

Region element overrides overflow property, displaying whatever fragment of overset content can fit within the region. ","value":"break "}]},"css/properties/rest":{"SUMMARY":"

The rest property determines how long a speech media agent should pause in between presenting an element's main content and presenting the before and after cue sounds. It is a shorthand for the rest-before and rest-after properties. ","URL":"https://www.webplatform.org/docs/css/properties/rest"},"css/properties/rest-after":{"SUMMARY":"

The rest-after property determines how long a speech media agent should pause after presenting an element's main content, before presenting that element's exit cue sound. It may be replaced by the shorthand property rest, which sets rest time before and after. ","URL":"https://www.webplatform.org/docs/css/properties/rest-after"},"css/properties/rest-before":{"SUMMARY":"

The rest-before property determines how long a speech media agent should pause after presenting an intro cue sound for an element, before presenting that element's main content. It may be replaced by the shorthand property rest, which sets rest time before and after. ","URL":"https://www.webplatform.org/docs/css/properties/rest-before"},"css/properties/right":{"SUMMARY":"

Specifies the position an element in relation to the right side of the containing element. ","URL":"https://www.webplatform.org/docs/css/properties/right","VALUES":[{"description":"

Default. Position is determined by the regular HTML layout of the page. ","value":"auto "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"

Integer, followed by a percent sign (%). The value is a percentage of the width of the parent object. ","value":"percentage "}]},"css/properties/shape-image-threshold":{"SUMMARY":"

Defines the alpha channel threshold used to extract a shape from an image. Can be thought of as a \"minimum opacity\" threshold; that is, a value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque. ","URL":"https://www.webplatform.org/docs/css/properties/shape-image-threshold","VALUES":[{"description":"

A numeric value used to set the opacity threshold used for extracting a shape from an image. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. ","value":"<number> "}]},"css/properties/shape-inside":{"SUMMARY":"

A future level of CSS Shapes will define a shape-inside property, which will define a shape to wrap content within the element. See Editor's Draft <http://dev.w3.org/csswg/css-shapes/> and CSSWG wiki page on next-level plans <http://wiki.csswg.org/spec/css-shapes> ","URL":"https://www.webplatform.org/docs/css/properties/shape-inside"},"css/properties/shape-margin":{"SUMMARY":"

Adds a margin to a shape-outside. In effect, defines a new shape that is the smallest contour around all the points that are the shape-margin distance outward perpendicular to each point on the underlying shape. For points where a perpendicular direction is not defined (e.g., a triangle corner), takes all points on a circle centered at the point and with a radius of the shape-margin distance. This property accepts only non-negative values. ","URL":"https://www.webplatform.org/docs/css/properties/shape-margin","VALUES":[{"description":"

Sets the margin of the shape to the <length>. ","value":"<length> "},{"description":"

Sets the margin of the shape to a percentage of the width of the element’s containing block. ","value":"<percentage> "}]},"css/properties/shape-outside":{"SUMMARY":"

Declares a shape around which text should be wrapped, with possible modifications from the shape-margin property. The shape defined by shape-outside and shape-margin changes the geometry of a float element's float area. ","URL":"https://www.webplatform.org/docs/css/properties/shape-outside","VALUES":[{"description":"

The shape is computed based on the values of one of inset, circle, ellipse or polygon. If shape-box is not supplied, then the reference box defaults to margin-box.

  • inset(<shape-arg>{1,4} [round<border-radius>]). Defines an inset rectangle. The basic syntax for inset is the same as the margin shorthand syntax (see margin for details). The optional border-radius argument defines an inset's rounded corners using the border-radius shorthand syntax (see border-radius for details).
  • circle([<shape-radius>] [at <position>]) The shape-radius argument is the radius of the circle. The position argument defines the center point of the circle and has the same syntax as background-position (see background-position for details).
  • ellipse([<shape-radius>{2}] [at <position>]) The shape-radius argument is the radius of the circle. The position argument defines the center point of the circle and has the same syntax as background-position (see background-position for details).
  • polygon([<fill-rule>,] [<shape-arg> <shape-arg>]# ) The fill-rule is used to determine the interior of the polygon (see the SVG fill-rule for details). Each pair in the shape-arg represents x and y coordinates of each vertex in the polygon.
","value":"<basic-shape> "},{"description":"

If <image> references an image (fetched using the CORS-enabled fetch method defined by the HTML5 specification), the shape is extracted and computed based on the alpha channel of the image as defined by shape-image-threshold. If <image> does not reference an image or if the fetch attempt results in any error such that there is no fallback image, the effect is as if the value auto had been specified. ","value":"<image> "},{"description":"

The float area is unaffected. ","value":"none "},{"description":"

The shape is defined by the CSS Box Model of the element the shape is applied to:

  • margin-box
  • border-box
  • padding-box
  • content-box
","value":"<shape-box> "}]},"css/properties/speak":{"SUMMARY":"

The speak property determines whether or not a speech synthesizer will read aloud the contents of an element. ","URL":"https://www.webplatform.org/docs/css/properties/speak"},"css/properties/speak-as":{"SUMMARY":"

The speak-as property determines how the speech synthesizer interprets the content: words as whole words or as a sequence of letters, numbers as a numerical value or a sequence of digits, punctuation as pauses in speech or named punctuation characters. ","URL":"https://www.webplatform.org/docs/css/properties/speak-as"},"css/properties/tab-size":{"SUMMARY":"

The tab-size CSS property is used to customise the width of a tab (U+0009) character. ","URL":"https://www.webplatform.org/docs/css/properties/tab-size","VALUES":[{"description":"

Inherits from the parent element. ","value":"inherit "},{"description":"

The number of spaces in a tab. Must be positive. ","value":"<integer> "}]},"css/properties/table-layout":{"SUMMARY":"

The 'table-layout' property controls the algorithm used to lay out the table cells, rows, and columns. ","URL":"https://www.webplatform.org/docs/css/properties/table-layout","VALUES":[{"description":"

Default. Column width is set by the widest unbreakable content in the column cells. The width of the table and its cells depends on the content of the cells. ","value":"auto "},{"description":"

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. It does not depend on the content of the cells. Rendering is faster as the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. ","value":"fixed "},{"description":"

This features inherits table-layout property from the parent element. ","value":"inherit "}]},"css/properties/text-align":{"SUMMARY":"

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content. ","URL":"https://www.webplatform.org/docs/css/properties/text-align","VALUES":[{"description":"

The inline contents are centered within the line box. ","value":"center "},{"description":"

The same as right if direction is left-to-right and left if direction is right-to-left. ","value":"end "},{"description":"

The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph. ","value":"justify "},{"description":"

The inline contents are aligned to the left edge of the line box. ","value":"left "},{"description":"

Similar to inherit with the difference that the value start and end are calculated according the parent's direction and are replaced by the adequate left or right value. ","value":"match-parent "},{"description":"

The inline contents are aligned to the right edge of the line box. ","value":"right "},{"description":"

The same as left if direction is left-to-right and right if direction is right-to-left. ","value":"start "},{"description":"

Specifies start alignment of the first line and any line immediately after a forced line break; and end alignment of any remaining lines not affected by text-align-last. ","value":"start end "},{"description":"

The first occurrence of the one-char string is the element used for alignment. the keyword that follows or precedes it indicates how it is aligned. This allows to align numeric values on the decimal point, for instance. ","value":"<string> "}]},"css/properties/text-align-last":{"SUMMARY":"

The text-align-last CSS property describes how the last line of a block element or a line before line break is aligned in its parent block element. ","URL":"https://www.webplatform.org/docs/css/properties/text-align-last","VALUES":[{"description":"

Default. Text is aligned like the other lines in the object, using the value of the text-align property. ","value":"auto "},{"description":"

The text is centered within the line box. ","value":"center "},{"description":"

The same as right if direction is left-to-right and left if direction is right-to-left. ","value":"end "},{"description":"

Text is justified if ‘text-justify’ is ‘distribute’, and the same as start value if otherwise. ","value":"justify "},{"description":"

Text is aligned to the left. ","value":"left "},{"description":"

Text is aligned to the right. ","value":"right "},{"description":"

The same as left if direction is left-to-right and right if direction is right-to-left. ","value":"start "}]},"css/properties/text-autospace":{"SUMMARY":"

When non-ideographic characters (such as numbers) are presented alongside ideographic characters, many designers prefer to include spacing to separate it from the surrounding ideographs. This property automates the creation of that space by introducing an in-line margin, the width of which corresponds to the width of existing ideographs. ","URL":"https://www.webplatform.org/docs/css/properties/text-autospace","VALUES":[{"description":"

Creates extra spacing between runs of ideographic and non-ideographic text, such as Latin-based, Cyrillic, Greek, Arabic, or Hebrew text. ","value":"ideograph-alpha "},{"description":"

Creates extra spacing between runs of ideographic text and numeric characters. ","value":"ideograph-numeric "},{"description":"

Creates extra spacing between a normal (non-wide) parenthesis and an ideograph. ","value":"ideograph-parenthesis "},{"description":"

Extends the width of the space character when it is adjacent to ideographs. ","value":"ideograph-space "},{"description":"

Default. No effect takes place—that is, no extra space is added. ","value":"none "}]},"css/properties/text-decoration":{"SUMMARY":"

The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink. <br /> underline and overline decorations are positioned under the text, line-through over it. ","URL":"https://www.webplatform.org/docs/css/properties/text-decoration","VALUES":[{"description":"

Text blinks. ","value":"blink "},{"description":"

Each line of text has a line through the middle. ","value":"line-through "},{"description":"

Produces no text decoration. ","value":"none "},{"description":"

Each line of text has a line above it. ","value":"overline "},{"description":"

Each line of text is underlined. ","value":"underline "}]},"css/properties/text-decoration-color":{"SUMMARY":"

Sets the color of any text decoration, such as underlines, overlines, and strike throughs. ","URL":"https://www.webplatform.org/docs/css/properties/text-decoration-color","VALUES":[{"description":"

The color data type value can be a named color keyword, or in hexadecimal, RGB, RGBa, HSL or HSLa notation. See the CSS color values page for more details. ","value":"color "}]},"css/properties/text-decoration-line":{"SUMMARY":"

Sets what kind of line decorations are added to an element, such as underlines, overlines, etc. ","URL":"https://www.webplatform.org/docs/css/properties/text-decoration-line","VALUES":[{"description":"

The text alternates between visible and invisible. ","value":"blink "},{"description":"

Each line of text has a line through the middle. ","value":"line-through "},{"description":"

Produces no text decoration. ","value":"none "},{"description":"

Each line of text has a line above it. ","value":"overline "},{"description":"

Each line of text is underlined. ","value":"underline "}]},"css/properties/text-decoration-skip":{"SUMMARY":"

Specifies what parts of an element’s content are skipped over when applying any text decoration. ","URL":"https://www.webplatform.org/docs/css/properties/text-decoration-skip","VALUES":[{"description":"

Will skip over the box's margin, border, and padding areas.

Note: It is not known yet if this is a needed value ","value":"box-decoration "},{"description":"

The text decoration will be inset slightly, so that two side by side elements do not appear to have a single continuous decoration. This is important for Chinese content, where underlining is a form of punctuation. ","value":"edges "},{"description":"

Will skip over where any glyphs are drawn. It will interrupt the decoration line so that the text will show through where otherwise the decoration would cross through the text. This commonly includes ascenders and descenders of glyphs.

Note: The UA also may skip over small distances on the right or the left side of the glyph outline ","value":"ink "},{"description":"

Will not skip anything; the text decoration will be drawn for all text content ","value":"none "},{"description":"

Will skip the element (including it’s margin) if it’s atomic inline ","value":"object "},{"description":"

Will skip white space, including:

  • regular spaces - U+0020
  • tabs - U+0009
  • nbsp - U+00A0
  • ideographic space - U+3000
  • all fixed width spaces - examples: U+2000 to U+200A, U+202F and U+205F
  • any adjacent letter-spacing or word-spacing
","value":"spaces "}]},"css/properties/text-decoration-style":{"SUMMARY":"

This property specifies the style of the text decoration line drawn on the specified element. The intended meaning for the values are the same as those of the border-style-properties. ","URL":"https://www.webplatform.org/docs/css/properties/text-decoration-style","VALUES":[{"description":"

A series of square-ended dashes ","value":"dashed "},{"description":"

A series of round dots ","value":"dotted "},{"description":"

Two solid lines that are parallel with some space between them ","value":"double "},{"description":"

A single line segment ","value":"solid "},{"description":"

Indicates a wavy line ","value":"wavy "}]},"css/properties/text-emphasis":{"SUMMARY":"

The text-emphasis property will apply special emphasis marks to the elements text. Slightly similar to the text-decoration property only that this property can have affect on the line-height. It also is noted that this is shorthand for text-emphasis-style and for text-emphasis-color. ","URL":"https://www.webplatform.org/docs/css/properties/text-emphasis","VALUES":[{"description":"

Displays large circles as marks ","value":"circle "},{"description":"

Displays small circles as marks ","value":"dot "},{"description":"

Displays double circles as marks ","value":"double-circle "},{"description":"

It is filled with a solid color ","value":"filled "},{"description":"

There are no emphasis marks ","value":"none "},{"description":"

The shape has an empty space ","value":"open "},{"description":"

Displays sesames as marks ","value":"sesame "},{"description":"

Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster. ","value":"<string> "},{"description":"

Displays triangles as marks ","value":"triangle "}]},"css/properties/text-emphasis-color":{"SUMMARY":"

The text-emphasis-color property specifies the foreground color of the emphasis marks. ","URL":"https://www.webplatform.org/docs/css/properties/text-emphasis-color","VALUES":[{"description":"

Specify the foreground color of the emphasis marks. ","value":"color "}]},"css/properties/text-emphasis-style":{"SUMMARY":"

The text-emphasis-style property applies special emphasis marks to an element's text. ","URL":"https://www.webplatform.org/docs/css/properties/text-emphasis-style","VALUES":[{"description":"

Display large circles as marks. The filled circle is U+25CF ‘●’, and the open circle is U+25CB ‘○’. ","value":"circle "},{"description":"

Display small circles as marks. The filled dot is U+2022 ‘•’, and the open dot is U+25E6 ‘◦’. ","value":"dot "},{"description":"

Display double circles as marks. The filled double-circle is U+25C9 ‘◉’, and the open double-circle is U+25CE ‘◎’. ","value":"double-circle "},{"description":"

The shape is filled with solid color. ","value":"filled "},{"description":"

No emphasis marks. ","value":"none "},{"description":"

The shape is hollow. ","value":"open "},{"description":"

Display sesames as marks. The filled sesame is U+FE45 ‘﹅’, and the open sesame is U+FE46 ‘﹆’. ","value":"sesame "},{"description":"

Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster. ","value":"<string> "},{"description":"

Display triangles as marks. The filled triangle is U+25B2 ‘▲’, and the open triangle is U+25B3 ‘△’. ","value":"triangle "}]},"css/properties/text-height":{"SUMMARY":"

This property helps determine an inline box's block-progression dimension, derived from the text-height and font-size properties for non-replaced elements, the height or the width for replaced elements, and the stacked block-progression dimension for inline-block elements. The block-progression dimension determines the position of the padding, border and margin for the element. ","URL":"https://www.webplatform.org/docs/css/properties/text-height","VALUES":[{"description":"

The block-progression dimension is based either on the em square determined by the computed element font-size property value, or the cell-height (ascender + descender) related to the computed element font-size as chosen by the user agent. ","value":"auto "},{"description":"

The block-progression dimension is based on the em square as determined by the computed element font-size. ","value":"font-size "},{"description":"

The block-progression dimension is based on the maximum extents toward the before-edge and after-edge of the box (obtained by considering all child elements located on the same line), ruby annotations (elements with \"display:ruby-text\"), and baseline shifted elements. ","value":"max-size "},{"description":"

The block progression dimension is based on number times the em square as determined by the computed font-size. ","value":"<number> "},{"description":"

The block-progression dimension is based on the cell-height (ascender + descender) related to the computed element font-size. ","value":"text-size "}]},"css/properties/text-indent":{"SUMMARY":"

Specifies the amount of space horizontally that should be left on the first line of the text of an element. This horizontal spacing is at the beginning of the first line and is in respect to the left edge of the containing block box. ","URL":"https://www.webplatform.org/docs/css/properties/text-indent","VALUES":[{"description":"

Inherits the value from the cascade. ","value":"inherit "},{"description":"

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). ","value":"length "},{"description":"

This value can only be used in conjunction with a length or percentage value (text-indent: 7px each-line;). It indents all lines in the element, not just the first line.

Currently an experimental feature. ","value":"<length/percentage> each-line "},{"description":"

This value can only be used in conjunction with a length or percentage value (text-indent: 7px each-line;). It will affect not only the first line of the block container but also any line that is after a forced line break. This does not have affect on soft wrap break.

Currently experimental in CSS Text Level 3 ","value":"<length/percentage> each-line "},{"description":"

This value can only be used in conjunction with a length or percentage value (text-indent: 7px hanging;). It inverts which lines are indented so that everything but the first formatted line is indented.

Currently an experimental feature. ","value":"<length/percentage> hanging "},{"description":"

Integer, followed by a percent sign (%). This value is a percentage of the width of the parent object. ","value":"percentage "}]},"css/properties/text-justify":{"SUMMARY":"

The text-justify CSS property offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models used in different language writing systems. ","URL":"https://www.webplatform.org/docs/css/properties/text-justify","VALUES":[{"description":"

Default. Allows the browser to determine which justification algorithm to apply. ","value":"auto "},{"description":"

Aligns text by increasing the space between both of words and characters. This value is sometimes used in e.g. Japanese. ","value":"distribute "},{"description":"

Justifies lines of text that contain no inter-word spacing. This value is typically used for Southeast Asian scripts such as Thai. ","value":"inter-cluster "},{"description":"

Justifies lines of ideographic text, and increases or decreases both inter-ideograph and inter-word spacing. This value is typically used for CJK languages. ","value":"inter-ideograph "},{"description":"

Aligns text by increasing the space between words. This value's spacing behavior is the fastest way to make all lines of text equal in length. Its justification behavior does not affect the last line of the paragraph. This value is typically used for languages that separate words using spaces, like English or Korean. ","value":"inter-word "},{"description":"

Justifies lines of text by elongating characters at chosen points. This form of justification is intended for Arabic script languages. ","value":"kashida "},{"description":"

Justification is disabled. ","value":"none "}]},"css/properties/text-line-through":{"SUMMARY":"

The text-line-through property is a shorthand property for text-line-through-style, text-line-through-color and text-line-through-mode. (Considered obsolete; use text-decoration instead.) ","URL":"https://www.webplatform.org/docs/css/properties/text-line-through","VALUES":[{"description":"

Values supported by the text-line-through-style, text-line-through-color, and text-line-through-mode properties. ","value":"<style> <color> <mode> "}]},"css/properties/text-line-through-color":{"SUMMARY":"

Specifies the line colors for the line-through text decoration.

(Considered obsolete; use text-decoration-color instead.) ","URL":"https://www.webplatform.org/docs/css/properties/text-line-through-color","VALUES":[{"description":"

Specifies a color value. ","value":"<color> "}]},"css/properties/text-line-through-mode":{"SUMMARY":"

Sets the mode for the line-through text decoration, determining whether the text decoration affects the space characters or not.

(Considered obsolete; use text-decoration-skip instead.) ","URL":"https://www.webplatform.org/docs/css/properties/text-line-through-mode","VALUES":[{"description":"

The line is continuous and covers white space. ","value":"continuous "},{"description":"

The line skips (does not include) white space characters. ","value":"skip-white-space "}]},"css/properties/text-line-through-style":{"SUMMARY":"

Specifies the line style for line-through text decoration.

(Considered obsolete; use text-decoration-style instead.) ","URL":"https://www.webplatform.org/docs/css/properties/text-line-through-style","VALUES":[{"description":"

Produces a dashed line ","value":"dashed "},{"description":"

Produces a line that repeats a pattern where a dot is followed by a dash. ","value":"dot-dash "},{"description":"

Produces a line that repeats a pattern where two dots are followed by a dash. ","value":"dot-dot-dash "},{"description":"

Produces a dotted line ","value":"dotted "},{"description":"

Produces a double line. ","value":"double "},{"description":"

Produces no line ","value":"none "},{"description":"

Produces a solid line ","value":"solid "},{"description":"

Produces a wavy line. ","value":"wave "}]},"css/properties/text-line-through-width":{"SUMMARY":"

Specifies the line width for the line-through text decoration. ","URL":"https://www.webplatform.org/docs/css/properties/text-line-through-width"},"css/properties/text-overflow":{"SUMMARY":"

The text-overflow shorthand CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties text-overflow-mode and text-overflow-ellipsis ","URL":"https://www.webplatform.org/docs/css/properties/text-overflow","VALUES":[{"description":"

Default. Simply clips the content and does not display ellipsis for text-overflow. ","value":"clip "},{"description":"

Display ellipsis (...) for text overflow after the last letter that entirely fits into a line. ","value":"ellipsis "},{"description":"

Display ellipsis (...) for text overflow after the last word that entirely fits into a line. ","value":"ellipsis-word "}]},"css/properties/text-overflow-ellipsis":{"SUMMARY":"

The text-overflow-ellipsis CSS property controls how the hint on overflowed content that is not displayed is signaled to the users. The presence of the hint is controlled with CSS property text-overflow-mode. Shorthand property is text-overflow. ","URL":"https://www.webplatform.org/docs/css/properties/text-overflow-ellipsis","VALUES":[{"description":"

The value is defined either as a string like the default UTF-8 character 'U+2026' or a URI and represents the ellipsis of text-overflow-mode property. If the value is defined as a URI it displays the image behind the URL. You can also set both values which then means they determine the overflow visual hint at the end and the hint after the element box. The latter visual hint is only displayed if there is clipped content because of the dimension limitation on the element block. ","value":"string "}]},"css/properties/text-overflow-mode":{"SUMMARY":"

The text-overflow-mode CSS property controls the presence and position of the hint on overflowed content that is not displayed is signaled to the users. The constitution of the hint is controlled with CSS property text-overflow-ellipsis. Shorthand property is text-overflow. ","URL":"https://www.webplatform.org/docs/css/properties/text-overflow-mode","VALUES":[{"description":"

Default. Simply clips the content and does not display ellipsis for text-overflow. ","value":"clip "},{"description":"

Display ellipsis (...) for text overflow after the last letter that entirely fits into a line. ","value":"ellipsis "},{"description":"

Display ellipsis (...) for text overflow after the last word that entirely fits into a line. ","value":"ellipsis-word "}]},"css/properties/text-overline":{"SUMMARY":"

The text-overline property is the shorthand for the text-overline-style, text-overline-width, text-overline-color, and text-overline-mode properties. ","URL":"https://www.webplatform.org/docs/css/properties/text-overline","VALUES":[{"description":"

Possible values: <color> - Specifies a color value. ","value":"<'text-overline-color'> "},{"description":"

This property determines whether only words meant to be overlined or if the whitespace between words and words meant to be overlined. There are two unique values: continuous or words. Continuous is the default value and shows overline for both words and whitespaces. Words only shows onverline for words and not whitespaces. It can also have the values of initial or inherit. ","value":"<'text-overline-mode'> "},{"description":"

Possible values:

None- Produces no line. solid - Produces a solid line. double - Produces a double line. dotted - Produces a dotted line. dashed - Produces a dashed line style. dot-dash - Produces a line whose repeating pattern is a dot followed by a dash. dot-dot-dash - Produces a line whose repeating pattern is two dots followed by a dash. wave - Produces a wavy line. ","value":"<'text-overline-style'> "}]},"css/properties/text-overline-color":{"SUMMARY":"

Specifies the line color for the overline text decoration. ","URL":"https://www.webplatform.org/docs/css/properties/text-overline-color","VALUES":[{"description":"

Specifies a color value ","value":"<color> "}]},"css/properties/text-overline-mode":{"SUMMARY":"

Sets the mode for the overline text decoration, determining whether the text decoration affects the space characters or not. ","URL":"https://www.webplatform.org/docs/css/properties/text-overline-mode","VALUES":[{"description":"

This value means that the line is continuous. ","value":"continuous "},{"description":"

This means that space characters will not be lined. ","value":"skip-white-space "}]},"css/properties/text-overline-style":{"SUMMARY":"

Specifies the line style for overline text decoration. ","URL":"https://www.webplatform.org/docs/css/properties/text-overline-style","VALUES":[{"description":"

Produces a dashed line style. ","value":"dashed "},{"description":"

Produces a line whose repeating pattern is a dot followed by a dash. ","value":"dot-dash "},{"description":"

Produces a line whose repeating pattern is two dots followed by a dash. ","value":"dot-dot-dash "},{"description":"

Produces a dotted line. ","value":"dotted "},{"description":"

Produces a double line. ","value":"double "},{"description":"

Produces no line. ","value":"none "},{"description":"

Produces a solid line. ","value":"solid "},{"description":"

Produces a wavy line. ","value":"wave "}]},"css/properties/text-overline-width":{"SUMMARY":"

Specifies the line width for the overline text decoration. ","URL":"https://www.webplatform.org/docs/css/properties/text-overline-width","VALUES":[{"description":"

The user agent may use any algorithm to determine the text decoration width. The computed value is 'auto'. ","value":"auto "},{"description":"

The text decoration width is the length. The computed value is the corresponding absolute <length>. ","value":"<length> "},{"description":"

Generates a medium line. The computed value is 'medium'. ","value":"medium "},{"description":"

The text decoration width is the normal text decoration width for the nominal font. The computed value is 'normal'. ","value":"normal "},{"description":"

The text decoration width is the product of the <number> and the computed 'font-size'. The computed value is '<number>'. ","value":"<number> "},{"description":"

The text decoration width is the product of the <percentage> and the computed 'font-size'. The computed value is the absolute <length>. ","value":"<percentage> "},{"description":"

Generates a thick line. The computed value is 'thick'. ","value":"thick "},{"description":"

Generates a thin line. The computed value is 'thin'. ","value":"thin "}]},"css/properties/text-rendering":{"SUMMARY":"

The text-rendering CSS property provides information to the browser about how to optimize when rendering text. Options are: legibility, speed or geometric precision. ","URL":"https://www.webplatform.org/docs/css/properties/text-rendering","VALUES":[{"description":"

Indicates that the browser should choose the most appropriate method between speed, legibility and geometric precision, but favors legibility over speed and geometric precision. ","value":"auto "},{"description":"

Indicates that the browser should favor geometric precision over rendering speed and legibility. Usually, this option causes the browser to not use hinting. Instead glyph outlines are drawn with comparable geometric precision to the rendering of path data. This setting can be helpful when using kerning, which does often not scale linearly and can make text using such fonts look good. ","value":"geometricPrecision "},{"description":"

Indicates that the browser should favor legibility over rendering speed and geometric precision. Browsers usually apply anti-aliasing or font hinting to display the most legible text. ","value":"optimizeLegibility "},{"description":"

Indicates that the browser should favor rendering speed over legibility and geometric precision. Browsers usually disable kerning and ligatures and sometimes turn off anti-aliasing. ","value":"optimizeSpeed "}]},"css/properties/text-script":{"SUMMARY":"

Obsolete: unsupported. ","URL":"https://www.webplatform.org/docs/css/properties/text-script"},"css/properties/text-shadow":{"SUMMARY":"

The CSS text-shadow property applies one or more drop shadows to the text and <text-decorations> of an element. Each shadow is specified as an offset from the text, along with optional color and blur radius values. ","URL":"https://www.webplatform.org/docs/css/properties/text-shadow","VALUES":[{"description":"

Optional. The blur radius is a <length> term that indicates the boundaries of the blur effect. ","value":"<blur-radius> "},{"description":"

Optional. A color value may be applied before or after the <length> terms of both shadow effects. The color value will be inherited as the basis for the shadow. If a color is not specified by the user, the value of the color property will be used instead. ","value":"<color> "},{"description":"

Default value. ","value":"none "},{"description":"

Required. Specifies the horizontal <length> term to the right of the text. A negative horizontal <length> term will place the shadow to the left of the text. ","value":"<offset-x> "},{"description":"

Required. Specifies the vertical <length> value below the text. A negative vertical <length> term will place the shadow above the text. ","value":"<offset-y> "}]},"css/properties/text-transform":{"SUMMARY":"

This property transforms text for styling purposes. (It has no effect on the underlying content.) ","URL":"https://www.webplatform.org/docs/css/properties/text-transform","VALUES":[{"description":"

Transforms the first character of each word to uppercase. ","value":"capitalize "},{"description":"

Puts all characters in fullwidth form. If the character does not have a corresponding fullwidth form, it is left as is. This value is typically used to typeset Latin characters and digits like ideographic characters. ","value":"full-width "},{"description":"

Transforms all the characters to lowercase. ","value":"lowercase "},{"description":"

Default. Text is not transformed. ","value":"none "},{"description":"

Transforms all the characters to uppercase. ","value":"uppercase "}]},"css/properties/text-underline":{"SUMMARY":"

Unsupported.

The 'text-underline' property is the shorthand for 'text-underline-style', 'text-underline-width', 'text-underline-color', 'text-underline-mode' and 'text-underline-position'. ","URL":"https://www.webplatform.org/docs/css/properties/text-underline","VALUES":[{"description":"

This property specifies the line color for the underline. ","value":"text-underline-color "},{"description":"

This property set the mode for the underline determining whether the text decoration affects the space characters or not. 'Space characters' are all characters classified by the Unicode Standard [UNICODE] as category 'Zs', in addition to the white space characters. Possible values: continuous/skip-white-space ","value":"text-underline-mode "},{"description":"

This property sets the position of the underline. It can appear either 'before' (above in an horizontal flow) or after (below in an horizontal flow) the run of text in relation to its baseline orientation. This property is typically used in vertical writing context where it may be desired to have the underline appear 'before' the run of text. This results in having the underline appearing on the right side of the vertical writing column. Possible values: auto/before-edge/alphabetic/after-edge ","value":"text-underline-position "},{"description":"

This property specify the line style for underline. Possible values: none/solid/double/dotted/dashed/dot-dash/dot-dot-dash/wave ","value":"text-underline-style "}]},"css/properties/text-underline-position":{"SUMMARY":"

Unsupported.

This property will add a underline position value to the element that has an underline defined. ","URL":"https://www.webplatform.org/docs/css/properties/text-underline-position","VALUES":[{"description":"

The underline is positioned relative to the alphabetic baseline. In this case the underline is likely to cross some descenders. Decoration appears below the text. ","value":"alphabetic "},{"description":"

Decoration appears above the text. ","value":"auto "},{"description":"

In vertical writing modes, the underline is aligned as for ‘under’, except it is always aligned to the left edge of the text. If this causes the underline to be drawn on the \"over\" side of the text, then an overline also switches sides and is drawn on the \"under\" side. ","value":"left "},{"description":"

In vertical writing modes, the underline is aligned as for ‘under’, except it is always aligned to the right edge of the text. If this causes the underline to be drawn on the \"over\" side of the text, then an overline also switches sides and is drawn on the \"under\" side. ","value":"right "},{"description":"

The underline is positioned under the element's text content. In this case the underline usually does not cross the descenders. (This is sometimes called \"accounting\" underline.) This value can be combined with ‘left’ or ‘right’ if a particular side is preferred in vertical writing modes. ","value":"under "}]},"css/properties/text-underline-style":{"SUMMARY":"

After review this should be replaced by text-decoration should it not?

This property will set the underline style for text with a line value for underline, overline, and line-through. ","URL":"https://www.webplatform.org/docs/css/properties/text-underline-style","VALUES":[{"description":"

This will produce a dashed line ","value":"dashed "},{"description":"

This will produce a line that has a repeating pattern of a dot followed by a dash. ","value":"dot-dash "},{"description":"

This will produce a line that has a repeating pattern of two dots followed by a dash. ","value":"dot-dot-dash "},{"description":"

This will produce a dotted line. ","value":"dotted "},{"description":"

This will produce a double line. ","value":"double "},{"description":"

This will produce no line. ","value":"none "},{"description":"

This will produce a solid line. ","value":"solid "},{"description":"

This will produce a wavy line. ","value":"wave "}]},"css/properties/text-underline-width":{"SUMMARY":"

This defines the line width for underline, overline, or line-through of text decorations ","URL":"https://www.webplatform.org/docs/css/properties/text-underline-width","VALUES":[{"description":"","value":"auto "},{"description":"","value":"<length> "},{"description":"","value":"medium "},{"description":"","value":"normal "},{"description":"","value":"<number> "},{"description":"","value":"<percentage> "},{"description":"","value":"thick "},{"description":"","value":"thin "}]},"css/properties/top":{"SUMMARY":"

This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties). ","URL":"https://www.webplatform.org/docs/css/properties/top","VALUES":[{"description":"

For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details. For replaced elements, the effect of this value depends only on the intrinsic dimensions of the replaced content. See the sections on the width and height of absolutely positioned, replaced elements for details ","value":"auto "},{"description":"

The offset is a fixed distance from the reference edge. Negative values are allowed. For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"

The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). Negative values are allowed. ","value":"percentage "}]},"css/properties/touch-action":{"SUMMARY":"

Determines whether touch input may trigger default behavior supplied by the user agent, such as panning or zooming. ","URL":"https://www.webplatform.org/docs/css/properties/touch-action","VALUES":[{"description":"

The user agent MAY determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element. ","value":"auto "},{"description":"

The user agent MAY consider touches that begin on the element only for the purposes of scrolling and continuous zooming. ","value":"manipulation "},{"description":"

Touches that begin on the element MUST NOT trigger default touch behaviors. ","value":"none "},{"description":"

The user agent MAY consider touches that begin on the element only for the purposes of horizontally scrolling the element's nearest ancestor with horizontally scrollable content. ","value":"pan-x "},{"description":"

The user agent MAY consider touches that begin on the element only for the purposes of vertically scrolling the element's nearest ancestor with vertically scrollable content. ","value":"pan-y "}]},"css/properties/transform":{"SUMMARY":"

CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space. Using this property, elements can be translated, rotated, scaled, and skewed. The value list may consist of 2D and/or 3D transform values. ","URL":"https://www.webplatform.org/docs/css/properties/transform","VALUES":[{"description":"

Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order. ","value":"matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) "},{"description":"

Specifies a 2D transformation matrix in the form of a transformation matrix of the six values, a-f. ","value":"matrix(a, b, c, d, e, f) "},{"description":"

Specifies that no transform should be applied. ","value":"none "},{"description":"

Specifies a perspective projection matrix, which scales points in the X and Y directions based on their Z value. Thus, points with positive Z values are scaled away from the origin, and those with negative Z values are scaled toward the origin. ","value":"perspective(p) "},{"description":"

Specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. ","value":"rotate3d(x, y, z, a) "},{"description":"

Specifies a 3D rotation by the angle specified in the X direction. Equivalent to rotate3d(1, 0, 0, ax). ","value":"rotateX(ax) "},{"description":"

Specifies a 3D rotation by the angle specified in the Y direction. Equivalent to rotate3d(0, 1, 0, ay). ","value":"rotateY(ay) "},{"description":"

Specifies a 3D rotation by the angle specified in the Z direction. Equivalent to rotate3d(0, 0, 1, az). ","value":"rotateZ(az) "},{"description":"

Specifies a 2D rotation by the specified angle around the origin of the element, as defined by the transform-origin property. ","value":"rotate(a) "},{"description":"

Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the three parameters. ","value":"scale3d(sx, sy, sz) "},{"description":"

Specifies a scale operation using the vector [sx, 1]. ","value":"scaleX(sx) "},{"description":"

Specifies a scale operation using the vector [1, sy]. ","value":"scaleY(sy) "},{"description":"

Specifies a 3D scale operation by the scaling vector [1,1,sz]. ","value":"scaleZ(sz) "},{"description":"

Specifies a 2D scaling operation described by [sx, sy]. If sy is not specified, it is assumed to be equal to sx. ","value":"scale(sx, sy) "},{"description":"

Specifies a 2D skew transformation along the X axis by the given angle. ","value":"skewX(ax) "},{"description":"

Specifies a 2D skew transformation along the Y axis by the given angle. ","value":"skewY(ay) "},{"description":"

Specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it is assumed to be zero. ","value":"skew(ax, ay) "},{"description":"

Specifies a 3D translation by the vector [tx,ty,tz] in the X, Y, and Z directions. ","value":"translate3d(tx, ty, tz) "},{"description":"

Translates the element by the given amount along the X axis. ","value":"translateX(x) "},{"description":"

Translates the element by the given amount along the Y axis. ","value":"translateY(y) "},{"description":"

Specifies a 3D translation by the vector [0,0,tz] in the Z direction. ","value":"translateZ(tz) "},{"description":"

Specifies a 2D translation by the vector [tx, ty]. If ty is not specified, its value is assumed to be zero. ","value":"translate(tx, ty) "}]},"css/properties/transform-origin-z":{"SUMMARY":"

This property allows you to define the relative position of the origin of the transformation grid along the z-axis. ","URL":"https://www.webplatform.org/docs/css/properties/transform-origin-z","VALUES":[{"description":"

A floating-point number, followed by a unit of measurement. Units of measurement may be absolute (cm, mm, in, pt, or pc) or relative (em, ex, or px). For more information about the supported length units, see CSS Values and Units. ","value":"length "}]},"css/properties/transform-style":{"SUMMARY":"

This property specifies how nested elements are rendered in 3D space relative to their parent. ","URL":"https://www.webplatform.org/docs/css/properties/transform-style","VALUES":[{"description":"

Child elements will not preserve their 3D position before applying a transform. ","value":"flat "},{"description":"

Child elements will preserve their 3D position before applying a transform. ","value":"preserve-3d "}]},"css/properties/transition":{"SUMMARY":"

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. ","URL":"https://www.webplatform.org/docs/css/properties/transition","VALUES":[{"description":"

Value of the transition-delay property. ","value":"transition-delay "},{"description":"

Value of the transition-duration property. ","value":"transition-duration "},{"description":"

Value of the transition-property property. ","value":"transition-property "},{"description":"

Value of the transition-timing-function property. ","value":"transition-timing-function "}]},"css/properties/transition-delay":{"SUMMARY":"

Defines when the transition will start. A value of ‘0s’ means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset. ","URL":"https://www.webplatform.org/docs/css/properties/transition-delay","VALUES":[{"description":"

Floating-point number, followed by a time units designator (ms or s). For more information about the supported time units, see CSS Values and Units Reference.

Values are rounded up to the second decimal place. Each transition-delay is paired with a corresponding object property identified in the transition-property property. If more transition-delay values are declared than corresponding object properties identified in the transition-property property, the excess transition-delay values are ignored. If fewer transition-delay values are declared than corresponding object properties identified in the transition-property property, the list of transition-delay values is repeated from the beginning until the object properties are exhausted. ","value":"time "}]},"css/properties/transition-duration":{"SUMMARY":"

The 'transition-duration' property specifies the length of time a transition animation takes to complete. ","URL":"https://www.webplatform.org/docs/css/properties/transition-duration","VALUES":[{"description":"

Floating-point number, followed by a time units designator (ms or s). For more information about the supported time units, see CSS Values and Units Reference. ","value":"time "}]},"css/properties/transition-property":{"SUMMARY":"

The 'transition-property' property specifies the name of the CSS property to which the transition is applied. ","URL":"https://www.webplatform.org/docs/css/properties/transition-property","VALUES":[{"description":"

All properties that support transitions have the transition effect applied when a new value for the property is specified. (Default) ","value":"all "},{"description":"

No transition effect is applied (all transition properties are ignored) when a new property value is specified. ","value":"none "},{"description":"

A list of properties, separated by commas, to which the transition effect is applied. ","value":"propertyname "}]},"css/properties/transition-timing-function":{"SUMMARY":"

Sets the pace of action within a transition ","URL":"https://www.webplatform.org/docs/css/properties/transition-timing-function","VALUES":[{"description":"

Function value specifying a customized response curve. ","value":"cubic-bezier() "},{"description":"

Function value specifying a series of discrete intervals. ","value":"steps() "},{"description":"

Default. Starts and stops gradually, equivalent to cubic-bezier(0.25,0.1,0.25,1) ","value":"ease "},{"description":"

Starts gradually and stops suddenly, equivalent to cubic-bezier(0.42,0,1,1). ","value":"ease-in "},{"description":"

Starts and stops gradually, equivalent to cubic-bezier(0.42,0,0.58,1). ","value":"ease-in-out "},{"description":"

Starts suddenly and stops gradually, equivalent to cubic-bezier(0,0,0.58,1). ","value":"ease-out "},{"description":"

Starts and stops immediately, progressing at a constant rate, equivalent to cubic-bezier(0,0,1,1). ","value":"linear "},{"description":"

The change occurs instantly at the end of the keyframe, equivalent to steps(1, end). ","value":"step-end "},{"description":"

The change occurs instantly at the start of the keyframe, equivalent to steps(1, start). ","value":"step-start "}]},"css/properties/unicode-bidi":{"SUMMARY":"

The unicode-bidi CSS property specifies the level of embedding with respect to the bidirectional algorithm. ","URL":"https://www.webplatform.org/docs/css/properties/unicode-bidi","VALUES":[{"description":"

Same as the embed value, except that, inside the element, reordering is strictly in sequence according to the direction property. This value overrides the implicit bidirectional algorithm. ","value":"bidi-override "},{"description":"

Element opens an additional level of embedding. The value of the direction property specifies the embedding level. Reordering is implicit inside the element. ","value":"embed "},{"description":"

Default. Element does not open an additional level of embedding. For inline elements, implicit reordering works across element boundaries. ","value":"normal "}]},"css/properties/unicode-range":{"SUMMARY":"

unicode-range allows you to set a specific range of characters to be downloaded from a font (embedded using @font-face) and made available for use on the current page. ","URL":"https://www.webplatform.org/docs/css/properties/unicode-range","VALUES":[{"description":"

A range of unicode codepoints. So for example, unicode-range: U+0025-00FF means \"include all characters in the range U+0025 to U+00FF.\" ","value":"codepoint range "},{"description":"

You can specify multiple single codepoints and/or codepoint groups, delimiting them using commas. For example, unicode-range: U+00-FF, U+980-9FF. ","value":"multiple value declarations "},{"description":"

A single unicode character codepoint, for example unicode-range: U+26. ","value":"single codepoint "},{"description":"

You can specify wildcard characters using the \"?\" character, so for example unicode-range: U+4?? would mean \"include all characters in the range U+400 to U+4FF.\" ","value":"wildcard range "}]},"css/properties/user-focus":{"SUMMARY":"

This is for all the high level UX stuff. ","URL":"https://www.webplatform.org/docs/css/properties/user-focus","VALUES":[{"description":"

Default. Every single thing is under focus. ","value":"all "},{"description":"

None of the descendants of the element can be brought under consideration or focus, neither text nor images. ","value":"none "},{"description":"

Only text of the element and its descendants can be focused or brought under consideration.. ","value":"text "}]},"css/properties/user-input":{"SUMMARY":"

For inputing user content ","URL":"https://www.webplatform.org/docs/css/properties/user-input","VALUES":[{"description":"

Any alpha numeric data can be entered, usually in text boxes, or address fields. ","value":"text "}]},"css/properties/user-modify":{"SUMMARY":"

Needs content ","URL":"https://www.webplatform.org/docs/css/properties/user-modify"},"css/properties/user-select":{"SUMMARY":"

Controls the visible highlighting of selections of text and elements. It is possible to blind out selection completely or to allow the selection of text only. ","URL":"https://www.webplatform.org/docs/css/properties/user-select","VALUES":[{"description":"

Default. Everything, text and images, can be selected. ","value":"all "},{"description":"

Only specified elements can be selected. Only supported in Firefox and Internet Explorer. ","value":"element "},{"description":"

None of the descendants of the element can be selected, neither text nor images. ","value":"none "},{"description":"

Only text of the element and its descendants can be selected. ","value":"text "}]},"css/properties/vertical-align":{"SUMMARY":"

The vertical-align property controls how inline elements or text are vertically aligned compared to the baseline. If this property is used on table-cells it controls the vertical alignment of content of the table cell. ","URL":"https://www.webplatform.org/docs/css/properties/vertical-align","VALUES":[{"description":"

Default. Vertically aligns the content with the baseline of its parent. ","value":"baseline "},{"description":"

Vertically aligns the content and its descendants to the bottom of the text line. ","value":"bottom "},{"description":"

Raises or lowers the content by the specified length. If this is set to a positive number the content is raised compared to the baseline of its parent. If this is set to a negative number the content is lowered compared to the baseline of its parent. If set to 0 it is equivalent to baseline. ","value":"<length> "},{"description":"

Vertically aligns the content to the middle of its parent. ","value":"middle "},{"description":"

Raises or lowers the content by a percentage of the line height. If this is set to a positive number the content is raised compared to the baseline of its parent. If this is set to a negative number the content is lowered compared to the baseline of its parent. If set to 0 it is equivalent to baseline. ","value":"<percentage> "},{"description":"

Vertically aligns the content to subscript. ","value":"sub "},{"description":"

Vertically aligns the content to superscript. ","value":"super "},{"description":"

Vertically aligns the content to the bottom of its parent. ","value":"text-bottom "},{"description":"

Vertically aligns the content to the top of its parent. ","value":"text-top "},{"description":"

Vertically aligns the content and its descendants to the top of the text line. ","value":"top "}]},"css/properties/visibility":{"SUMMARY":"

The visibility property specifies whether the boxes generated by an element are rendered. ","URL":"https://www.webplatform.org/docs/css/properties/visibility","VALUES":[{"description":"

This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. This value is used for row, row group, column, and column group elements. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'. ","value":"collapse "},{"description":"

Object is hidden. The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible. ","value":"hidden "},{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

The element is visible. ","value":"visible "}]},"css/properties/voice-balance":{"SUMMARY":"

The voice-balance property sets the apparent position (in stereo sound) of the synthesized voice for spoken media. ","URL":"https://www.webplatform.org/docs/css/properties/voice-balance"},"css/properties/voice-duration":{"SUMMARY":"

The voice-duration property allows the author to explicitly set the amount of time it should take a speech synthesizer to read an element's content, for example to allow the speech to be synchronized with other media. With a value of auto (the default) the length of time it takes to read the content is determined by the content itself and the voice-rate property. ","URL":"https://www.webplatform.org/docs/css/properties/voice-duration"},"css/properties/voice-family":{"SUMMARY":"

The voice-family property sets the speaker's voice used by a speech media agent to read an element. The speaker may be specified as a named character (to match a voice option in the speech reading software) or as a generic description of the age and gender of the voice. Similar to the font-family property for visual media, a comma-separated list of fallback options may be given in case the speech reader does not recognize the character name or cannot synthesize the requested combination of generic properties. ","URL":"https://www.webplatform.org/docs/css/properties/voice-family"},"css/properties/voice-pitch":{"SUMMARY":"

The voice-pitch property sets pitch or tone (high or low) for the synthesized speech when reading an element; the pitch may be specified absolutely or relative to the normal pitch for the voice-family used to read the text. ","URL":"https://www.webplatform.org/docs/css/properties/voice-pitch"},"css/properties/voice-range":{"SUMMARY":"

The voice-range property determines how much variation in pitch or tone will be created by the speech synthesize when reading an element. Emphasized text, grammatical structures and punctuation may all be rendered as changes in pitch, this property determines how strong or obvious those changes are; large ranges are associated with enthusiastic or emotional speech, while small ranges are associated with flat or mechanical speech. ","URL":"https://www.webplatform.org/docs/css/properties/voice-range"},"css/properties/voice-rate":{"SUMMARY":"

The voice-rate property sets the speed at which the voice synthesized by a speech media agent will read content. ","URL":"https://www.webplatform.org/docs/css/properties/voice-rate"},"css/properties/voice-stress":{"SUMMARY":"

The voice-stress property sets the level of vocal emphasis to be used for synthesized speech reading the element. ","URL":"https://www.webplatform.org/docs/css/properties/voice-stress"},"css/properties/voice-volume":{"SUMMARY":"

The voice-volume property sets the volume for spoken content in speech media. It replaces the deprecated volume property. ","URL":"https://www.webplatform.org/docs/css/properties/voice-volume"},"css/properties/white-space":{"SUMMARY":"

The white-space property controls whether and how white space inside the element is collapsed, and whether lines may wrap at unforced \"soft wrap\" opportunities. ","URL":"https://www.webplatform.org/docs/css/properties/white-space","VALUES":[{"description":"

This value prevents user agents from collapsing sequences of white space. Segment breaks such as line feeds and carriage returns are preserved as forced line breaks. Lines only break at forced line breaks; content that does not fit within the block container overflows it. ","value":"normal "},{"description":"

Like normal, but content does not wrap to the next line. ","value":"nowrap "},{"description":"

Line breaks and other whitespace are preserved. ","value":"pre "},{"description":"

Like normal, this value collapses consecutive spaces and allows wrapping, but preserves segment breaks in the source as forced line breaks. ","value":"pre-line "},{"description":"

Like pre, but allows wrapping (like normal's wrapping). ","value":"pre-wrap "}]},"css/properties/white-space-treatment":{"SUMMARY":"

Obsolete: unsupported. ","URL":"https://www.webplatform.org/docs/css/properties/white-space-treatment"},"css/properties/widows":{"SUMMARY":"

Defines the minimum number of lines that can appear in the beginning of a new page. In typography, a widow is the last line of a paragraph appearing alone at the top of a page, which is considered to look awkward. Setting the widows property to an integer higher than 1 prevents this.

On a non-paged media, like screen, the widows CSS property has no effect. It can have a number value or it can inherit the values from the parent element. ","URL":"https://www.webplatform.org/docs/css/properties/widows","VALUES":[{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Denotes the minimum number of lines that can appear alone on the top of a new page. If the value is not positive, the declaration is invalid. ","value":"integer "}]},"css/properties/width":{"SUMMARY":"

Specifies the width of the content area of an element. The content area of the element width does not include the padding, border, and margin of the element. ","URL":"https://www.webplatform.org/docs/css/properties/width","VALUES":[{"description":"

If auto is set for the elements width, the browser will determine the width for the element. ","value":"auto "},{"description":"

The containing block width minus horizontal margin, border, and padding ","value":"available "},{"description":"

If border-box is used, the length or percentage defined will be applied to the element's border box. ","value":"border-box "},{"description":"

If content-box is used, the length or percentage defined will be applied to the element's content-box. ","value":"content-box "},{"description":"

This will be either the large of the minimum width or the smaller of the preferred width and the available width ","value":"fit-content "},{"description":"

This is an experimental rule for max-content. Currently it only works in Chrome, however you should be using max-content instead since that is the standard. ","value":"intrinsic "},{"description":"

Will take a number that is immediately followed by a length unit such as px, em, in, etc. ","value":"length "},{"description":"

The intrinsic preferred width ","value":"max-content "},{"description":"

The intrinsic minimum width ","value":"min-content "},{"description":"

Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed. ","value":"percentage "}]},"css/properties/word-break":{"SUMMARY":"

The word-break property is often used when there is long generated content that is strung together without and spaces or hyphens to beak apart. A common case of this is when there is a long URL that does not have any hyphens. This case could potentially cause the breaking of the layout as it could extend past the parent element. ","URL":"https://www.webplatform.org/docs/css/properties/word-break","VALUES":[{"description":"

In addition to normal soft wrap opportunities, lines may break between any two letters (except where forbidden by the line-break property). Hyphenation is not applied. This option is used mostly in a context where the text is predominantly using CJK (Chinese/Japanese/Korean) characters with few non-CJK excerpts and it is desired that the text be better distributed on each line. ","value":"break-all "},{"description":"

Implicit soft wrap opportunities between letters are suppressed, i.e. breaks are prohibited between pairs of letters (except where opportunities exist due to dictionary-based breaking). Otherwise this option is equivalent to normal. In this style, sequences of CJK characters do not break. ","value":"keep-all "},{"description":"

Default property. Words break according to their usual rules. ","value":"normal "}]},"css/properties/word-spacing":{"SUMMARY":"

The word-spacing CSS property specifies the spacing behavior between \"words\". ","URL":"https://www.webplatform.org/docs/css/properties/word-spacing","VALUES":[{"description":"

Indicates inter-word space in addition to the default space between words, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Values may be negative, but there may be implementation-specific limits. ","value":"length "},{"description":"

The spacing is the normal spacing for the current font. ","value":"normal "},{"description":"

Specifies the additional spacing as a percentage of the affected word's advance measure. ","value":"percentage "}]},"css/properties/word-wrap":{"SUMMARY":"

An alias of css/properties/overflow-wrap, word-wrap defines whether to break words when the content exceeds the boundaries of its container. ","URL":"https://www.webplatform.org/docs/css/properties/word-wrap","VALUES":[{"description":"

Words that exceed the width of the container will be arbitrarily broken to fit within the container's bounds. ","value":"break-word "},{"description":"

Default. Lines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.). ","value":"normal "}]},"css/properties/wrap-flow":{"SUMMARY":"

Specifies how exclusions affect inline content within block-level elements. Elements lay out their inline content in their content area but wrap around exclusion areas. ","URL":"https://www.webplatform.org/docs/css/properties/wrap-flow","VALUES":[{"description":"

No exclusion is created. Inline flow content interacts with the element as usual.

wrap-flow:auto applied to grid positioned elements ","value":"auto "},{"description":"

Inline flow content can flow on all sides of the exclusion.

wrap-flow:both applied to grid positioned elements ","value":"both "},{"description":"

Inline flow content can only flow before and after the exclusion in the flow content's block direction, and must leave the areas next to the start and end edges of the exclusion empty.

wrap-flow:clear applied to grid positioned elements ","value":"clear "},{"description":"

Inline flow content can flow around the end edge of the exclusion area but must leave the area next to the start edge of the exclusion empty.

wrap-flow:end applied to grid positioned elements ","value":"end "},{"description":"

Inline flow content can flow around the edge of the exclusion with the largest available space within the flow content's containing block, and must leave the other edge of the exclusion empty.

wrap-flow:maximum applied to grid positioned elements ","value":"maximum "},{"description":"

Inline flow content can flow around the edge of the exclusion with the smallest available space within the flow content's containing block, and must leave the other edge of the exclusion empty.

wrap-flow:minimum applied to grid positioned elements ","value":"minimum "},{"description":"

Inline flow content can flow around the start edge of the exclusion area but must leave the area next to the end edge of the exclusion empty.

wrap-flow:start applied to grid positioned elements ","value":"start "}]},"css/properties/wrap-margin":{"SUMMARY":"

Set the value that is used to offset the inner wrap shape from other shapes. Inline content that intersects a shape with this property will be pushed by this shape's margin. ","URL":"https://www.webplatform.org/docs/css/properties/wrap-margin","VALUES":[{"description":"

The value that is used to offset the inner wrap shape from other shapes. ","value":"<length> "}]},"css/properties/wrap-option":{"SUMMARY":"

Obsolete and unsupported. Do not use.

This CSS property controls the text when it reaches the end of the block in which it is enclosed. ","URL":"https://www.webplatform.org/docs/css/properties/wrap-option","VALUES":[{"description":"

The text is wrapped like for the 'wrap' case, except that the line-breaking algorithm will allow as a last resort option a text wrap after the last character which can fit before the ending edge of the line box, independently of 'line-break', 'word-break-cjk' and 'word-break-inside' properties. For example, this addresses the situation of very long words constrained in a fixed-width container with no scrolling allowed. ","value":"emergency "},{"description":"

The text is only wrapped where explicitly specified by preserved line feed characters. In the case when lines are longer than the available block width, the overflow will be treated in accordance with the 'overflow' property specified in the element. ","value":"no-wrap "},{"description":"

The text is wrapped after the last character which can fit before the ending-edge of the line and where explicitly specified by preserved line feed characters. No line-breaking algorithm is invoked. The intended usage is the rendering of a character terminal emulation. ","value":"soft-wrap "},{"description":"

The text is wrapped at the best line-breaking opportunity (if required) within the available block inline-progression dimension ","value":"wrap "}]},"css/properties/wrap-through":{"SUMMARY":"

Specifies whether an element inherits its parent's wrapping context as defined by the wrap-flow property. ","URL":"https://www.webplatform.org/docs/css/properties/wrap-through","VALUES":[{"description":"

The element ignores its parent's wrapping context. Its descendent inline content only wraps around exclusions defined inside this element. ","value":"none "},{"description":"

The element inherits its parent node's wrapping context. Its descendant inline content wraps around exclusions defined outside the element. ","value":"wrap "}]},"css/properties/writing-mode":{"SUMMARY":"

writing-mode specifies if lines of text are laid out horizontally or vertically, and the direction which lines of text and blocks progress. ","URL":"https://www.webplatform.org/docs/css/properties/writing-mode","VALUES":[{"description":"

Lines of text are laid out horizontally, and progress from the top to the bottom of the page. This is the writing mode used in many writing systems, such as Latin, Greek, Cyrillic, Arabic, Hebrew, etc. ","value":"horizontal-tb "},{"description":"

Lines of text are laid out vertically, and progress from the left to the right of the page. Mongolian-based writing systems typically use this writing mode. ","value":"vertical-lr "},{"description":"

Lines of text are laid out vertically, and progress from the right to the left of the page. Asian languages, such as Chinese or Japanese traditionally used this writing mode. ","value":"vertical-rl "}]},"css/properties/z-index":{"SUMMARY":"

The z-index property controls the stacking order of elements. As the x-axis defines the horizontal (left-right) position of elements on the screen, and the y-axis defines the vertical (top-down) position, think of the z-axis as the third dimension or depth-of-field, rising “out of” the screen, towards the viewer, or descending “into” the screen, away from the viewer. ","URL":"https://www.webplatform.org/docs/css/properties/z-index","VALUES":[{"description":"

Default. Specifies the stacking order of the positioned objects based on the top-down order in which the objects appear in the HTML source. ","value":"auto "},{"description":"

Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"

Integer that specifies the position of the object in the stacking order. The value is arbitrary and may be negative, zero, or positive. ","value":"<integer> "}]},"css/properties/zoom":{"SUMMARY":"

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

inset( <shape-arg>{1,4} [round <border-radius>]? )
\n\n

Defines an inset rectangle.

\n\n

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

\n\n

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

\n\n

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

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

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

\n\n

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

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

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

\n\n

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

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

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

\n\n

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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